CSS Sticky Footer Widget For Blogger

Here’s a nice looking CSS sticky footer designed by Hardeep Asrani from widcraft that I think you might like putting in your Blogger blog. Aside from already having its own menu navigation, it also has four social button icons that you can link to your other social sites.
Like all, if not most, of the other tutorials we’ve featured here on Allblogtools, putting this nice sticky footer onto your Blogger blog’s design is quick and easy.

1. Login to your Blogger/Google account
2. On your Dashboard, head over to ‘Template’
3. Click on ‘Edit HTML’ and then choose ‘Proceed’
4. Look for </b:skin> inside your template’s code by pressing ‘Ctrl+F’
5. Paste the code below immediately above it

#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("“http://1.bp.blogspot.com/-

XLLTxGA_jqc/T9rcf8eKSiI/AAAAAAAAFZU/rMZVGE75Nug/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("http://4.bp.blogspot.com/-

E0_4VUI1muE/T9rchPsIuDI/AAAAAAAAFZc/sWD2KAI4d6U/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 */

 }

6. Save your template
7. Now head over to the ‘Layout’ page on your Dashboard
8. Click on an ‘Add a Gadget’ link
9. Select ‘HTML/JavaScript’ on the gadget list pop up window
10. Paste this code in the content box

<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='http://1.bp.blogspot.com/-

N86wA4c0ocE/T9rfG1Tav0I/AAAAAAAAFZ0/VPLB2zMpTgs/s1600/twitter.png' alt="" 

/><span>Twitter</span></a></li>

<li><a href="http://digg.com/username" ><img src='http://3.bp.blogspot.com/-

s8zEJZ_OcnQ/T9rfIcRCDcI/AAAAAAAAFZ8/I34iNs4r-HU/s1600/digg.png' alt="" 

/><span>Digg</span></a></li>

<li><a href="http://flickr.com/username" ><img src='http://1.bp.blogspot.com/-SUIS3JleQ6c/T9rfDektT-

I/AAAAAAAAFZs/YLqS72DjGAA/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>

<li><a href="http://fb.com/username" ><img src='http://4.bp.blogspot.com/-CykBbA-

jWuE/T9rel2HNPTI/AAAAAAAAFZk/7Cd_h50FH70/s1600/facebook.png' alt="" 

/><span>Facebook</span></a></li>

</ul>

 </div>

NOTE: Remember to replace username with that of your own.
11. Save the widget and preview your template
12. If you’re satisfied with the result then simply save your template.
And that’s it! Hope you enjoy using your new widget.