// -->

Blogger Theme Template Creation Continues

Sections of A Blogger Blog


  The div tag puts the content within it's opening and closing tags into a section, to allow for the content to be styled a bit easier.  The b:section tag actually turns into a div element when the blogger parsing engine renders the code.  inside the div and b:section opening tags there is an id and a class.  The word surrounded by quotes after the equals sign is the name to select that paticular element for styling also called the selector. 

  Blogger's parsing engine will not allow a div element directly inside a b:section element, so for further styling to particular gadgets, there will be div elements inside the widget's code. These will either be denoted by < div class = ' ' > , by &lt; div class=&quot; &quot; &gt; without the spaces between the characters, or it may be one of the two previous examples with the word class replaced with id.

<body>  

<div id="body" class="body">

  <b:section id="header" class="header" maxwidgets="3 " showaddelement="yes">

</b:section>

  <b:section id="navigation" class="navigation" maxwidgets="1" showaddelement="yes">

</b:section>

  <b:section id="main" class="blog-posts" maxwidgets=" " growth="vertical" showaddelement="yes">

</b:section>

</div>

</body>

</html>

  The maxwidgets sets how many gadgets you can add to that section of the page. Gadgets can be added with Blogger's Layout editor, as long as the showaddelement equals yes. 

  Notice the last b:section has a declaration for the growth of the element to be vertical, which will prevent people from having to scroll to the side to see more content.



  It is much easier to add the gadgets with the Blogger Layout editor than to know all the exact widget declarations and settings needed for each type of gadget. 

  With that said, I will add a couple of gadgets that Blogger allows you to add easily. Those gadgets will be the page header gadget to the head section, and the pages widget to the navigation section. However, to keep code examples fairly short, I will not show those widgets in the example code.

  Add more b:sections along with classes and id's to provide the layout with a sidebar and a footer or two to provide a space on the blogger blog for additional gadgets. Additional gadgets such as the profile gadget, html gadget, and other's really help to quickly provide a bit more of the fine print information regarding the blog as well as provide JavaScript functionality.

  To get the blog posts to show, I'm unfortunately going to have to start the blog post gadget with code back in Blogger's html editor.  Luckily, I don't have to know all the widget settings as long as I know the correct widget to call into the section to get the blog posts. In the code just below I added the blog post widget with the b:widget tag inside the b:section with the id of main and class of blog-posts.

<body>  

<div id="body" class="body">

  <b:section id="header" class="header" maxwidgets="3 " showaddelement="yes">

</b:section>

  <b:section id="navigation" class="navigation" maxwidgets="1" showaddelement="yes">

</b:section>

  <b:section id="sidebar-right-1" class="sidebar-right-1" maxwidgets="1" showaddelement="yes">

</b:section>

  <b:section id="main" class="blog-posts" maxwidgets=" " growth="vertical" showaddelement="yes">

  <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog" version="1">

</b:widget>

</b:section>

  <b:section id="footer-left-1" class="footer-left-1" maxwidgets="1" showaddelement="yes">

</b:section>

  <b:section id="footer-right-1" class="footer-right-1" maxwidgets="1" showaddelement="yes">

</b:section>

</div>

</body>

</html>

  As long as you have the closing b:widget tag, when you save the template, Blogger will automatically fill the required widget settings in between the opening and the closing of the b:widget tag. It can then be somewhat customized in the Blogger Layout editor with the edit button on the widget.

  At this point the blogger widget will display each post with all of the default settings, and content in full. With the post fully readable, forcing people to scroll to see if there is anything else interesting, it tends to stick the user to the homepage because they don't have to click to the acutal post to read it.  

  I don't want people to be stuck on the homepage of my blog, as that would prevent me from finding out what posts are truely interesting to people. However, that kind of customization has to be done through Blogger's html editor, and will be the next post.


Current rating:

Up Vote It!


No comments:

Post a Comment

Subscribe to: Post Comments (Atom)