Labels: jQuery
Back to top merupakan salah satu widget yang berfungsi sebagai jalan pintas menuju kembali ke topik halaman/header blogger, dalam hal ini back to top sangat berperan penting ketika page sudah melebihi ambang batas/sudah terlalu panjang karena kebanyakan komentar.
Dalam postingan kali ini saya akan menyuguhkan tutorial tentang jQuery, memang jQuery bagus untuk dipraktekkan karena scriptnya yang tidak berat dan elegan
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya
display:none;
text-decoration:none;
position:fixed;
top:420px;
left:5px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSY_CP-g_dTugULwPyqrowzoZH_HF2JHDuJS02r0f9mO1G5h744vH7taDtUrsKSVbAB2sR1-4x1p3tSKngM70AbBmKVKuMYZQMj0y5cYlshabuDsgOnVpGoLS_rcf6ieLQjSIJNRirZE/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSY_CP-g_dTugULwPyqrowzoZH_HF2JHDuJS02r0f9mO1G5h744vH7taDtUrsKSVbAB2sR1-4x1p3tSKngM70AbBmKVKuMYZQMj0y5cYlshabuDsgOnVpGoLS_rcf6ieLQjSIJNRirZE/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
lalu letakkan kode jQuery berikut dibawah kode yang tadi
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
Klik Simpan Template
Semoga bermanfaat, selamat mencoba dan semoga berhasil
11 Komentar:
Admin said on April 20, 2012 at 6:17 AM
Thanks...
I will try to use these in my blogs
Pamahawpart
http://www.bestapkapps.net
Unknown said on April 27, 2012 at 8:13 PM
nice Blog, share ke info toko s-surya62.blogspot,com OK?
Rifki Taufik said on May 13, 2012 at 7:42 PM
:))Saya suka dengan blog ini, salam. saya admin blog www.buat2lisan.com
Dyanseller said on May 21, 2012 at 4:11 PM
gan kalau cript kembali ke bawah ada gak ..
:-q thanks
Muhammad Irham said on May 21, 2012 at 10:16 PM
@Dyanseller ntar tak coba buatin
semewew said on June 16, 2012 at 11:00 AM
keren nihh.. langsung dicobangan...
PUTRA DCD (Dipasena Citra Darmaja) said on June 25, 2012 at 7:48 AM
info yang bagus sob... o.. ya sob, cara menambahkan emontion yang keren di atas kotak komentar kaya pat kamu ini gimana sob caranya??? di tunggu jawabannya/postingannya.... dan di tunggu kunjungan baliknya....
Muhammad Irham said on June 25, 2012 at 9:19 AM
@PUTRA DCD kesini sob http://koderator.blogspot.com/2012/04/cara-merubah-tampilan-komentar-blogger_15.html
Blogger Pemula said on July 12, 2012 at 5:23 PM
sob, bisa ga ya kalo gambar back to top nya diganti dengan gambar lain??
Dunia Komputer l Berita l Tips dan Trik l Overclocking said on July 15, 2012 at 11:52 AM
wah gan kok aku coba tidak bekerja ya gan?? apa udah bener tutorialnya. mohon koreksi. salam hangat
Jefry said on November 17, 2012 at 2:38 PM
kayaknya bagus kalau dibuat seperti itu..
Post a Comment