Lagi-lagi artikel lawas nih sob #-o Kehabisan ide dalam memosting mengenai tutorial blogspot. Sobat mungkin sudah tidak asing lagi dengan feature Back to Top! Ada yg menggunakan murni dengan kode HTML, dan ada juga yg menggunakan DHTML... Sekian banyak mungkin keluaran versi dynamic drive Dynamic Drive DHTML scripts gaya punya :-bd Beben si bloglang anu ganteng kalem tea mah seperti biasa akan berbagi scroll to top dan scroll to bottom jadi satu terintegrasi dengan jQuery Plugins ;) Syarat utamanya didalam template sobat harus sudah ada script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>Masukan script jQuery plugins berikut, mau dibawah script jQuery inti diatas, atau diatas tag </body>jQuery Plugins
<script type="text/javascript">
//<![CDATA[
$(function () {
$('#scrlBotm').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
1500);
return false;
});
$('#scrlTop').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
1500);
return false;
});
});
//]]>
</script>
Cari kode ]]></b:skin> dan masukan kode CSS berikut diatasnya...//<![CDATA[
$(function () {
$('#scrlBotm').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
1500);
return false;
});
$('#scrlTop').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
1500);
return false;
});
});
//]]>
</script>
#scrlBotm {
float: right;
font-size: 13px;
position: fixed;
top: 0;
right: 0;
color: red;
}
#scrlTop {
float: right;
font-size: 13px;
position: fixed;
right: 0;
bottom: 0;
color: red;
}
Setelah itu temukan kembali kode <body> masukin kode HTML-nyafloat: right;
font-size: 13px;
position: fixed;
top: 0;
right: 0;
color: red;
}
#scrlTop {
float: right;
font-size: 13px;
position: fixed;
right: 0;
bottom: 0;
color: red;
}
<a href="#" id="scrlBotm">Scroll to Bottom</a>
<a href="#" id="scrlTop">Scroll to Top</a>Save
Untuk tulisan Scroll to top dan Scroll to bottom bisa diganti dengan gambar kesukaan ;) Semoga artikel lawas ini bisa membuat blog sobat lebih gaya punya b-) \m/Loading... |
4 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...