Cara membuat smooth scrolling blogspot

Smooth scrolling adalah suatu fitur navigasi blog yang berguna untuk kembali ke atas dengan sekali tekan tombol pada halaman blog dengan lembut (smooth).Untuk fungsi kembali keatas “smooth” ini akan menggunakan javascript yang cukup sederhana dan sangat mudah diterapkan.
Dengan fungsi smooth scrolling,maka blog anda akan semakin kelihatan prof layaknya situs situs yang sudah ternama.

Advertisement

Kamu tertarik?…….ikuti lagkah langkahnya berikut:

Cara pemasangan smooth scrolling untuk template blog blogger

Pertama,masuk kedalam edit HTML template blogspot kamu lalu paste code CSS berikut sebelum tagĀ  ]]</b:skin>
#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Kemudian pastekan javascriptnya berikut sebelum tag </head>

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js’ type=’text/javascript’></script>
<script language=’javascript’ type=’text/javascript’>
$(document).ready(function(){
// hide
$(&quot;#go-to-top&quot;).hide();
// fade in
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 100) {
$(&#39;#go-to-top&#39;).fadeIn();
} else {
$(&#39;#go-to-top&#39;).fadeOut();
}
});

// scroll to top
$(&#39;#go-to-top img&#39;).click(function () {
$(&#39;body,html&#39;).animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

Catatan: jika code <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js’ type=’text/javascript’></script> sudah ada pada template kamu,maka tak perlu dipakai.

Masih pada edit HTML,sekarang temukan tag </body> dan pastekan code berikut ini sebelum </body>

<a href=’#’ id=’go-to-top’><img alt=’Back to Top’ src=’https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZgn5J8U_yI/AAAAAAAAFcc/VE_uPCU4igQ/Up1Blue.png’/></a>

Simpan template kamu!

Advertisement

Mungkin Anda juga Menyukainya :

Leave a Reply

Your email address will not be published. Required fields are marked *