Membuat Back to Top jquery Pada Blog Membuat Back to Top jquery Pada Blog

Back to top merupakan salah satu widget yang berfungsi sebagai jalan pintas menuju kembali ke topik halaman/header blogger, dalam hal ini back to top sangat berperan penting ketika page sudah melebihi ambang batas/sudah terlalu panjang karena kebanyakan komentar.
Dalam postingan kali ini saya akan menyuguhkan tutorial tentang jQuery, memang jQuery bagus untuk dipraktekkan karena scriptnya yang tidak berat dan elegan

Nah untuk bentuk back to topnya sendiri preview gambarnya seperti ini

---

Back to Top

---

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya...

#toTop {
display:none;
text-decoration:none;
position:fixed;
top:420px;
left:5px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTwVKPfi6PO-nYuttH2qAQjMwkGPEEwUYEa7jdkSD42p0rRaAhUb9o_3Ckd1ttr1Q_krUl3mH3Ph_8N2PNAHJRox_SjLRbywK-vvvVYmAl0S6GsfFii7ulg8k_3g5KWiqqjHb3voYhKcQ/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTwVKPfi6PO-nYuttH2qAQjMwkGPEEwUYEa7jdkSD42p0rRaAhUb9o_3Ckd1ttr1Q_krUl3mH3Ph_8N2PNAHJRox_SjLRbywK-vvvVYmAl0S6GsfFii7ulg8k_3g5KWiqqjHb3voYhKcQ/s1600/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;
}

Langkah 3
lalu letakkan kode jQuery berikut dibawah kode yang tadi..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>

Langkah 4
Klik Simpan Template

Semoga bermanfaat, selamat mencoba dan semoga berhasil.....