Cara Membuat Tombol Back To Top Ala Tribunnews

Iseng-iseng melihat berita-berita terbaru di Tribunnews, saya sangat tertarik dengan tombol back to topnya. Dan saya mencoba untuk mengambil kodenya, ntah ini ilegal atau bagaimana hihihi...

Tetapi bagi anda yang juga ingin memasang tombol kembali keatas seperti Tribunnews saya akan share bagaimana cara memasang kode itu diblogger.

Jika ada yang belum tahu bagaimana bentuk tombol back to top ditribunnews, seperti gambar diatas itulah bentuk tombolnya. Walaupun sederhana, tetapi itu menurut saya terasa sangat mewah dan minimalis. Ya udah! langsung saja kita menuju tutorial :

Demosion

1. Login www.blogger.com
2. Klik Judul blog anda
3. Pilih Template - Edit HTML
4. Jika sudah, silahkan anda letakkan css dibawah ini, tepat diatas kode </style> atau ]]></b:skin>

.ontop{display:none;}.ontop{position:fixed;bottom:50px;right:0px;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:0.6;filter:alpha(opacity=60)}.ontop span{background-image:url(http://2.bp.blogspot.com/-Jbm1DXWuKhw/VUQziQVUbUI/AAAAAAAAAKQ/XQ8qz3Fq8UM/s1600/ico.png);background-position:0px -272px; background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px}.ontop:hover{opacity:1;filter:alpha(opacity=100)}

5. Setelah itu cari lagi kode </body> dibawah sekali... masukkan kode dibawah ini, tepat diatas kode </body>

<div class="ontop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('.ontop').fadeIn()} else { $('.ontop').fadeOut();}});
$('.ontop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>

6. Simpan template, lihat hasilnya!

Bagaimana? sangat mudah sekali bukan cara membuat Button Back To Top Ala Tribunnews ini! nah, mungkin sampai disini saja tutorial saya kali ini, semoga bermanfaat....