Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Add Three New Widgets At The Bottom or Header Of Blogger/Blogspot Blog

You would have seen many new modified blogger templates with additional 3 widgets at the bottom (footer) of the blog, and they are very useful for bloggers, as you can place widgets like Recent posts, Recent comments, Top posts and Top commentators etc in these widgets.
It is very important to add these widgets in a blog, as when readers finish reading the post, they may immediately leave the blog if no other interesting article is found. Moreover these widgets help new visitors to understand the blog’s main content.


So if these widgets are not present in your blog, then follow these steps to add them yourself :

First log in to Blogger.com
Go to Layout -> Click on Edit HTML tab

Now search (CTRL+F) for these code line:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>


REPLACE the entire red line in the above code, with this new code:

<div id=’footer-column-container’>
<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>


Now PREVIEW the template, and if no errors are displayed, then carry on:

Find this code:

]]></b:skin>

Then immediately BEFORE / ABOVE it, paste these lines:

#footer-column-container {
clear:both;
}


.footer-column {
padding: 10px;
}


Save the template, go to “Page Elements”, and add content to the three new widgets !

For Adding this Hack Below Header Use Just Find For :

<div id=’Header-wrapper’>
<b:section class=’header’ id=’header’/>
</div>

And Similarly Like How to add Footer Add It Header

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

April 4, 2009 Ritesh Sanap Blogger Tutorials Blogger Hacks

Comments

  1. Adrian says

    April 4, 2009 at 11:27 am

    Hey thanks for the reply; however, I nee th code for a 3 columns on the top of my page; below the hear.

    I have generated a code, though I consier it messy and need a cleaner version. Perhaps you could help me here.

    Reply
  2. Ritesh Sanap says

    April 4, 2009 at 11:31 am

    ya i can help you just follow tutorial Instead Of Footer Put It In Header.

    Reply
  3. ramandeep says

    May 1, 2011 at 3:10 pm

    hey nice trick…but widget is looking so bad…can style it ……also do u have tutorial for stylish categories in bottom of ur blog …this is the best thing in ur blog

    Reply
    • Ritesh Sanap says

      May 3, 2011 at 9:22 pm

      ramandeep ,
      sorry for keep you waiting but at last your request is been completed you can get the tutorial here : Thesis Style footer for blogger

      Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: A NotePad Trick – What happened on 9/11/2001 !
Next Next post: Explorer.exe Deleted Or Taskbar Deleted

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

6 Easy Ways to Optimize/Boost your PC Performance

July 23, 2008 By Ritesh Sanap Leave a Comment

Changing dos back ground colour

January 16, 2008 By Ritesh Sanap 2 Comments

Change Blog’s Font Type with Cufón

June 17, 2010 By Ritesh Sanap 2 Comments

Record a Screencast

March 28, 2009 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean