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 :
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>
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....
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 :
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>6. Simpan template, lihat hasilnya!
<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>
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....
jadi tahu cara bikin tombol back to top ini, punya saya tinggal makai saja, sudah ada dari bawaan template nya
ReplyDeleteKeren nih... jadi pengen ganti :)
ReplyDeletemantaappp
ReplyDelete