Blogger Template Design

{ 54 comments }

Hope you know that 9lessons blog is power by google blogger platform and I am not paying any hosting changers from last 4 years. I strongly suggest blogger is the perfect platform for blogging (present your ideas), but you have to do few coding changes for better results. My first success was I did customized blogger template completely, so take a look at this post and implement for great results.

Go to your blog left menu open Template -> Edit HTML

IF ELSE Condition
If you notice I am displaying a top banner(Wall Script) advertisement on Article Pages. You want to display specific items on Article Page, use the following condition.

<b:if cond='data:blog.pageType == "item"'>
// Display content on Article Page
<b:else/>
// Display content on Home Page
</b:if>

If you want to display any specific thing on Home page, use following code.

<b:if cond='data:blog.pageType != "item"'>
// Display content on Home Page
</b:if>

Sections
You can add different sections with unique ID attribute name on sidebar part.

<b:section id='RecentPosts'>

</b:section>

<b:section id='MostPopularPosts'>

</b:section>

<b:section id='BuySellAds'>

</b:section>

You can find out those sections in Layouts part.

Blogger Template Design.

While clicking on Add a Gadget you will find a popup contains following widgets and then add widgets to sections part.

Blogger Template Design.

SEO - Search Engine Optimization
For better search results you need to modify <title> part with following code snippet. This code helps to include article title as a page title.

<b:if cond='data:blog.pageType != "item"'>
<title>Website Title</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Expand id="post" part.

Blogger Template Design.

Article Title
Replace data:post.title part with following code.

<b:if cond='data:blog.pageType != "item"'>
<h2>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<b:else/>
<h1>
<data:post.title/>
</h1>
</b:if>

Adsense inside Blog Post
Blogger is allowing maximum three adsense advertisements inside article part, use the following code about the <data:post.body/> part. Go to Layout part click Blog Post edit and modify your ads.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<div>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>

<data:post.body/>

Social Buttons
Generate social buttons code using specific develop tools and prefix expr: for hyper links.

// Linkedin Share Button
<script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
// Google Plus Share Button
<div class='g-plus' data-action='share' data-annotation='bubble' expr:data-href='data:post.url'/>
// Twitter Button
<a class='twitter-share-button' data-count='horizontal' data-via='TwitterUsername' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/>
// Facebook Button
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:60px; height:70px'/>

Javascript Support files
Include following support JS files within the tag HEAD or about the </BODY> end tag.

// Linkedin
<script src='http://platform.linkedin.com/in.js' />
// Google Plus
<script src='http://apis.google.com/js/plusone.js' />
// Twiiter
<script src='http://platform.twitter.com/widgets.js'/>
// Facebook
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

Remove Default Header
Just include the following code in CSS to hide default blogger navbar.

#navbar {
display: none;
height: 0;
visibility: hidden;
}

Custom domain setup please check Technology behind 9lessons.info

If you have any queries related to blogger, please comment here.