Lesson 1: Understanding the skeletal structure of the Blogger layout and Blogger template HTML.
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.
NEXT MISSON - Mission 2 - Understanding the Blogger HTML template structure
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.
Let's take this Blogger template for explaining the below comparison-
http://probloggerdesigning.blogspot.com/
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
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'>
and
</body>
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"
as shown:
<div class='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-
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!!
~iTechColumn
NEXT MISSON - Mission 2 - Understanding the Blogger HTML template structure
A pictorial representation of the Blogger website layout:
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:
<html>
<head>
All the initialization for the blog/page like variables, meta tags and CSS stylings.
</head>
<body>
Your elements and HTML stuffs that needs to appear on the page
</body>
</html>Let's take this Blogger template for explaining the below comparison-
http://probloggerdesigning.blogspot.com/
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
Important Blogger Template HTML Comparisons:
1) Body Tag -
<body> </body>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'>
and
</body>
2) Content -
<div class='content'>
</div>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"
as shown:
<div class='content'>
HIIIIIIIIIIIIIIIII Am in the Content
3) Header -
<header></header>This tag may be different for different templates.
Sometimes it may be
<div class="header"></div>Within <header></header> you place all the header elements for the blog like blog logo, Blog title, blog descriptions and menus.
4) Main Wrapper -
<div class="main-outer"></div>This is where the content and sidebar is placed.
Other templates may have something like:
<div class="main-wrapper"></div>
OR
<div id='main-wrapper'></div>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 -
<div class='post-header'>We are right now under the post title.
7) Sidebar -
<b:section-contents id='sidebar-right-1'>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
<div id="sidebar">
<div class="sidebar">
<div class="sidebar-wrapper">
<div id="sidebar-content">and so on.
8) Footer -
<footer></footer>
and
<div class='footer-outer'>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!!
~iTechColumn
