Cara membuat tombol crrol 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 "Back to top" ada disebelah kiri 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. 

5. Cari kode yang sama atau mirip dengan kode berikut :

]]></b:skin>

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

<br /> /* 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>

<br /> <a href="#" id="toTop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjoDbucik0yA-qvwDONWIgjyQczI883qHdX20LVwYvCG-iLrqp375GJFZyxCGargB26ALjJlL6VKJhdzvlmLCfmygeyI766qKNukM9T7w8xodGxPve6tItJUdvZvx364emATueD_AJu14/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.... 

Share this post: