Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

Tweet

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini saya akan memberikan kepada Anda sebuat tab menu scroll back to top dan profiles social yang bisa Anda gunakan untuk blog blogger Anda.

DEMO

Langkah Buat Tab Menu Scroll Back To Top dan Profiles Social :

1. Buka akun Blogger Anda
2. Masuk ke menu dit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan CSS berikut ini, diatas pada kode diatas :

#fixed-bar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 38px;
    clear: both;
    margin: 0;
    padding-bottom: 4px;
    background-color: #333;
    overflow: hidden;
}

#fixed-bar a {
    float: right;
    margin: 0;
    padding: 0;
    background-color: #333;
}

#fixed-bar a.first {
    float: left;
    margin-top: -1px;
}

.bottom-wrapper {
    max-width: 92%;
    width: 960px;
    margin: 0 auto;
}

    5.  Lalu cari kode dibawah ini :

</body>

    6.  Pastekan kode dibawah ini, diatas pada kode diatas :

<div id='fixed-bar'>
<div class='bottom-wrapper'>
<a class='go-top first' href='#page-header'><img alt='go top' src='http://3.bp.blogspot.com/-cBnkdgGehf4/TzyKY265xwI/AAAAAAAACfQ/ZZvzUQrG7m4/s1600/up_3038.png'/></a>
<a href='https://plus.google.com/111920657633787249674' target='_blank' title='see on google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-BOc1ZCoB-Jw/TzyKYBnrVyI/AAAAAAAACe4/QgKgsc7um4c/s1600/gplus_3838.png'/></a>
<a href='http://www.facebook.com/sharer.php?' target='_blank' title='share with friends'><img alt='facebook' src='http://4.bp.blogspot.com/-lDVnV-OnEv4/TzyLhYc4yPI/AAAAAAAACfc/I7_buv1xxEM/s1600/facebook_3838.png'/></a>
<a href='http://twitter.com/54Blogger' target='_blank' title='follow me'><img alt='twitter' src='http://1.bp.blogspot.com/-mtVDHUkGUJs/TzyKYrJkNbI/AAAAAAAACfI/zXM9SKO2BFU/s1600/twitter_3838.png'/></a>
<a href='/feeds/posts/default' title='get updates'><img alt='rss' src='http://1.bp.blogspot.com/-l4C-DinWEr4/TzyKX4M7TvI/AAAAAAAACes/YDtzN-oPjYs/s1600/rss_3838.png'/></a>
</div>
</div>
<script>$('#fixed-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#fixed-bar').slideDown(200)}else{$('#fixed-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>

     7.  Save template Anda.