Selasa, 03 April 2012
Apa itu Back To Top, Aksesori tambahan pada blog ini merupakan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini. yang tentu fungsinya untuk memudahkan kita, dan 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 tulisan/icon "Back To Top". Biar lebih jelas lihat gambar dibawah ini.
Demo
Ikuti langkah-langkah berikut ini :
1. Seperti biasa, Login ke blogger sobat2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) : </head>
5. Lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
6. Simpanlah kode javascript di bawah ini, persis di bawah script jQuery di atas
<!-- Back To Top -->
<script src='https://sites.google.com/site/kodeblogger/javascript/back-to-top.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() >= 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>
<!-- End Back To Top -->
7. Terus cari lagi kode: <body> dan gantilah kode tersebut dengan kode dibawah ini:
<body id='top'>
8. Belum selesai Sob... Lanjutkan dengan mencari kode: ]]></b:skin>
dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Terima kasih. Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol suka dan follow yang ada di bawahnya.. Terima kasih ;)
