Disini Surganya Ilmu Pengetahuan Tentang Komputer dan Blogging

Cara Membuat Tombol Ke Atas Seperti di Tibunnews

Pagi ini saya iseng iseng pengen liat berita bola di Tribun, di saat sedang asik membaca mata saya pun tiba tiba melirik ke arah kiri bawah. Eitsss bukan melirik iklan nya ya tapi tombol ke atas yang menurut saya enak di pandang dan juga keren+simple. Saya pun tertarik dengan tombol itu untuk saya pasang diblog, yang saya ingat blog ini belum ada tombol back to top nya.

Cara Membuat Tombol Ke Atas Seperti di Tibunnews

Setelah saya selesai membaca berita tadi, saya pun memutuskan untuk mencopy tombol tersebut. Setelah sukses terpasang di blog saya, saya pun akan membagikan nya, langsung saya ini tutorial nya.

1. Pergi ke www.blogger.com
2. Klik blog anda.
3. Lalu pilih template > edit HTML
4. Silahkan copy kan kode css di bawah ini, lalu paste kan di atas 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. Jika sudah copy kan lagi script di bawah ini dan paste kan diatas kode </body> yang terletak di bawah sekali.
<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. Lalu simpan template, dan lihat hasilnya.

Bagaiman mudah sekali bukan? hanya dengan mengcopy paste kode diatas, maka sudah jadi tombol nya. Jika masih ada yang bingung silahkan bertanya di komentar, Mohon maaf jika terdapat kesalahan, saya ucapkan terima kasih karena sudah berkunjung.
Next
« Prev Post
Previous
Next Post »

6 komentar

Nah, punya saya tombol keatas masih pake yg manual alias standar Gan, boleh nih saya coba yah, saya juga pengen punya tombol ke atas seperti tribunnews.. :)

Balas

hehe silahkan, terima kasih udah berkunjung.

Balas

keren gan, yg belum punya tombol back to top musti coba nih (y)

Balas

iya gan, terima kasih udah berkunjung

Balas

izin coba di blog gw gan :)

Balas

Apa pendapat mu tentang ini?
>Berkomentarlah dengan baik, sesuai topik, dan jangan nyepam..
>>Sorry kalau balas nya telat..