Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
In past i posted a post about 3 column footer widget which was cool but this time this footer is a simple and a basic one but still it looks real good. So without wasting any time just move on to tutorial :
Installing :
- Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :
- Just above ]]></b:skin> paste following css :
/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com ----- */
#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5); background:#fff; margin:10px auto 0; padding:5px 0px 0px 0px; width:1000px; border:1px solid #dbe1e6;}
#lowerbar-wrapper{ color:#333; float:left; margin:0px auto auto; padding-bottom:20px; width:332px; text-align:justify; font-size:100%; line-height:1.6em; word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.lowerbar{margin:0; padding:0;}
.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px;}
.lowerbar .widget-content{padding:5px 5px 5px 15px;}
.lowerbar h2{background: none repeat scroll 0 0 rgb(79, 165, 241);color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase;}
.main .Blog{border-bottom-width:0;}
.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none;}
.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMO8j_wKkuvv9kD_ZsLIWYjHi5hXQ4IXGw9P39OF7Gh2_ZZ-cjC6NY3kzj0_QFchk2-j72vqcdWP0Q45VtE3ysOio5GyssWD21FyGi96vem1gw-twgT1HU2a0_1Lm52B235A3D9_MdB6xF/s1600/bullet-point-image-1.png) no-repeat left;}
.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none;}
.lowerbar a:hover{color:#A61111; text-decoration:none;}
.lowerbar a:visited{color:green; text-decoration:none;}
/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com ----- */
- Now search for </body> and just above it paste following code :
<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 it and we're done...leave your responses in the comment section below...
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
