permalink Rabu, 27 Juni 2012 |
![]() ![]() |
Membuat Tombol Back To Top
Nah kali ini akan melanjutkan tutorial membuat tombol back to top dengan versi yang berbeda. Script ini juga menggunakan jQuery 1.4.3 namun sedikit berbeda dengan postingan sebelumnya karena menggunakan sebuah gambar atraktif yang menurut saya sangat keren, hehehe...
Untuk demo silahkan cek dimari
Langsung saja untuk cara membuat tombol back to top atau tombol kembali ke atas ikuti langkah berikut.
1. Login ke Blogger > Edit HTML
2. Sebaiknya backup dulu template anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut ini di atas kode ]]></b:skin>
5.Lalu cari kode penutup </head> dan letakkan kode berikut ini di atasnya
<a id="scroll-to-top" title="Back to Top" href="#" style="display: block; opacity: 1;"></a>
7. Simpan template dan lihat hasilnya.

Langsung saja untuk cara membuat tombol back to top atau tombol kembali ke atas ikuti langkah berikut.
1. Login ke Blogger > Edit HTML
2. Sebaiknya backup dulu template anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut ini di atas kode ]]></b:skin>
a#scroll-to-top{position:fixed; right:15px; bottom:15px; width:18px; height:99px;display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXs5sHx-XpFe0XwvQVliioCzhLJOAq1sB6rzUIFEGkg3Rg6Tq4XptZ1OogCXLtkoGoG_CiqVcctNIq_zN8EG4mYnA6o4aIbZPHc2leeGGLGF7iTUCsLi8vKwpRyC5KiI3F6aNWo8BbEfZ/s1600/return_top.png) no-repeat left top; }
a:hover#scroll-to-top{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXs5sHx-XpFe0XwvQVliioCzhLJOAq1sB6rzUIFEGkg3Rg6Tq4XptZ1OogCXLtkoGoG_CiqVcctNIq_zN8EG4mYnA6o4aIbZPHc2leeGGLGF7iTUCsLi8vKwpRyC5KiI3F6aNWo8BbEfZ/s1600/return_top.png) no-repeat right top; text-decoration:none; }
5.Lalu cari kode penutup </head> dan letakkan kode berikut ini di atasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/>6. Kemudian yang terakhir cari kode </body> lalu pasang kode berikut tepat di atas </body>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function($) {
var upperLimit = 100;
var scrollElem = $('a#scroll-to-top');
var scrollSpeed = 500;
scrollElem.hide();
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
if ( scrollTop > upperLimit ) {
$(scrollElem).stop().fadeTo(300, 1);
}else{
$(scrollElem).stop().fadeTo(300, 0);
}
});
$(scrollElem).click(function(){
$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
});
});
</script>
<a id="scroll-to-top" title="Back to Top" href="#" style="display: block; opacity: 1;"></a>
7. Simpan template dan lihat hasilnya.
- Cara Membuat Icon Bergambar di Chatting/Obrolan Facebook
- Cara Mendapatkan Domain Inggris Gratis .co.uk
- Cara Merubah Bahasa Facebook Ke Bahasa ģαυℓ
- Cara Baru Mendapatkan Domain Intuit Gratis
- Auto Like Terbaru Tanpa Acces Token
- Cara Membuat IDS Twitter Sendiri
- Cara Mendapatkan Pulsa Gratis [ Free ]
- Cara Mendapatkan Acces Token Facebook
- Cara Mendapatkan Hosting & Domain Gratis | .com .net .biz, .org .Name
- Daftar Hosting Gratis | Cocok Buat Bot
Langganan:
Posting Komentar (Atom)
0 komentar:
Ayo komentar kamu yang pertamax wa di Membuat Tombol Back To Top