Cara Membuat Tombol Back to Top di Blog

Belajar Blog - Pada Postingan pertama ini , saya akan memberikan sebuah Cara Membuat Tombol Back to Top di Blog, jika menurut anda bermanfaat , ikuti tutorial berikit ini :

1. Silahkan anda copypaste kode di bawah ini lalu taruh di atas kode skin ]]></b:skin> 

#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: &quot;&quot;; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}

Note: jika anda menggunakan template yang saya bagikan taruh kode tersebut di sekitar kode yang saya blog di bawah ini

Mulai dari kode <style type='text/css'> sampai kode penutup </style>

2. Setelah itu cari kode </body>

3. Lalu taruh kode di bawah ini di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(function () {

 $(window).scroll(function () {

  if ($(this).scrollTop() > 100) {

   $('#BounceToTop').slideDown(200);}

        else {

   $('#BounceToTop').slideUp(300);}

 });

 $('#BounceToTop').click(function () {

  $('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);

 });

});

//]]>

</script>

  <div id='BounceToTop'/>

Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!--</body>--&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya