Wednesday, July 31, 2013

Membuat Tombol Back To Top Di Blogger

Membuat tombol Back to top kira-kira seperti itu judul tutorial blog kali ini. Tapi ngomong-ngomong temen-temen sudah tahu belum seperti apa sih tombol back to top itu? Kalau diuraikan dengan kalimat tombol back to top itu adalah tombol yang digunakan untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah.
Di samping itu tombol Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tombol itu. Dalam tutorial pembuatan back to top kali ini saya menggunakan jquery. Perbedaan dengan yang biasa adalah ketika kita berada di halaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada.  

Nah, jika anda tertarik untuk membuat tombol itu, di bawah ini akan saya uraikan langkah-langkah pembuatannya.
1.  Pertama login ke blogger dengan akun anda
2.  Pilih Rancangan >> EDIT HTML (centang expand template widget)
3.  Simpan kode berikut sebelum kode ]]></b:skin>
#top-link{display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:#000; color:#fff; text-shadow:1px 1px 1px #666; font-size:11px; position:fixed; right:-20px; bottom:150px; padding:5px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}
Keterangan :
  • background:#000; ---> Latar belakang/background berwarna hitam 
  • color:#fff; ---> tulisan back to top berwarna putih 
  • right:-20px; bottom:150px; ---> Posisi berada dibawah sebelah kanan 
  • -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px ---> sudut Tombol melengkung
Untuk melihat kode HTML warna silahkan lihat disini

4.  Sekarang simpan kode berikut diatas kode </head>
  1. <div style="text-align: left;"><script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'  type='text/javascript'/></div><div style="text-align: left;"></div><div style="text-align: left;"><script  src='http://z33s.googlecode.com/files/kaluhur.js'  type='text/javascript'/></div><div style="text-align: left;"><script type='text/javascript'></div><div style="text-align: left;">jQuery.fn.topLink  = function(settings) {</div><div style="text-align: left;">settings = jQuery.extend({</div>min: 1,  
  2. fadeSpeed:  200  
  3. }, settings);  
  4. return this.each(function() {  
  5. var el =  $(this);  
  6. el.hide();  
  7. $(window).scroll(function() {  
  8. if($(window).scrollTop()  &gt;= settings.min)  
  9. {  
  10. el.fadeIn(settings.fadeSpeed);  
  11. }  
  12. else  
  13. {  
  14. el.fadeOut(settings.fadeSpeed);  
  15. }  
  16. });  
  17. });  
  18. };  
  19.   
  20. $(document).ready(function()  {  
  21. $(&#39;#top-link&#39;).topLink({  
  22. min: 300,  
  23. fadeSpeed:  500  
  24. });  
  25. $(&#39;#top-link&#39;).click(function(e) {  
  26. e.preventDefault();  
  27. $.scrollTo(0,300);  
  28. });  
  29. });  
  30. </script>  
5.  Tahap selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Anda simpan kode berikut tepat diatas kode </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Catatan :
Jika ketika di-klik tombol back top tidak bekerja (tidak mau kembali ke atas) anda ganti kode #top dengan # sehingga hasilnya seperti ini :
<a class="no-click no-print" href="#" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
6.  Simpan template anda, dan bisa dilihat hasilnya

Bagaimana, sulit atau gampang? Kalau sulit tanya saja sama kotak komentar di bawah. Kalau gampang tanya sama rumput yang bergoyang. Selamat mencoba dan semoga bermanfaat.


Related Posts

Comments
0 Comments

0 comments:

Post a Comment

Jangan lupa Follow + Like Fanspage
dan jangan lupa tinggalkan komentar :D

(ini perintah maka laksanakanlah xD)