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. Kalau temen-temen mau lihat contohnya disini. 
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>
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'  type='text/javascript'/>
<script  src='http://z33s.googlecode.com/files/kaluhur.js'  type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink  = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed:  200
}, settings);
return this.each(function() {
var el =  $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop()  &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function()  {
$(&#39;#top-link&#39;).topLink({
min: 300,
fadeSpeed:  500
});
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</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.

Post a Comment