Cara Membuat Tombol "To Top"

Tombol "To Top" berfungsi untuk mengembalikan halaman dari bawah/dasar sampai ke header/atas dengan cepat tanpa harus menunggu lama. Bahkan hanya 1 klik saja sudah sampai ke header. Jadi, buat para blogger yg bosan menggunakan scroll yg ada di mouseny, bisa mempraktekkan langkah ini di blognya masing''. Langsung saja ya :


1. Login dulu ke Blogger
2. Pilih menu Rancanan
3. Lalu "Edit HTML"

 

 4. Back-up Template untuk mennjaga agar Tampilan Blog tidak berantakan apabila terjadi kesalahan.
5. Cari kode yg sama/mirip dengan kode ini ]]></b:skin>

6. Sisipkan kode di bawah ini "Sebelum/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. Kemudian cari kode yg sama/mirip dengan kode ini </body>
8. Sisipkan kode berikut ini "Sebelum/Diatas" kode </body>

<a href="#" id="toTop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAX9umO9i_-bjz5VsXtt6biZI12IV0C1PXv2zbvGJ0teJPj7quZqbk8pxCyb6Frh1Mrd1HWIWmlGOvMM7ApK1_zC7f2-Pf6HhZhCLrlox8DyZuJHiTcCnWrDzFp6fWQsoDI0fCZy-AE1Jo/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 : Kode diatas sudah disisipkan informasi penciptanya, jd shbat g perlu menghapus itu dan biarkan saja begitu. OK

9. Simpan/Save Template

Good luck y sobat, semoga info ini membantu...