SupportiveHands, Helping Bloggers: Beautiful CSS Sticky/Floating Footer Bar for Blogger Blogs

Floating/Sticky Footer Bar for Your Blogger Blog

A sticky or floating bar at your Blogger blog will give it both a decent look and enhanced functionality. Where the links are always remain visible at the footer and provide a fast and easy navigation for your visitors, the social profile links help you expand your social circle also. I have brought a beautiful floating footer bar for your Blogger blog which remains sticky at footer and always keeps displaying your defined links for your blog pages, posts and social profiles. This bar is very easy to add and customize and you can customize it the way you like to make it best resembling with your blog template. Below is the procedure to add this sticky bar to your Blogger blog.

1. Login to your Blogger dashboard, scroll down to Template and download a backup of it

2. Now edit its HTML and find ]]></b:skin> by pressing Ctrl+F and paste the below code just above it

#stickey_footer { /* This will add a sticky footer to your Blogger blog */

background: none repeat scroll 0 0 #7C0625;

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://lh3.googleusercontent.com/-Jcb9oSTk_0U/UREeUBHdhyI/AAAAAAAAC2g/plVW5sD_i6Q/h120/homenew.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://lh3.googleusercontent.com/-2kh6nK3BBiA/UREeTwSivhI/AAAAAAAAC2c/5jEU6dS-utk/h120/home_hover.png") 13px 5px no-repeat;

}

#footer_menu li a {

display: block;

color: #cccccc;

weight: bold;

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 */

}

4. Customize the values in CSS according to your desire. These customizations are optional. If you leave it as it is, then the bar will be styled on your blog as it is shown in demo. If you are willing to customize the appearance of the bar, modify the most common features by modifying highlighted values keeping the below rules in your mind:

#7C0625; is the color code for background of your bar.

Arial, Helvetica, sans-serif; defines the font style for text in links.

960px defines the width of your footer bar

#ffffff; defines the color the bar when it turns into on hovering the mouse pointer.

Generate Hex Code of Your Favorite Color

There are much more customizations but these are the most basic which defines the appearance of your sticky bar.

5.Now save your template and go to your blog’s layout and add a gadget anywhere by selecting HTML/Java Script and paste the below code in it

<div align="center" id="stickey_footer">

<!– begin footer menu –>

<ul id="footer_menu">
<li><a href='Your Home Page URL'><img src='https://lh4.googleusercontent.com/-kcihCADdgGY/UREJRPvmkGI/AAAAAAAAC0g/ZMCj2c4hHSA/s128/home.png' alt=""/></a></li>

<li><a href="#">Link Label</a></li>

<li><a href="#">Link Label</a></li>

<li><a href="#">Link Label</a></li>

<li><a href="#">Link Label</a></li>

<li><a href="#">Link Label</a></li>

</ul>

<ul id="social_icons">

<!–social icons –>

<li><a href="http://twitter.com/TwitterUserName" ><img src='https://lh5.googleusercontent.com/-nResr2lIVyA/UREeVDxzhCI/AAAAAAAAC2s/UWWxEnU_reQ/h120/twitter.png' alt="" />Twitter</a></li>

<li><a href="http://digg.com/DiggUserName" ><img src='http://3.bp.blogspot.com/-s8zEJZ_OcnQ/T9rfIcRCDcI/AAAAAAAAFZ8/I34iNs4r-HU/s1600/digg.png' alt="" />Digg</a></li>

<li><a href="https://plus.google.com/GooglePlusUserName"><img src='https://lh6.googleusercontent.com/-sCUPl7F89So/UREL42sRFxI/AAAAAAAAC1A/Inw683fCKs8/h120/google-plus.png' alt="" />Flickr</a></li>

<li><a href="http://facebook.com/FBUserName" ><img src='https://lh3.googleusercontent.com/-qr8L5IEyL3Q/UREeTBv5gmI/AAAAAAAAC2U/PrUonHcTXU4/h120/facebook.png' alt="" />Facebook</a></li>

</!–social></ul>

</!–></div>

Add your custom links in the code by replacing the highlighted values and save your gadget. Your all done!For further customizations, if you don't need link to any social profile, simple remove its link starting from <li> and ending at </li>. For example if you want to remove the link and icon for Digg, remove it by removing its link which is <li><a href="http://digg.com/DiggUserName" ><img src='http://3.bp.blogspot.com/-s8zEJZ_OcnQ/T9rfIcRCDcI/AAAAAAAAFZ8/I34iNs4r-HU/s1600/digg.png' alt="" />Digg</a></li>

Need any further help? Comment below to ask.

VIEW LIVE DEMO