Advertisemen
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 sobat
2. 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>
#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;}
9. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
10. Simpan template, dan lihatlah perubahannya.
Keterangan :
1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (agar tidak double tentunya).
2. Kode yang saya beri warna biru, itu adalah posisi tulisan dan untuk merubah warna pada button back to top-nya.
Selamat mencobanya, Semoga berhasil memasangnya.. salam blogger !!
Advertisemen