-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

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.

Back to top Ala Tribunnews

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>
<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....

Previous
Next Post »

3 komentar

Anak Nelayan delete May 2, 2015 at 4:07 PM

jadi tahu cara bikin tombol back to top ini, punya saya tinggal makai saja, sudah ada dari bawaan template nya

Heri Assidiqi delete May 2, 2015 at 9:48 PM

Keren nih... jadi pengen ganti :)

Aris S. Tingang delete March 23, 2016 at 5:54 PM

mantaappp

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *