Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Angah Study Case

    Загружено:

    Anonymous JdLYugQR
    21 просмотров14 страниц
    test

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    test

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    21 просмотров14 страниц

    Angah Study Case

    Загружено:

    Anonymous JdLYugQR
    test

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 14

    How To Making Blogger Template

    Blogger.com has long been on the air, and many people are using blogger. However, difficulties in processing the template is still quite complicated by some users. To that end, this time threelas will discuss how to create a template as detailed as possible. In order to be understood by the users of bloggers. Of course, we will make it into several posts.

    History
    Often we receive messages from friends via contact us and social sites, about how to handle their templates. Sometimes we are also frequently encountered blogger users are not satisfied with the original template from blogger. So they try to find another template from a third party. It was also less than the maximum. So we decided to make a post about how to create templates. And of course, we must dismantle the basic secrets of the blogger template. Before we discuss further, we hope that you have read our post about the Section Tag For Blogger Templates and Widget Tags For Blogger Template.

    Section
    Essentially the template has five sections. The fifth sections of it forming your blog with various styles. The fifth sections of is 1. header 2. Mainbar 3. sidebar 4. Footbar 5. footer Entire sections were not obligatory. Because the heart of the template is not it. In the header, can be contained a number of widget, and contains a title and a description of the blog. Title and description is not mandatory, but to meet the requirements of SEO it becomes a major necessity. In Mainbar, contained widget for blog posts. Widget that will display your postings. It should be emphasized, your post comes from the widget. For the sidebar can be divided into two sections, the left sidebar and right sidebar. Each sidebar can be split into several parts. And it all really depends on your choice. Many of the designers blogs, dividing the sidebar as closely as possible for a particular purpose. Footbar also one important part, usually footbar divided into sections for

    specific purposes and objectives of the designers blogs. While the footer contains the names of the designer of your blog (Attribution).

    Template core
    You may ask why we dare to say this, because without the template core then your template will not run properly. Does the content of the template core? Blogger.com has instructed each template should have a <b:skin> tag,html namespace, <? Xml version = "1.0" encoding = "UTF-8"?>, and <! DOCTYPE html>. Here is the core code of the blogger template

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w <html expr:dir='data:blog.languageDirection' xmlns='http://w w w .w 3. <head> <b:skin><![CDATA[ ]]></b:skin>

    </head> <body> </body> </html>

    Now consider what happens to the Page Elements (Design -> Page Elements). You'll look like the picture below

    This image is the result of a template core that is displayed on the Page Elements. Noteworthy is, what is contained in the <b:skin> tag? Basically, each template will have a link to the css file. File containing the knick-knacks to decorate your blog. And this applies even if you use a template from a third party. That means at any time, you can activate the link. Here is the contents of the <b:skin> tag

    <link type='text/css' rel='stylesheet' href='http://w w w .blogger.com/s <link type="text/css" rel="stylesheet" href="http://w w w .blogger.com <style type="text/css"> #navbar-iframe { display:block } </style> <style id='page-skin-1' type='text/css'><!--

    --></style> <script type="text/javascript"> if (w indow .jstiming) w indow .jstiming.load.tick('headEnd'); </script>

    And this is what inside of <b:skin> tag. From here, you start to build a blog with a style that you like. Keep in mind, xml functions is to deliver the data. And for a moment you will not see anything on your blog until next tutorial. Our suggestion, please make a new blog for practice.

    How To Making Blogger Template Part 2


    Yesterday we talked about the secrets of the template core. Now we want to share knowledge on how to create a section and widgets. We feel this is very important, because without it your own blog would not imply anything. For the layout of the section will be discussed on the next post. What we want now from you is able to understand the basic techniques to make sections and widgets. Therefore, we hope you re-read our post about How to making blogger templates, widgets tags, and section tag.

    How to make a section


    From our previous post, about section tags, to create a section in general is as follow
    <b:section id='unique id' class='specific class' maxw idgets="total ma </b:section>

    If you have defined a widget, then automatically on a Page Element will be created a new area. If you give showaddelement is yes, then in the Page Element will show Add a Gadget, a tool to create a new widget.

    Section tag with showaddelement is yes

    Section tag with showaddelement is no

    One thing you must know, if all section tags in your template is not contain showaddelement=yes, then the navbar and the blog post will not show when you open your blog. Section tag with showaddelement=no will contain html code as follow
    <body> <div class='navbar section' id='navbar'></div> <div class='example section' id='header'></div> <script type="text/javascript"> some javascript code </script> </body>

    And

    if

    showaddelement=yes

    then

    it

    will

    contain

    html

    code

    as

    follow

    <body> <div class='navbar section' id='navbar'><div class='w idget Navbar' i function setAttributeOnload(object, attribute, val) { if(w indow .addEventListener) { w indow .addEventListener("load", function(){ object[attribute] = val; }, false); } else { w indow .attachEvent('onload', function(){ object[attribute] = val; } } </script> <iframe ...></iframe> <div></div></div></div> <div class='kepala section' id='header'></div> <script type="text/javascript"> some javascript code </script> </body>

    How to create a widget


    Previously we have discussed this before. A widget tag specified by id attribute, and it type value is depend on type of a widget. As example, if your widget is Follow By Email, then the type of your widget is FollowByEmail. Meaning, if blogger.com creates a new widget type, then it will

    result a new type attribute as well. When this post is on air for the first time, there are 25 type of widget, where 24 type of widget can you create automatically from Page Element and one again is blog post type. For blog post type, you must create it manually from Edit HTML(Design -> Edit HTML).

    24 Section type automatic


    We give you suggestion, as long as your widget is not blog post widget, and then please create it automatically from Page Element (Design -> Page Element). Dont forget; put widget tag inside section tag.

    How to handle includable tag


    Basically, includable tag is not mandatory. But it will more powerful to handle manually from Edit HTML if you give includable tag (as example to specific css type for a widget content). It means, create or not create includable tag inside widget tag, your widget will work. One thing you must now for this tag, all content of a widget is must put inside includable tag.

    How to handle include tag


    Include tag is also not mandatory. The purpose of this tag is to choose one of the content contained by a widget. Includes are most useful if you have a section of code that you want to

    repeat multiple times in different places. One example of this include is screwdriver tool on your blog page.

    Blog page with <b:include name='quickedit'/>

    Blog page without <b:include name='quickedit'/>

    Ok, this is the basic secret how to create a section and a widget. Wait for our next post.

    How To Making Blogger Template Part 3


    On the previous topics we have discussed how to create a section and widgets. However, we do not discuss how to set the layout of the template. In this post, we discuss it. Therefore, our advice, please read our post back about how to create blogger template, how to create blogger template part 2, html, css.

    A. Planning A Template
    Before we make a template, it is important to plan a template. However, in general, a template will look like this

    From the image we can see, the entire contents of the blog is in the body. All depends on the tastes and needs of each people.

    B. Setting the Layout


    Because the entire of blog contents are in the body, then we highly recommend you give width: 100% in css code. Consider the following snippet of code body

    html code
    <body id='bodypart'>...</body>

    css code
    #bodypart{w idth:100%;height:auto;background:url("image-url");}

    We strongly recommend that you give auto at height. Because each page of your blog is very different. For background, you can insert a picture as background. However, you must accept the consequences of your blog to be slow. A blog content normally located in the middle of the body. You can do this by following html code
    <div id='blogcontent'> ... </div>

    css code
    margin:0 auto; height:auto; w idth:980px; }

    Components {margin: 0 auto} cause the entire contents of your blog is in the middle the body.

    C. Creating a Sidebar

    Creating a sidebar at the core is essentially css. Consider the following example html code
    <div id='leftside'> <div id='leftsidecontent'> <b:section id='leftpart' class='leftpartside' preferred='yes'/> </div> </div> <div id='mainside'> <div id='mainsidecontent'> <b:section class='main' id='main' show addelement='no'> <b:w idget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div> <div style='clear:both'/>

    css code
    w idth:320px; height:auto; } #leftsidecontent { w idth:300px; height:auto; margin:10px auto; } #mainside { float:right; w idth:660px; height:auto; } #mainsidecontent { w idth:640px; height:auto; margin:10px auto; }

    This code will display the blog posts located on the right (float: right) and the sidebar is on the left (float: left). What to consider when you involve the float is adding <div style='clear:both'/>, which serves to produce a new line. This method applies to all models of the sidebar, which is different is how the presentation. Consider again the following example html code

    </div> <div id='left1'> <div id='left1content'> <b:section id='left1section' class='leftsectionside' preferred='y </div> </div> <div id='left2'> <div id='left2content'> <b:section id='left2section' class='leftsectionside' preferred='y </div> </div> <div style='clear:both'/> </div> <div id='mainside'> <div id='mainsidecontent'> <b:section class='main' id='main' show addelement='no'> <b:w idget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div> <div style='clear:both'/>

    css code
    height:auto; margin:10px auto; } #left2 { float:right; w idth:160px; height:auto; } #left2content { w idth:140px; height:auto; margin:10px auto; } #mainside { float:right; w idth:660px; height:auto; } #mainsidecontent { w idth:640px; height:auto; margin:10px auto; }

    result of this code is left sidebar will break down into two pieces, namely left1 and left2. Consider the following figure

    That's the core of the adjust layout. The rest, you can give a certain style, through the use of css.

    Вам также может понравиться