X
    Categories: Blogger

Cara membuat smooth scrolling blogspot

Ads

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.

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!

Artikel di Update pada April 15, 2016 11:54 pm

Ads
Ed:
Ads

Website ini menggunakan kukis

Baca selengkapnya
Ads