Cara membuat tombol scroll "To Top"

Tombol "To Top" berfungsi untuk mengembalikan posisi halaman dari bawah sampai keatas sehingga bagian header web atau blog tampak seperti semula ketika kita baru membuka web atau blog tersebut.
Lebih jelasnya pada saat kita membaca artikel dan artikel tersebut panjang, sampai - sampai kadag kita ndak sadar sudah sampai jauh dibawah. Biasanya pengunjung yang sudah lelah membaca, juga males main scroll pada mousenya. Anda bisa lihat pada blog ini tombol "to top" ada disebelah kanan bawah.
Nah tombol ini bisa dimanfaatkan oleh pengunjung untuk mengembalikan halaman pada posisi semula.
Bila anda berminat silahkan anda ikuti langkah -langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :

]]></b:skin>

6. Sisipkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>  

/* to top */<br /> #toTop<br /> {<br /> width:60px;<br /> border-style:solid;<br /> border-color:rgb(225, 225, 225);<br /> text-align: center;padding:5px;position:fixed;bottom:10px;right:10px;<br /> cursor:pointer;color:#666;text-decoration:none;<br /> background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);<br /> background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));<br /> }<br />

7. Lalu cari kode lagi yang sama atau mirip dengan kode berikut :

</body>

8. Sisipkan kode dibawah ini sebelum atau diatas kode </body>

<a href="#" id="toTop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJsYQ76GdqLcrEseIC7-JkXlvEmFh_MMuSLFASq4yOkIcjuI3WOKbTgjAOFVBVm8tjH2ZulDZh2IUyw4pKMTVykgCr7TnIi8gNEGD-ZfPyHoZI3l3OTMK1G4T_xfo2tsvB3c5YsPvYjINC/s104/back+to+top.jpg" width="50" height="40" /></a><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script><br />

Catatan : Javascript diatas terselip informasi penciptanya, jadi anda tidak perlu menghapus dan biarkan saja. OK...

9. Simpan Template dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat tombol scroll "To Top"; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts