How to add three columns in blogger footer ! Style1 0

| | ,

 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'/>


* 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 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 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 style='clear:both;'/>
<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'/>
<div style='clear:both;'/>

* 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;
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 {
#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 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}

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

StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to add three columns in blogger footer ! Style1 ~ Twitter FaceBook

0 Responses So Far:


Select Your Categories