Wah, aku kembali lagi nih. kali ini aku kembali dengan blog tutorial yang sudah lama tidak aku tampilkan.
Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.
1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(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>
5. Kemudian Ganti kode <body> dengan kode <body id='top'>
6. letakan kode di bawah ini, di atas kode </body>
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOA13qn4vIWuHbPRI7ykyVeHIdAROu9R6GtnhPt_Y6TlxRSn73zVH8qrq46iFUKVJbCL2gRgpoJeJggRWcf2zymXBkguUtiBYqoeGdKa7MbLLgoY5tKq9qXYlWx5jUUA8ZndXV-NT1WrJ/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
7. Selesai, dan silahkan menikmati back to top jquery
Wah tutornya sip gan
BalasHapusBerkunjung siang mencari ilmu
BalasHapussalam sobat
BalasHapustutorial menarik
saya akan coba buat back to tp dengan Jquery ini.
trims ilmunya mas Ega.
Coba ah!
BalasHapusIjin copy script!
BalasHapusTutorial yang gampang dipraktekkan, nice post!
BalasHapusTrims sobat telah berbagi artikel ini!
BalasHapusseeep kawan... mantab back to topnya...
BalasHapusmantap..makasih ya..kapan perlu coba nih...
BalasHapusBaru tahu nih tutorial tentang hal ini... :D
BalasHapusWahhh Mantapp mas ega triknya...!! tapii belum minta rasanya kalo konfigurasinya pake Jquery.. JSnya banyakk... hehehe
BalasHapusTutorialnya boleh juga dipraktekkan kapan2... hehehe
BalasHapuswah.. kayanya ini trik udah kemana mana :)
BalasHapusdemonya kayak gimana?
BalasHapusbek tu topku belum tak kasih jquery
BalasHapussekarang back to top, lihat komen, dan poskan komen sudah tak kasih jquery
BalasHapusdengan jquery perpindahan/pergeseran halaman menjadi lebih halus berbeda dengan punya saya yang hanya menggunakan link mati ^_^ keep sharing
BalasHapusApik ga, tap sing tak penngen ki kaya punyae poskota.co.id arep nyolong source codenya males. hehehe
BalasHapusmantab mas ega . tapi alangkah lbih baiknya bila menggunakan versi link kyk yg dulu anda gunakan . biar gak bikin berad . (tp elek . juk2 wes neng nduwur . gk kyk yg pke' jquery .hehe)
BalasHapus@ yuda, nyo mas: http://www.poskota.co.id/wp-content/themes/poskota20/scrolltop/scrolltopcontrol.js
keren ga. lanjutkan kreasimu. sayangnya saya bukan pengguna blogspot
BalasHapus@Yuda: nggonku wis tak ganti podo poskota.co.id deloken. tapi postingane urung tak edit
BalasHapustutornya mantapp nihh salut buat ente sob
BalasHapusWah podo2 nganggo boso jowo, melu ah,...
BalasHapusPancen nak nganggo JQuery kuwi luweh ringkes lan luweh gampang koq, mbangane nganggo javascript seng manual...
aQ koq malah rung ndelok button back to top - e yo, nang sebelah ngendi to nak nang blog iki....
tutorial yang sangat bermanfaat.
BalasHapussayang lagi males ngedit...
BalasHapustapi sangat bermanfaat tutorial kali ini.
mantap kawan coba w test deH, mudah"an berhasil w
BalasHapussatu lagi saran saya . kalo bisa, script back to top yg anda gunakan (yg dari poskota.co.id) di masukan di bagian footer, agar pada saat kita masih di tengah2 postingan, gambar untuk back to top itdak langsung keluar . tengs :)
BalasHapustutor yg bermanfaat...trimakasih sob...
BalasHapussalam, ^_^
Kayaknya bagus juga nih dipasang di blog. Thanks tutorialnya ya! :)
BalasHapusWach sip nich kyknya kpn2 akan dicoba ah,makasih tutornya sobat...:D
BalasHapusWah keren nich ane baca-baca dulu ach
BalasHapusilmu baru nih sob,, bisa di praktekan,,
BalasHapusmantabbb..
tips nya makin komplit, mkasih ya sob...
BalasHapuswah mas ega makin mantab aja nich tips-tipsnya ;)
BalasHapusdengan berat hati pak liek memutuskan untuk ... .
BalasHapussiap..komandan!!
BalasHapussalam kenal, maz yuk tukeran link , link maz udah kutarok , jangan lupo follow mazz
BalasHapussalam kenal > yuk tukeran link mazz
BalasHapuswah.... tutornya koq gk sama ya kyk diblog ini?????.
BalasHapuspgen bgt ak kyk yg ada diblog ini.. bisa naik pelan2 trz iconny bisa hilang sndri gt....
Thanks Mas salam kenal ya
BalasHapusthank lam kenal ya......
BalasHapusterimakasih mas... tapi yang saya bingung, bagaimana jika menggunakan wp selfhosting?!?!
BalasHapusKenapa tidak di praktekkan dulu disini nih trik?? Mau dong lihat demo nya. Ini blog saya Koleksi Biografi | Daftar Situs Penyedia Blogging yang Gratis
BalasHapusTerima kasih mas...langsung dipraktekkan dan berhasil...alhamdulillah...Thanks
BalasHapusthanks buat tutorialnya sobat, udah saya praktekan di blog saya dan berhail :)
BalasHapus