Sticky Footer Bar

Siang All
Kembali dengan tutorial , kali tentang Sticky Footer Bar . Ini kalau diantara sobat sudah sedikit bosan dengan kaki sobat eh maksudnya footer blog sobat yang itu-itu mulu hehe , aku punya pilihan buat sobat  . Untuk lebih jelasnya sobat lihat saja Screenchot nya :




Bila sobat berminat untuk memasangnya di blog sobat ikuti dengan seksama cara memasangnya *

Seperti biasa sobat masuk Edit Template cari kode ]]></b:skin>
Masukan kode dibawah ini tepat diatas kode ]]></b:skin>


/*  MBL Floating Sticky Footer Bar For Blogger (www.mybloggerlab.com) */
#MBL-footer-bar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 38px;
    clear: both;
    margin: 0;
    padding-bottom: 4px;
    background-color: #333;
    overflow: hidden;
}
#MBL-footer-bar a {
    float: right;
    margin: 0;
    padding: 0;
    background-color: #333;
}
#MBL-footer-bar a.first {
    float: left;
    margin-top: -1px;
}
.MBL-footer-wrapper {
    max-width: 92%;
    width: 960px;
    margin: 0 auto;
}
 .MBL-footer-wrapper {
        width: 100%;
        padding: 10 10%;
    }
 
@media only screen and (max-width : 649px),
only screen and (min-device-width : 320px) and (max-device-width : 685px) {

#MBL-footer-bar {
        position: static;
    }
.MBL-footer-wrapper {
        width: 90%;
        padding: 0 5%;
    }}

#tips, #tips li{margin:0; padding:8px; list-style:none; }
#tips{width: 100%; font-size:22px; line-height:120%; font-family: Arial, Helvetica, sans-serif; vertical-align:middle; margin: -2px 0 0; opacity: 0.95; font-weight: bold; }
#tips li{padding: 0px 0; display:none; float:left;  }
#tips li a{color: #fff;  }
#tips li a:hover{text-decoration: none; }


Lalu cari kode </head>
Masukan kode dibawah ini tepat diatasnya


<script>$('#MBL-footer-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#MBL-footer-bar').slideDown(200)}else{$('#MBL-footer-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-20868082-3']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript'ga.async=true;ga.src=('https:'==document.location.protocol?'https:var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2' type='text/javascript'/>
<script src='https://mybloggerlab.googlecode.com/files/main.js' type='text/javascript'/>

Dan terakhir sobat cari kode <body>
Masukan kode dibawah ini tepat sebelum kode <body>


<header class='cf' id='page-header'/>
<div id='MBL-footer-bar'>
<div class='MBL-footer-wrapper'>
<a class='go-top first' href='#page-header'><img alt='Back To Top' src='http://2.bp.blogspot.com/-CXa-s3SMh2Y/UGWdSKLMsbI/AAAAAAAAFqo/G0i1AoJFQrM/s1600/UP.png'/></a>
<a href='https://plus.google.com/u/0/100445736313951798399' target='_blank' title='Follow On Google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-wckYk5NRFEQ/UGMljyhiGHI/AAAAAAAAFn4/_QElJGaFmxg/s1600/GooglePlus.png'/></a>
<a href='http://www.facebook.com/mybloggerlab' target='_blank' title='Follow On Facebook'><img alt='facebook' src='http://3.bp.blogspot.com/-jN3QU9VEUsg/UGMlQ6BAxwI/AAAAAAAAFnw/V3KogbsmPgA/s1600/FB.png'/></a>
<a href='http://twitter.com/RulyNakula212' target='_blank' title='Follow Us'><img alt='twitter' src='http://2.bp.blogspot.com/-_7cTtJ0pkDk/UGMl7bTfFBI/AAAAAAAAFoI/fHOi8iATOyg/s1600/Twitter.pngg'/></a>
<a href='http://feeds.feedburner.com/OriginallyBlogContest' title='Get Updates'><img alt='rss' src='http://4.bp.blogspot.com/-pufqSN0B4P4/UGMlu8hNUQI/AAAAAAAAFoA/GB1eeUh5jsY/s1600/RSS.png'/></a>

<div class='boxfloat'>
<ul id='tips'>
<li><a href='http://www.mybloggerlab.com'>OBC ready to tutorial</a></li>
<li><a href='http://www.blogger.com'>Blogger Sahring And Entertainment</a></li>
<li><a href='http://www.mybloggerlab.com'>This Is Third Item</a></li>
<li><a href='http://www.mybloggerlab.com'>This Is Forth Item</a></li>
</ul>
</div>
</div>
</div>


Ganti text yang diwarnai dengan ID Google+ , Facebook , Twitter , dan feedbuner sobat 
Terakhir simpan template dan lihat hasilnya . 

Artikel Menarik Lainnya :