Cara Buat Tombol Back To Top di Blogger

Back To Top

XDTPD Blogs | Hallo sahabat blogger berjumpa lagi di artikel terbaru ini, kali ini saya akan membagi sebuah cara ataupun tutorial tentang bagaimana cara but tombol back to top di blogger dengan menggunakan Javascript dan jQuery. Pasti sudah taukan apa itu tombol back to top ?

Back To Top adalah sebuah tombol yang akan muncul saat pembaca telah membaca artikel yang sangat panjang sehinnga melebihi batas layar di laptop maupun komputer sobat. Dengan adanya tombol back to top ini, pembaca blog kita akan lebih mudah untuk menscroll kembali keatas hanya dengan sekali klik pada tombol back to top tersebut. Biasanya banyak para blogger ataupun pembuat template yang sudah menggunaka tombol back to top ini pada blog maupun template yang mereka buat.

#CARA BUAT TOMBOL BACK TO TOP DI BLOGGER

Adapun caranya akan saya jelaskan dibawah ini. Sebelum saya ingin memberitahukan kepada sobat blogger semuanya bahwa disini kita akan membuat dua versi tombol back to top dengan menggunakan Javascript dan jQuery dan sedikit design dengan menggunakan CSS. Baiklah, silahkan ikuti lang-langkah yang ada dibawah ini dengan sesama.

1. Tombol Back To Top Bounce ( Efek Memantul)

Silahkan masuk terlebih dahulu ke Dashboard Blogger sobat dan klik pada menu Template dan pilih Edit HTML. Kemudian cari kode </head> dan masukkan kode dibawah ini tepat diatas kode </head> tersebut.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Kode diatas adalah kode Framework jQuery, jika pada template yang sobat pakai sudah terdapat kode tersebut maka silahkan lewati saja langkah tersebut.

Selajutnya, silahkan masuk ke menu Tata Letak kemudian pilh tambahkan widget pilih HTML/Javasript dan masukkan kode dibawah ini.

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3h-rpzMj3tbhOJLwYj5w3j4tMAF2RHpRnrhDneRBnM0851a7YPg7zAyBE7soYmuNNVvF8-yLgLSedALLq4gWvsqPKZ8WQQmUEKj4taTQnZY3Ww3erzO1-hqcggCifNXJpj8vqvS1sNfS7/s1600/arrow-up_basic_blue.png'/></div> 

Langkah berikutnya, masukkan juga Javascript dibawah ini juga tepat diatas kode </head> pada HTML templae sobat.

<script type='text/javascript'>
$(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>

2. Cara Buat Tombol Back to Top dengan Efek Geser yang Halus

Pertama, silahkan masukkan kode yang ada dibawah ini tepat diatas kode </head> pada HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Masih dibagian kode </head> Silahkan masukkan juga kode dibawah ini juga tepat diatas kode </head> tersebut.

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

Selanjutnya simpan template sobat dan pergi menu Tata Letak, kemudian pilih tambahkan widget dan pilih HTML/Javascript.

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3h-rpzMj3tbhOJLwYj5w3j4tMAF2RHpRnrhDneRBnM0851a7YPg7zAyBE7soYmuNNVvF8-yLgLSedALLq4gWvsqPKZ8WQQmUEKj4taTQnZY3Ww3erzO1-hqcggCifNXJpj8vqvS1sNfS7/s1600/arrow-up_basic_blue.png'/></div>

Simpan template sobat dan selesai.

Itulah langkah-langkah untuk membuat tombol back to top diblogger dengan dua versi. Jika ada pertanyaan silahkan tanyakan pada kolom komentar dibawah. Dan jangan lupa untuk berkunjung kembali karena XDTPD Blogs akan selalu mengupdate artikel menarik lainnya setiap saat yang patut sobat ikuti.