Tab Menu Fixed Keren Di Bagian Bawah atau Footer Blog

Example Code

<div id='menu_footer'> <ul id='footer_menu'>
<!-- Begin Footer Menu --> <li class='imgmenu'>
<a href='#'><span>Home</span></a></li>
 <!-- This Item is an Image, the "span" is hidden via CSS -->
 <li><a href='#'>Services</a></li> <li>
<a href='#'>Portfolio</a></li> <li>
<a href='#'>Friends</a></li> <li>
<a href='#'>Blog</a></li> <li>
<a href='#'>Testimonials</a></li> <li>
<a href='#'>Contact</a></li> </ul>
 <!-- End Social Icons --> <ul id='social_icons'>
 <!-- Social Icons -->
 <!-- The span is the text appearing on hover, use the tooltip class in the link --> <li>
<a href='#'><img alt='' src='http://2.bp.blogspot.com/-NygdyapXfJA/T3gG1lJB1-I/AAAAAAAAAFY/UwPnES_pLAg/s1600/twitter.png'/><span>Twitter</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.png'/><span>Digg</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-E2Xy1Mvv0/s1600/flickr.png'/><span>Flickr</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook.png'/><span>Facebook</span></a></li>
 </ul>
 </div>

<style>
#menu_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 */
#menu_footer {
     -moz-border-radius: 10px 10px 0px 0px;
     -webkit-border-radius: 10px 10px 0px 0px;
     border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#smenu_footer:hover {
     background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#menu_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://4.bp.blogspot.com/-3mNzW5lhuNc/T3gGyxQm9zI/AAAAAAAAAFI/a1Mugnbpnsw/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://3.bp.blogspot.com/-2fJv567iCbo/T3gGz_ytb8I/AAAAAAAAAFQ/pWL3htZzogw/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;
}
#menu_footer #social_icons {
     float:right; /* social icons positions */
     width:auto;
     margin:5px 15px 0px;
     padding:0px;
     overflow:hidden;
}
#menu_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 */
}
#social_nav_horizontal {
     margin-left: 100px;
     font-family: Futura, Verdana, Sans-Serif;
     font-size: 18px;
     color: #8E9090;
     height: 100px;
}
#social_nav_horizontal h3 {
     display: inline;
     padding: 0 10px;
     border-bottom: dashed 1px #ccc;
}
#social_nav_horizontal ul {
     margin: 0;
     padding: 0;
     margin-top: 20px;
}
#social_nav_horizontal ul li {
     float: left;
     padding: 5px 0 0 5px;
     margin-left: 5px;
     list-style-type: none;
}
#social_nav_horizontal ul li a {
     padding: 4px 0 0 28px;
     height: 32px;
     color: #999;
     text-decoration: none;
     line-height: 1.45em;
}
#social_nav_horizontal ul li a:hover {
     color: #6DCAFF;
     text-decoration: underline;
}
.delicious {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ATWItrwBe_6u-KxR6iXcgbXihAxm3EUe12PJlVA7rCOkb76b21PFG0HMFAXXjlh838G-B3bxseQ5p_DCjXdtnMfe2puSvnZrZYfmEXsszbrR8hFT0_YuOotXbeKzW8qyff-7k6UmR7s/s1600/delicious.png)no-repeat;
     background-position: 0 -1px;
}
.facebook {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdeG8hgZCWhQJLbA9ZzIBzbRhxyt16nPncZKinHwxDtQUODf0IjucVBZaXMJX27B1OVeTqBctLwG57sviEo9R8gFiDgEwVAJ2tIbmK5Gk6lX95qLUqBGSPYxUV7V1p695aWLERowx9hFU/s1600/facebook.png)no-repeat;
     background-position: 0 -1px;
}
.stumbleupon {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cJAY8gtapzIryeXhLa5Rfjiwm51CHUuOx7jT7rgQZ85dm838wQCmmVHC7XsEaf0UWpBRyQcZD2onqEi2ykyY69xLzvH32gkOQrGLVZ_cVSVFOXPRWbKcCZBsojbnh9ozLI60q9ii7zs/s1600/stumbleupon.png)no-repeat;
     background-position: 0 -1px;
}
.twitter {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVGulFE5ZSwm-rKEybhNevy5MixAPuLvH04hhjCaP4XREmPrl3v7izU4NF76aKV4BpySMufjSWZ_aYAV2OlmqK3yUvekbT4mmOXCaemO__214v5XrxRF_bl6e5UvRnBn-AvFO0uIj2U8/s1600/twitter.png)no-repeat;
     background-position: 0 -1px;
}
</style>