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

Create Four Column Footer Section Instead Of Three Column In Blogger Blog

As You All Know That blogger is allow only Three Column  Footer Section so i am coming with another hack  To Creat four column footer section so you can add many widgets

Steps You Need to Add 4 Column Section at the Bottom of the Blogger

Step 1. Login to your Blogger Dashboard

Step 2. Go to Layout >> Edit HTML , do not check the “expand widget templates” box. This will simplifies the process

Step 3. Back up your existing blogger template (Click on ‘Download Full Template’ to Back up)

Step 4. Now search these line of codes or similar ( footer-wrap, footer, footer-end etc… )

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

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

Step 5. Replace section code in red with below code

<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>
 
</b:section>
</div>
 
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>
 
<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>
 
<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
 
<div style='clear:both;'/>
</div>

<div id='footer-column-container'> <div id='footer1' style='width: 225px; float: left; margin:0; '> <b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'> <b:widget id='Text1' locked='false' title='About B-G' type='Text'/></b:section> </div><div id='footer2' style='width: 225px; float: left; margin:0; '> <b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'> <b:widget id='Text4' locked='false' title='About Author' type='Text'/> </b:section> </div><div id='footer3' style='width: 225px; float: right; margin:0; '> <b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'> <b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/> </b:section> </div><div id='footer4' style='width: 225px; float: right; margin:0; '> <b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'> <b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/> </b:section> </div><div style='clear:both;'/> </div>

Step 6. Now you need to add CSS for these section, add below CSS code right above ]]></b:skin>

#footer-column-container { border: .3px dotted #cccccc;}
 
.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
 
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
 
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
 
.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
 
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

#footer-column-container { border: .3px dotted #cccccc;}.footer-column { margin: 0 10px 0 10px; padding:5px; color: #666666; line-height: 1.5em; font-size:12px;}.footer-column h2 { padding-bottom:.15em; text-align:center; font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif"; color:#333333; line-height:1em; letter-spacing:.1em; border-bottom: 1px solid #cccccc;}.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}.footer-column ul li { background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat; margin:0 0 0; padding-left: 16px; padding-bottom: 0.5em; line-height:1.2em;}.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

Step 7. Preview and Save your template. Now you will have four column at footer section

KEEP VISITING

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

May 2, 2010 Ritesh Sanap Uncategorized Blog Design Series, Customization

Post navigation

Previous Previous post: [How to] show The Number of Feedburner Subscriber in Text
Next Next post: Hide or Show Label Count In Blogger

Currently Trending

  • Windows Vista CD key
  • How to download Specific parts of YouTube videos
  • HORIZONTAL AND VERTICAL SPACING
  • How to Increase Dropbox upload speed
  • Eleven Best free Photo/Pics Editors - Which To Choose ??
  • h4x0r ( Hacker ) - Blogger Template
  • A Great Magic Trick With Google - Fool your Friends
  • Cannot Open Google or Gmail in Google Chrome
  • A NotePad Trick - What happened on 9/11/2001 !
  • Free Online Angry Birds game

Random Posts

Buddha Flower – Blogger Template

July 18, 2010 By Ritesh Sanap 3 Comments

20 Google Secrets Of Google

December 28, 2007 By Ritesh Sanap Leave a Comment

Peek-A-Boo Widget for Blogger

March 5, 2009 By Ritesh Sanap 2 Comments

Embed Text Resizing Widget To Increase or Decrease The Font Size

March 19, 2009 By Ritesh Sanap Leave a Comment

Easiest way to make windows genuine

July 12, 2008 By Ritesh Sanap 2 Comments

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.