Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger - SharingWithMee Blog | Hai sobat blogger, tutorial kali ini saya akan memberikan kepada Anda sebuat tab menu scroll back to top dan profiles Social Bokmark yang bisa Anda gunakan untuk blog blogger Anda.
| Demo Link |
Langkah :
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.
Posting Komentar