Blogger 4 coloumn Footer ~ myTechpartner Join Me On Facebook
Join Me On Facebook

Blogroll

Thursday 9 May 2013

Blogger 4 coloumn Footer

 

Html code for four column footer

image

Step 1: Go to your blogger dash board select –->  Template ---> Edit Html

              press ctrl+f  then search box will appear

Step 2: On the search box type  ]]></b:skin>

           After finding code  copy the below code and paste above to it

#footer-wrapper {clear: both;width: 100%; height:4px; background: #CF4227;}
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
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;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Step 3: again search the </body>

Step 4: After finding code  copy the below code and paste above to it

<div id='footer-wrapper'>
<div style='clear:both;'/>
       </div>
<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

Step 5: Save your templates And open Layout add your page elements

3 comments:

  1. I'm impressed, I have to admit. Seldom do I encounter a blog that's equally educative and interesting, and without a doubt,
    you have hit the nail on the head. The issue is something that too few folks are speaking intelligently about.
    I'm very happy that I found this in my search for something regarding this.

    Look at my web-site Solde Air Max

    ReplyDelete
  2. It's an amazing paragraph designed for all the online users; they will get benefit from it I am sure.

    Feel free to visit my webpage ... Solde Air Jordan

    ReplyDelete
  3. Thank you guys for your valuable review

    ReplyDelete

 

Contributors

Online Marketing

Do you Like this Article?

rss twitter facebook