Cara Membuat Back To Top V.2 ~ Tips dan Trik Ngeblog

Assalamu'alaikum, halo kawan, kawan kali ini saya akan membagikan sebuah trik yang masih sama dengan trik Cara Membuat Tombol Back To Top V.1, tapi bedanya naik keatas dengan halus, coba saja kamu klik tombol back to top di pojok kanan, sudah coba, (maaf fasilitas ini saya hapus sementara) nah nanti tombol back to top ini yang akan saya bagikan triknya mempunya efek halus, kamu mau pasang diblog mu ?, mau dong !!!, hehehe ini mah saya yang mau ya, ya sudah kita langsung saja membuat Back To Top V.2.

1.Pada dashbor blogger klik Template >> Edit HTML >> Proceed.

2.Kamu letakkan kode dibawah ini sebelum </head>

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

3.Sekarang kamu letakkan kode ini diatas </body>

<a href="#" id="backtotop"><img src="Url Gambar" alt="back to top" /></a>

4.Untuk langkah terakhir kamu letakkan kode ini dibawah <head>

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

5.Bila langka-langkah diatas sudah kamu terapkan, kamu preview, bila berhasil save template kamu.

Catatan :

Kamu ganti tulisan Url Gambar dengan url gambar kamu, dan kamu bisa mencari ikon back to top disini
Ini juga bisa untuk plafrom yang lain.

Yap sampai disini dulu Cara Membuat Back To Top V.2, semoga bermanfaat.

Sumber kode : allblogtools

Link : ► Cara Menghilangkan Navbar di Blog

Tips dan Trik Ngeblog

10.12.11

Cara Membuat Back To Top V.2

0 Komentar:

Posting Komentar

Popular Posts

Categories