31 May, 2012

Add Three Column Footer Widget in Blogger


Some Professional blogger blogs has three column footer which is looks like awesome and keep busy to users and the end of your blog. today i am going to write about how to add three column footer widget in your blogger blog to show three gadgets in your blogger blog's footer.To add three column footer widget in blogger just follow these simple steps. 




  • First You Should Take Backup of Your Blogger Template.
  • Now Log in to your Bogger Account.
  • In Your Dashboard Navigate to Template>>
  • Click on Edit HTML>> Button and Proceed>>
  • Now Find This code in HTML ]]></b:skin>
  • Paste the following CSS code just above ]]></b:skin> 

#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}

  • Now Find  </body> and paste following code just above </body>

<div id=’lower’>
<div id=’lower-wrapper’>
<div id=’lowerbar-wrapper’>
<b:section class=’lowerbar’ id=’lowerbar1′ preferred=’yes’>
</b:section>
</div>
<div id=’lowerbar-wrapper’>
<b:section class=’lowerbar’ id=’lowerbar2′ preferred=’yes’>
</b:section>
</div>
<div id=’lowerbar-wrapper’>
<b:section class=’lowerbar’ id=’lowerbar3′ preferred=’yes’>
</b:section>
</div>
<div style=’clear: both;’/>
</div> </div>


  • Save your template.  
  • Now visit the page Layout >> Start adding Widgets and Enjoy!

You Can Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget.
  • background:#333434; Changing the six digit colour code will change the background colour of this widget.
  • width: 960px; This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
  • background:#fff; and width: 32%; is the background colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour of Title Headings
  • font: bold 14px Arial, Tahoma, Verdana; Edit this to change the font size and family.
  • border-bottom:3px solid #0084ce; Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading

Muhammad Shoaib have a good experience in the field of Blogging since decade. If you are a new blogger who just starts your blogging career then www.shoaibonline.com is the perfect place to learn about blogging.

1 comments so far

nice post and nice explanation what if i want a three column footer with customize background color and widget section in simple template blogger


EmoticonEmoticon