Saturday, 22 February 2014

Cara Membuat Tombol Back To Top Dengan Efek Bounce Ala Kang Ismet

Pada kesempatan kali ini saya akan memberikan tutorial tentang Cara Membuat Tombol Back To Top Dengan Efek Bounce Ala Kang Ismet okeh jika agan sudah tidak sabar lagi silahkan simak tutorialnya dan telaten ya gan...

Demonya Lihat Di Blog Ini

Okeh langsung aja disimak cara membuatnya
1. Pertama-tama masuk ke blogger dashboard dulu
2. Kemudian masuk ke Template > Edit HTML
3. Lalu cari kode </head> (gunakan ctrl+f untuk memudahkan pencarian), dan letakkan kode jQuery ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
*Lewati langkah ini apabila di blog anda sudah terpasang jQuery

4. Jangan disimpan dulu, letakkan lagi kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

5. Masih belum selesai :D, cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

6. Klik simpan
7. Langkah terakhir masuk ke Tata Letak > Tambah Gadget, dan masukkan kode dibawah ini didalamnya
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id="BounceToTop" style="display: block;"></div>
*right:3px; adalah letak tombol back to topnya, silahkan di sempurnakan sendiri

8. Lihat perubahannya di blog anda 

Semoga bisa bermanfaat terima kasih sudah berkunjung jangan lupa komen + follow blog ini demi kemajuanya di masa mendatang.

Sumber : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

2 komentar

SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
dengan Total Hadiah Rp 30.000.000,-

Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

"SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
yang dapat dilihat di halaman berikut :

http://itulink.com/iframer4.php?page=KontesSeoSayaPoker


Tunggu apa lagi? Ikuti kontes ini sekarang juga.

thanks gan langsung di praktekin, dengan sedikit perubahan gimana gan ? cocok ga dengan template saya ?

aha-blogs.blogspot.com


EmoticonEmoticon