Cara Memasang Tombol Scroll Back To Top Dengan Efek Jquery Smooth di Blog

Pada artikel kali ini kita akan memodifikasi kembali tombol back to top di blogger. Back to top kali ini sangatlah berbeda dengan back to top yang sudah ada , karena back to top ini hanya akan terlihat di blog anda jika suatu halaman telah bergulir dan jika di klik maka gulungan halaman akan perlahan-lahan ke atas . Untuk penggunaan back to top di blog anda , tidak perlu takut akan beban dari jquerynya , karena sebelum nya telah di sprite untuk menjaga beban halaman.

• Langkah Mudah memasang back to top di blog

1. Masuk pada blogger anda lalu pergi ke design > edit html  , untuk menghindari sesuatu yang tidak diinginkan di template anda , anda bisa men back up templae anda dengan cara menekan download full template.



2. Pada menu edit html , cari lah kode ]]></b:skin> . ( Gunakan F3 untuk mempermudahkan pencarian )

3. Setelah menemukan kode diatas  , kini anda bisa copy paste kode dibawah ini dan letakkan tepat di atas / sebelum kode ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2IE0c4SAQ-JICwfGgO9Z8idCSbO421KPJbScOEfVmtdLr94Dn6d9wdToFPRmew0z1yor13hsZV58rLaKFQ9pScbw1bgrTcCnoDz-jwcL332vqMx_6ZFp8N1cDVSUFOpZ1a6hPRtGW7w/s800/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2IE0c4SAQ-JICwfGgO9Z8idCSbO421KPJbScOEfVmtdLr94Dn6d9wdToFPRmew0z1yor13hsZV58rLaKFQ9pScbw1bgrTcCnoDz-jwcL332vqMx_6ZFp8N1cDVSUFOpZ1a6hPRtGW7w/s800/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;

Note: Bila anda ingin mengganti tombol to top nya berada di sebelah kiri maka ganti tulisan right yang berwarna merah dengan left.

4. Setelah itu cari lagi kode </head> lalu copy paste kode dibawah ini dan letakkan sebelum kode </head>.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/sed.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Kemudian save template dan selesai .

Kini blog anda sudah mempunyai back to top efek smooth , nah mungkin sampai begini dulu artikel saya ini.
Semoga bermafa'at Amiin...
Sumber : Tombol Scroll Back To Top Dengan Efek Jquery Smooth