Membuat Scroll To Top Button dengan kode jQuery dan OW generator

Pada posting ini saya akan menampilkan cara untuk membuat Scroll to Top Button dengan 2 cara :

Menggunakan kode jQuery

1. Login ke Blogger

Masuk ke "Rancangan - Edit HTML"

Cheklist "Expand Template Widget"

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/AVvXsEhMbakW3FN4ljTWJtxP2RrPv4u3Wj_ALF8y0B59e5dbOlCYsOpGKyL85FQsNjUDyIjnLnvfsC9lgxqSZ7ym6uys7z5ItgJHXDZYGR9j_OrXxFtqXCh2saFwH7B6hu9fThF3yFhYppVGjGrz/s400/Zoro+BTTop.png) no-repeat left top;

}

#toTopHover {

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;

}

Anda bisa mengganti karakter gambar dengan desain anda sendiri, dengan meng utak atik kode yang berwarna orange.

3. lalu letakkan kode jQuery berikut dibawah kode ]]></b:skin>

<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>

4. Klik Simpan Template

Menggunakan OW Generator

mengutip dari sumber aplikasi : Anda tidak perlu mengedit HTML karna Scroll To Top ini hanya menggunakan simple CSS yang di gabungkan menjadi satu Generator, bahkan Anda yang tidak mengerti tentang HTML ataupun pemula akan sangat mudah memasang Scroll To Top. Bahkan Anda dengan sangat mudah apa ingin memasang Scroll To Top ini di bagian kanan, kiri, bahkan di bagian tengah blog Anda. Di sini juga ada banyak pilihan Scroll To Top yang bisa Anda pilih.

Oto Website Generator

Silahkan klik Link di atas

Semoga Bemanfaat, selamat mencoba, dan semoga berhasil.