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>

view plain print ?

<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,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').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.

Trik Blog

Anda sedang membaca artikel tentang Membuat Tombol Back To Top Di Blogger dan anda bisa menemukan artikel Membuat Tombol Back To Top Di Blogger ini dengan url https://blackyz-art.blogspot.com/2013/07/membuat-tombol-back-to-top-di-blogger.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Tombol Back To Top Di Blogger ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.