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 !!
Bro maju truz blog'a !! Newbie kyk w terbantu nih............
BalasHapusFILE JSNYA CACAT TU BANG,,,.
BalasHapus@Anonim: Sepp, Terimakasih buat koreksinya :)
BalasHapusSaya kira file.js-nya, sampai saya update lagi, ternyata bukan. :))
Maaf baru saya edit lagi soalnya, ada kode yang hilang untuk langkah No9, yaitu untuk kode diatas tag < / body
Silahkan dicoba kembali, udah saya terapkan dan sukses.