Mission 1: Before we take on any of the in depth of the technical stuffs. It is very much necessary for the newbies to understand the skeletal structure of a typical Blogger site and the corresponding Blogger template HTML. This post is mainly focused for the newbies to get a clear cut basics and foundation on the understanding of the Blogger Layout structure.
A pictorial representation of the Blogger website layout:
Though, there are other variations where the two sidebars are at one side, only one sidebar, and so on. A typical blog should have these in general.
1) Header – This name is obvious, where you place your LOGO, NAVBARS/MENUS, TITLE & DESCRIPTION.
2) Left/Right Sidebar – This is where you place your About me, Social Elements, Labels, Archive and so on. It is up to you to place what would be best.
3) Main Post Content Area– The name itself says. This is where your blog articles appear with all other customizations.
4) Footer Area – This section you can place your about me as in my blog, recent posts, recent comments, twitter feeds, followers widget and so on.
5) Credit Section – This is where you place all the credits for your theme/blog/icons/images and about the copyrights specifications of the blog.
A typical HTML page structure is:
All the initialization for the blog/page like variables, meta tags and CSS stylings.
Your elements and HTML stuffs that needs to appear on the page
Let’s take this Blogger template for explaining the below comparison-
Blogger Template Style
Designer: Josh Peterson
Important Blogger Template HTML Comparisons:
1) Body Tag –
This is a normal HTML tag also found on your blog, where all the elements which needs to appear on your blog on the internet needs to be placed.
In the above mentioned blog, you can find this as the body tag:
<body expr:class=’"loading" + data:blog.mobileClass’>
2) Content –
This is where the complete elements are placed on your blog – Posts, Sidebar and Footer.
Note: Different templates would have different naming for the content attribute.
To test the content attribute, just after <div class=’content’>
Place some junk words like “HIIIIIIIIIIIIIIIIIIII Am in Content”
HIIIIIIIIIIIIIIIII Am in the Content
3) Header –
This tag may be different for different templates.
Sometimes it may be
Within <header></header> you place all the header elements for the blog like blog logo, Blog title, blog descriptions and menus.
4) Main Wrapper –
This is where the content and sidebar is placed.
Other templates may have something like:
5) Post Content Entry Point-
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
That is the tag which says that we have entered the post body or contents.
6) Post Header –
We are right now under the post title.
7) Sidebar –
That is where your sidebar contents start for this template.
We sometimes have div elements for right side or left side sidebar as <div id=”rsidebar”> or <div id=”lsidebar”> respectively.
Other names for div are
and so on.
8) Footer –
That’s it for today. If you have any doubt on this comparison you can ask on the comment section. Please let me know. We will be seeing more on the structure diagrammatically in the next tutorial series.
Thanks for learning along with me. Enjoy!!