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
  • Email

Related

April 4, 2009 Ritesh Sanap Blogger Tutorials Blogger Hacks

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

  • Windows Vista CD key
  • How to download Specific parts of YouTube videos
  • How to Increase Dropbox upload speed
  • HORIZONTAL AND VERTICAL SPACING
  • How to download torrents without utorrent
  • How To Change Windows XP Shutdown Dialog Box
  • How to Change the Welcome/Login Screen in Windows XP ?
  • h4x0r ( Hacker ) - Blogger Template
  • Random Post Widget for Blogger
  • Hacking DSL Router

Random Posts

From Netbook to Jetbook- Make your notebook super fast

March 14, 2009 By Ritesh Sanap 5 Comments

h4x0r ( Hacker ) – Blogger Template

August 10, 2010 By Ritesh Sanap 6 Comments

How to Load Web Page Faster using Prefetch and Prerender

November 26, 2012 By Ritesh Sanap Leave a Comment

Who else wants to Calculate online Using Google Search !

July 19, 2008 By Ritesh Sanap Leave a Comment

Google chrome Final :Evolving from beta to stable

May 25, 2010 By Ritesh Sanap Leave a 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

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

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.