Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya MDF Blog, dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.
Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
/* Smooth Back to Top dengan jQuery */4. Kemudian letakkan kode berikut ini diatas kode </body>
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }
<!-- Smooth Back to Top dengan jQuery -->5. Simpan Template
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>
Silahkan anda sesuaikan sendiri dan edit-edit. Semoga Bermanfaat.
Source : MDF Blog
Label:
jQuery,
Tutorial Blog
pada
8/13/2013
Asiknya kalau pertamax. Coba dulu yah sob. kayaknya keren kalau di blog saya :d
BalasHapusdirumahmu juga keren, haha :-d
Hapuswaaahh pertamax udah ada yg sikat...
BalasHapusapa saya sikat ajah ya ornag yg ngambil pertamaxnya.. haha :D
haha jangan disikat sob, tapi di asah di tembok aja sob, haha, cuman bercanda :>)
Hapuskaaaaabuuuuurrrr, Mas Abdul mau menyikat saya @-)
Hapushaha cuman bercanda sob :))
HapusKeren-keren, Sudah saya terapkan.. oh iya ini template bagus buat blog baru, x-) soalnya saya pernah pakai masuk Pagerank semua Artikelnya.. (b)
BalasHapusmakasih sob, maksudnya gimana sob ? :-? page rank blog saya Not Avaible, solusinya gimana ya ? :-?
HapusBukan dapat pagerank sob :-) Artikel yang ditulis rata-rata ada dihalaman 1 google :>)
HapusBukan yang pertama bisa juga 2-10 tetapi dihalaman 1 (o)
Hapusowh maksud sobat artikel saya cepat terindex google ya ?, haha iya sih emang template yang saya pakai SEO, skor di demonya 94%. entah karena saya sering ganti template skornya jadi makin menurun ;-(
HapusSebenarnya berganti2 template itu tidak apa2 hanya saja bagian METATAG tidak diubah dan struktur H1,H2 dll tidak diubah. Bisa dibilang hanya bagian B:SKIN dan HTML saja
Hapusiya betul sob, tapi saya ganti templatenya selalu Faster Clean White, tapi kok klo sekali ganti template skor SEO nya turun 2-5%, klo dulu template ini skor SEO nya 94%, sekarang sudah menurun [-(
HapusKeren bray (h) Lanjutkan
BalasHapusmakasih bray, ok akan saya lanjutkan, hehe :-d
Hapuskeren efeknya sob,kelihatan smooth
BalasHapusmakasih sob
Hapuskeren sob , bisa dicoba
BalasHapusback ya
makasih sob, silahkan dicoba
Hapusblog sobat sudah saya kunjungi, saya mau tanya sob, apakah di blog sobat muncul iklan aneh ?
izinnn mencoba ya gan
BalasHapusI am terribly happy to scan this. this is often the sort of manual that must be and not the random info t hat's at the opposite blogs. Appreciate your sharing this best posting. agenbolabonus.org
BalasHapus