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/AVvXsEjw_0hqRKWnTRHQkI12EMNpaWQD5NpB-irPbLQ87B5jQox_qemlbatvJ9G54y45Kn4iV1RevoZ_M2rzLIx0jhYKAuflBhQd3YlOKoIEC0ph04z8oOXiaJii7t9Z1Uweq2bl7h3oz8qkX48S/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.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat tombol scroll "To Top"" Diulas Oleh : Noercholis | Kamis, 21 April 2011 | 18.01 Description : Tombol "To Top" berfungsi untuk mengembalikan posisi halaman dari bawah sampai keatas sehingga bagian header web atau blog tampa... Label : css,gadget,HTML,JavaScript,Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 900+ Dari 9 000+ Pengunjung.
Sampai saat ini baru ada : 9 komentar >>> Silahkan tambahkan komentar Anda...