How to add three columns in blogger footer ! Style1 ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

How to add three columns in blogger footer ! Style1

Now add best hover effect three columns widget in your blogger blog footer this footer style sexy and great for your gadget , related links and many more so add this footer style widget in your blog now.

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template now.

* Find below giving code in your blog template now

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

* Now replace red line of above code with below giving 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;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<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 again find ]]</b:skin> by CTRL+F key

* Now copy below code and paste before ]]</b:skin>

#footer-column-container h2 {
margin: 15px 0px 15px 0px;
padding: 0px;
text-align: left;
color: #dddddd;
font-size: 18px;
font-family: Arial,Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight:bold;
text-transform: none;
}
#footer-column-container li {
text-decoration: none;
list-style-type: none;
line-height: 32px;
margin-left: 0 !important;
padding: 0px 0px 0px 5px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
}
#footer-column-container li:hover {
background-color:#222;
}
#footer-column-container ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0 10px 0 0;
padding: 0;
border-top: 1px solid #222;
border-bottom: 1px solid #444;
}
#footer-column-container{background-color:#333333;clear:both;color:#ffffff;font-size:14px;}
#footer-column-container a{color:#dddddd;font-size:14px;}
#footer-column-container a:hover{color:ffffff;font-size:14px}
#footer-column-container ul,#footer-column-container ul li{list-style:none}
.footer-column{padding:10px}

* NOw save your template you are done. if you any problem to adding this please comment i will solve ok.