Home » Blogger Tutorials, Tricks and Hacks » CSS Sticky Footer Widget For Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

CSS Sticky Footer Widget For Blogger

CSS Sticky Footer Widget For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,362 views

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.

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Keputihan says:

    thank you for sharing the article

  2. Thank You So Much For Posting My Widget On Your Blog

  3. sarwan says:

    brilliant one….thanks 4 sharing……i’m using this for my website

  4. Andrew says:

    if I keep using the footer tabs it keeps adding a “/p” to the page so it does not reference correctly after the first use. Is there a way to modify this to make it work? Thanks

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here