Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Stick Footer gives our blog a cool professional touch because it's cool stylish and also in trend and today i'am gonna tell you how to add this professional touch on your blogger blog.....
- Go To Blogger > Template > Edit HTML
- Find </b:skin> and paste the code given below just above </b:skin>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 40px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed;
text-shadow: 1px 1px 1px #000000;
width: 960px;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
padding:5px 8px 3px 14px;
float:left;
background:url("“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRjfy6foHkiGY2VGZK5SHFzBG4OZTDZipmIN1tQCSzjOsvBo0La6RUSCbZAP8X0nwyyKg-hUqyL6U2FVPaIeYk2olqUTF3V-irw1vzTff-eVNT6X6rl-sJ1xYOsEHLvM4Gxda6QzmDC0/s1600/home.png") 13px 5px no-repeat;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNV_4OUHSvQ0__ZrO9hXpKkIBoMtssRc-4a8d-pLEDIIF3UkFpDfhsP05Pn2-h7QgcUOcSD7B1OFa00ZLl7roL6-NdexM3Saez9H46Y5xSDaY7uj_8AxgBbJRXFmWugI40WLoQq3SS9E/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}
- Save Your Template
- Not Go To Layout > Add A Gadget > HTML/JavaScript
- And paste the code given below:
<div id="stickey_footer">
<!– Begin Footer Menu –>
<ul id="footer_menu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#">Label</a>
<li><a href="#">Widgets</a>
<li><a href="#">Friends</a>
<li><a href="#">Blog</a>
<li><a href="#">Contact</a>
</ul>
<ul id="social_icons">
<!–Social Icons –>
<li><a href="http://twitter.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRqXg0YZgPy8l1OwMn7Cgcj8yBFLub7ZCyBDVTn4zXQFg0YwoNBzgeDTaHrApZhlKUkw_mYUAd0YHnQFC6ygPWHvYE3OFOw4ZMPrJB-_bpt5Pj8ywZZQ2wrveqMgDLihQAk-_RZO1124/s1600/twitter.png' alt="" /><span>Twitter</span></a></li>
<li><a href="http://digg.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioQDbhV06OkarooIkYgeCJX7lXIBficAF90RqalcthEo3zdH2OTL6x1s4AHVgEquzSHSFgSfYH5a9Z73p3URWfxd0vOBveeUDIlnwjxlTuyZGRtU88Cf2BVio6XjLoNDEBiUdzW0fFy4M/s1600/digg.png' alt="" /><span>Digg</span></a></li>
<li><a href="http://flickr.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0SHyOyXKyr02bPkKEtRPlq4PG8ONHfD-ehIehRMUztUssKcusaxOrahBimrjwfOcleI-JKo4h6FTxiQyQn5vQHtEBrLAd6JUGMBvKerCotEKJnVro4xywlhVrvNIlbKuwTQ4bBz1Rzs/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>
<li><a href="http://fb.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Dsn4U5h3JsIkRWH3mH7wckXup-akooAlVi4PJomTw78hcQ4wlNg-4zYz2W53Jhcm62A2NgUKKQHhyphenhyphenkiMrxIgY8g9ujSwbVuHVRSEFZa9taMK8_U77ia_5V5iDUW1sUuM583KqwYlNrk/s1600/facebook.png' alt="" /><span>Facebook</span></a></li>
</ul>
</div>
- Now replace username with your usernames.
That's It.....For any help/request or anything please comment and i'll contact you as soon as possible.....
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
