Minggu, 13 Juli 2014

Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)

Siapa yang tidak kenal dengan widget Back To Top, widget yang dapat mengembalikan tampilan blog kembali keatas. Pada artikel ini masterbama akan membagikan cara membuat widget back to top dengan efek memantul (bounce)

Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)

Untuk caranya memang agak sulit bagi blogger pemula karena memerlukan 3 script yang akan dipasang pada blog, tapi untuk blogger tingkat menengah seperti saya, cara ini sangatlah mudah.

Cara :

1. Login ke blogger.com
2. Pilih menu "Template" lalu klik "Edit HTML"
3. Cari kode </head> 
(Gunakan CTRL+F untuk memudahkan pencarian)
4. Masukkah 2 Script Dibawah ini tepat diatas kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Itu adalah script pertama sebut saja "jQuery" untuk script kedua adalah
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script>

Hasilnya akan menjadi seperti ini sob, jangan sampai keliru ya.

5. Klik "Simpan Template"
6. Sekarang pergi ke menu "Tata Letak" lalu klik "Tambahkan Gadget", terserah pilih tempat dimana saja, itu tidak berpengaruh.
7. Pilih "HTML/Javascript"
8. Masukkan script dibawah ini.
<!-- Back To Top Begin masterbama.blogspot.com -->
<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='BounceToTop'><img alt='Back to top' src='https://lh4.googleusercontent.com/-fsvS_ShH39A/U8Fzifp4s2I/AAAAAAAABrY/z1ysM30ocFM/s50-p/Back+to+top+masterbama.blogspot.com.png'/></div>
<!-- Back To Top End masterbama.blogspot.com -->
9. Klik "Simpan"

Silahkan cek blog sobat untuk memastikan Widget Back To Topnya sudah muncul atau belum. Oh ya.. saya menyediakan beberapa Versi Tombol Back To Top, untuk mengganti tombol default dengan tombol yang ada dibawah, anda hanya tinggal mengganti URL yang berwarna Biru diatas dengan URL tombol yang ada di bawah.

Back To Top 1 (Default)
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh4.googleusercontent.com/-fsvS_ShH39A/U8Fzifp4s2I/AAAAAAAABrY/z1ysM30ocFM/s50-p/Back+to+top+masterbama.blogspot.com.png

Back To Top 2
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh4.googleusercontent.com/-5a2zuUjD8Vs/U8F72FRpdKI/AAAAAAAABsE/2fteZEoc20s/s50-no/back+to+top+2+masterbama.blogspot.com.png

Back To Top 3
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh5.googleusercontent.com/-AVcWKdGdpQo/U8F72fkvnDI/AAAAAAAABsM/OIeKVzCub2k/s50-no/back+to+top+3+masterbama.blogspot.com.png

Back To Top 4
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh3.googleusercontent.com/-fTCutVeh3dw/U8F72enb7DI/AAAAAAAABsI/IfrvzCprCI4/s50-no/back+to+top+4+masterbama.blogspot.com.png

Back To Top 5
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh4.googleusercontent.com/-4xeQu23b1aw/U8F79CB3rmI/AAAAAAAABsU/C3wueWpKuWs/s50-no/back+to+top+5+masterbama.blogspot.com.png

Back To Top 6
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh6.googleusercontent.com/-w-Km8mEWlqI/U8F7-8TG1OI/AAAAAAAABsk/ibUxKOYBs0k/s50-no/back+to+top+6+masterbama.blogspot.com.png

Back To Top 7
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
https://lh3.googleusercontent.com/-X_cMBI3GNTI/U8F7-4txXFI/AAAAAAAABsg/2lwJTj3oMcQ/s50-no/back+to+top+7+masterbama.blogspot.com.png

Itulah beberapa tombol Back To Top yang saya miliki, maaf jika semuanya hitam karena saya tidak memiliki waktu yang cukup untuk membuatnya.

Jika sobat memiliki daya kreatifitas yang tinggi, sobat dapat membuatnya sendiri dengan software Logo Creator, bisa didownload di Buat Logo Dengan AAA Logo Creator 

Sekian dari artikel ini, selamat berkarya.

Artikel Terkait

Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
4/ 5
Oleh

9 komentar

13 Juli 2014 09.16 delete

wah kren nih izin coba dlu
thanks for share

Reply
avatar
13 Juli 2014 16.39 delete

ini gk ngaruh ke seo kan? mau ane pake hehe

Reply
avatar
13 Juli 2014 16.43 delete

Gak ada pengaruhnya gan, Loading blog tetap, seo tetap. Memasang widget ini cuma menambah kenyamanan pengunjung saja :-d

Reply
avatar
13 Juli 2014 17.04 delete

mantep gan langsung ane terapin di blog ane ^_^ :D , blog ane back to topnya gk bener kalo di browser Opmin

Reply
avatar
13 Juli 2014 17.06 delete

Silahkan mas, kalau mau request silahkan saja.

Reply
avatar
23 April 2015 09.24 delete

Terimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..

Reply
avatar
4 Mei 2015 10.22 delete

Thanks sob untuk informasinya :)
http://goo.gl/yAD923

Reply
avatar
14 Oktober 2015 17.21 delete

Gan, kalau ganti waktu scroll keatas nya gimana gan?

Reply
avatar

Mohon masukkan saran / kritikan Anda. Atau tanyakan sesuatu yang tidak Anda pahami. Free promosi asal sopan.