You are here : / / Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9xdPaZJARrTQaBT5kFVsidUtjtO09ftRkgeEfWZU2I6aRTL2yOWCTXGjExC3lqGUNhQOAOpmSSFXOwMt2XIEUhtyNYoecm3cBMCN0oPucsGRTZxZli3QfwTE207PLvdFb4Lluom9aGxos/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9xdPaZJARrTQaBT5kFVsidUtjtO09ftRkgeEfWZU2I6aRTL2yOWCTXGjExC3lqGUNhQOAOpmSSFXOwMt2XIEUhtyNYoecm3cBMCN0oPucsGRTZxZli3QfwTE207PLvdFb4Lluom9aGxos/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYJgeVz6u1vVD8YP9n_IAc6fhO86sZXaImf3AVNk_vILMaMVikc4aOUNO3roUFd8aVUoCy_yAB5tM8IoVj6W0EZqQppGK1tCcIHi7Mr43yy1oZG7md9Rc2g-kOMInO4z9syJmP2_PYqRhV/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpXyKu2-SqgQWoofZjGQBMymPXkYzMt0kk5J5KXFjx5Ks3PjVmwr778CkFOfD7QcnNTb6WiMnKiVaU8dWrWDI9vC1OPIzg6MlkxZS9E6D6Vi0pyWU8k06S4UDZrg1Vf60mfTM282wneUk-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHnbt9zX8M6HUIJg1Ptd7asn4N0nnzKXIKwFK-nCwzPUodbTYU5EfrcmpVbfJ3bWUWS4SYN7odJPJ4tgxiPFdUI2CRNI7cAl19Y164BCVYDeBqqdAAIgKYWHbK_vbe7D9tdRQn5PPKuLD/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2J4Rd5Q-kjtfRTYiLl7siCEkwyIvuVsN7y5x7WDmzmDANqJfQUTOQf1W2llnZ6gcQ_FRzUVzBSbFD1LwenBvWOSHc0uX5XENVDypRcfNLCqF2wIkUbClWVTbXL_Fan8Io-LAu_sEBD3o/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-kERwI35RozBmgdiTzHgFTNzzIk7kiWKTRmufps_2OOV25-SpbKTHw-zIalDb1BSxEX8VEDR9YWNn1WC9Np0RUblEb4sffFy09R7FDWcounVGBPkLf4zEkK4lbCH8jJTREdaGS7y0jV0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUoEym3HH5YBBPX6bh0qIw8nSqVDlpPMxf8ExQMfYW6GieoHppNLYTXzQpZxN48OU8lHOsIAjoe8WgjGVAAfMYKUMflLNr1zP2bJojg9hzsB9BjBqVHvLKoY00em4U-lhziaGhRzGqoH3/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.
Cara Membuat Tombol Back To Top Pada Blog Dengan Efek Memantul (Bounce)
4/ 5
Oleh