Posted by : ZraIlyas
24 April 2012
Back To Top sudah banyak digunakan oleh para blogger untuk memperindah
tampilan blognya. Banyak ragam kreasinya, seperti salah satunya
menggunakan jQuery.
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
bacaan "back to top".
Tahapan Pembuatan Back to Top - Jquery:
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>
4. Lalu letakkan Kode CSS berikut, diatas kode ]]></b:skin>
6. Selanjutnya Masukkan kode HTML berikut diatas </body>
7. Simpan template. Dan berhasil.
Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
Sumber : http://ut2a-4down.blogspot.com/2012/03/back-to-top-smooth-page-scroll-jquery.html#ixzz1sqAHW0YU
Tahapan Pembuatan Back to Top - Jquery:
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/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 -->
4. Lalu letakkan Kode CSS berikut, diatas kode ]]></b:skin>
/* Back to Top */
#top-link {display:none;font-weight:bold;font-family:century gothic;font-size:13px;width:auto;background:#111;position:fixed;right:-25px;bottom:130px;padding:5px;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}#top-link:hover {text-shadow:0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;border:1px solid #fff;}
6. Selanjutnya Masukkan kode HTML berikut diatas </body>
<div id='top-link'><a href='#top' style='color:#fff;' title='Back to Top Page'>Back to Top</a></div>
7. Simpan template. Dan berhasil.
Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
Semoga bermanfaat.
Langganan:
Posting Komentar (Atom)
0 komentar
Silakan isi Komentar sobat
dan gunakan kata-kata yang sopan.
Jangan nyepam ya n_n