Cara Membuat Tombol Back to Top
Cara 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...
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 di bawah ini tepat 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/AVvXsEjMjrnV0QGbmK0wM7kCziCKbLF6mmlrvs7-PdLRwr46pQt5tCEDY3F31-G_46mBlMIVsmbnss0ZkVcJKMVfvPrJPG9QFoo-K3bDG27g6KnEuTXIWKNRnYOLgh6aZWsjnA7Y52VxS1uG0cWk/s1600/return_top.png) no-repeat left top; }
a:hover#scroll-to-top{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjrnV0QGbmK0wM7kCziCKbLF6mmlrvs7-PdLRwr46pQt5tCEDY3F31-G_46mBlMIVsmbnss0ZkVcJKMVfvPrJPG9QFoo-K3bDG27g6KnEuTXIWKNRnYOLgh6aZWsjnA7Y52VxS1uG0cWk/s1600/return_top.png) no-repeat right top; text-decoration:none; }
5.Lalu cari kode penutup </head> dan letakkan kode di bawah ini tepat di atasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/>
<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>
6. Kemudian yang terakhir cari kode </body> lalu pasang kode berikut tepat di atas </body>
<a id="scroll-to-top" title="Back to Top" href="#" style="display: block; opacity: 1;"></a>
7. Simpan template dan lihat hasilnya.
sekian artikel dari saya , semoga bermanfaat :) . baca juga artikel tentang Cara Membuat Widget Tombol Share Mengambang di Halaman Postingan
0 Response to "Cara Membuat Tombol Back to Top"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon