Blogger Template Design
Wall Script
Follow Me:
Tuesday, March 04, 2014

Blogger Template Design

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.

Blogger Template Design.


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 == &quot;item&quot;'>
// 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 != &quot;item&quot;'>
// 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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&quot;' 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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


49 comments:

  1. Woow awesome blogpost! I think the power of blogger is underestimated a lot, bit thuis really opened my eyes fort blogger!

    ReplyDelete
  2. Wonderful Tips :) I'm Little confused About 'data:post.title' How to Do This?

    ReplyDelete
  3. wonderful post sir!
    you are the role model for bloggers!

    ReplyDelete
  4. Great Post @Srinivas , Till now I used to think “To use blogger hosting would be really boring” but you changed my mind completely. A little research can even make a blogger hosted blog fantastic like yours :)

    ReplyDelete
  5. Any idea about how to achieve caching in blogger?

    ReplyDelete
  6. Is there a demo where can see the design/layout and how it looks ?

    ReplyDelete
  7. First of all thanks alot to have such awesome articles on this website... Hats off to you guys. I am a CSS designer, I am searching for custom wordpress template design tutorials step by step as we design in CSS.
    I hope you guys are really gonna help me out.

    ReplyDelete
  8. sir demo may be also there......

    ReplyDelete
  9. Srinivas sir,

    Is is possible to have details tutorials on wordpress template from the scratch...? step by step...

    If possible !

    ReplyDelete
  10. The awesome blogger template design tutorial ever

    ReplyDelete
  11. how can we skip .blogspot from google blog

    ReplyDelete
  12. I was just blown out after reading this post cos i have been paying since many years.

    ReplyDelete
  13. great writing, thank you!.Question, how to remove the blogger.com default header bar in the blog?

    ReplyDelete
  14. @Sreevasthsa Removing Default header updated in tutorial.

    ReplyDelete
  15. @Thalupula Sreenivas Blogger is providing custom domain setup, please check in settings.

    ReplyDelete
  16. Thanks for this amazing and helpful blogpost template tutorial!

    ReplyDelete
  17. Hey good one! why dint i think of it, display:none. Thank you agian! :)

    ReplyDelete
  18. If you dnt have a host , how did you manage to get sub domains like http://demos.9lessons.info/ please let us know
    Thanks

    ReplyDelete
  19. Nice- but, Adsense into post is not working! Please help!

    ReplyDelete
  20. Hey it's nice. It's something different from basic view of blogs and I like your blog theme. Thanks for sharing.

    ReplyDelete
  21. Hi, the SEO part is very useful. But confused what exactly I need to add, means keywords or title of the blog.

    ReplyDelete
  22. this tamplate working good but some problem create when upload only web template then only open in pc but do not open in mobile or ipod.....error apache 404 mobile/index.html do not find..................please help me

    ReplyDelete
  23. Can you please provide your "Template",
    your template is Ausum, it will be of great help

    ReplyDelete
  24. How to create Related posts widget ?

    ReplyDelete
  25. thanks for the tutorial...really helpful

    ReplyDelete
  26. Superb
    I want to get ad sense on my blogs so what to do ..?

    ReplyDelete
  27. Srinivas you are just awesome!! Thank you for this blogger tutorial..

    ReplyDelete
  28. Thanks Srinivas The Way Of Writing An Article Is Awesome And You Write Awesome About blogger template design Thanks

    ReplyDelete
  29. Thanks man..! very good info

    ReplyDelete
  30. To display Adsense using this code, you need to enable display ads in post from Dashboard>> earning tab.

    ReplyDelete
  31. Thanks for your tutorial, it's really useful :)

    ReplyDelete
  32. Nice To see such kind of blog it is useful for me

    ReplyDelete
  33. Can You Please Post About Making Sidebar ? Please

    ReplyDelete
  34. This comment has been removed by a blog administrator.

    ReplyDelete
  35. thanks bro, i will also start blogging in Blogspot platform. and use blogger default templates. so this post are so helpful me

    ReplyDelete
  36. thanks for sharing useful post, i like your tutorial :)

    ReplyDelete
  37. Bro thanks for this post.
    One things I would like to know, is blogger default template are seo friendly? please bro answer me

    ReplyDelete
  38. Hey bro,
    Thanks for awesome tutorial, will try it once definitely.
    Thank you :)

    ReplyDelete
  39. Wonderful and attractive collection of responsive blogger templates with uniqueness.

    Thankful for you.
    Samtaa Jain

    ReplyDelete

Make in India