Top Up Button di Blogspot

Suatu waktu saya penasaran bagaimana membuat tombol top-up di halaman web blogspot. Lalu saya searching dan menemukan ada 2 cara untuk membuatnya. Cara yang pertama menggunakan CSS, sedangkan cara kedua menggunakan Javascript.

1. CSS Top-Up Button
   
   • Login www.blogger.com
   • Masuk ke menu "Template" lalu backup dulu templatenya (demi keamanan :D )
   • Setelah dibackup, masuk ke menu "Edit HTML > Process"
   • Beri tanda check pada "Expand Widget Templates"
   • Cari kode : </b:section> (gunakan "find" [ ctrl + F ] untuk mencarinya)
   • Ada banyak kode </b:section> yang akan ditemukan, pilih kode </b:section> yang paling akhir
   • Letakkan kode berikut tepat di atas kode </b:section> tadi :
     

     <a href=’#’ style=’display:scroll;position:fixed;bottom:5px;right:5px;’ title=’Back to Top’><img src=’http://img407.imageshack.us/img407/562/49047013.png‘/></a>

   • Kode yang berwarna hijau bisa diubah menggunakan icon anda sendiri
   • Klik "Save template"
   
   PS : Jika menggunakan cara ini maka tombol top-up akan terus terlihat walaupun scroll page sedang berada pada posisi paling atas.
    
   
2. Javascript Top-Up Button
   
   • Login www.blogger.com
   • Backup dulu templatenya
   • Setelah dibackup masuk ke menu "Edit HTML > Process"
   • Beri tanda check pada "Expand Widget Templates"
   • Cari kode : </head>
   • Letakkan kode berikut tepat di atas kode </head> :
     

     <script src='https://xeonhan.googlecode.com/files/xeon-top1.js' type='text/javascript'/>
     <script src='https://xeonhan.googlecode.com/files/xeon-top-setting.js' type='text/javascript'>
     </script>

   • Klik "Save template"
   
   PS : Jika menggunakan cara ini maka tombol top-up hanya akan terlihat jika scroll page ada diposisi bawah (tombol akan muncul dan menghilang otomatis sesuai dengan posisi scroll)
   
   
   sumber : CSS Top-Up Button || Javascript Top-Up Button