Membuat Tombol Back To Top

Diposkan oleh Madie Zha on 03 January 2012 at 1:19 PM

Membuat Tombol Back To Top | Tutorial Blog

Membuat Tombol Back To Top | Tutorial Blog

Tombol back to top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. pada widget ini selain tombol back to top juga terdapat tombol back to bottom untuk menampilkan bagian bawah halaman.
Langsung saja Sob, berikut caranya :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Tombol Back To Top
  • Beri tanda centang pada Expand Template Widget.
    Membuat Tombol Back To Top
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Copy kode berikut dan pastekan di atas ]]></b:skin>
    #floating-up {
    position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
    _bottom:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
    #floating-up a
    {
    filter:alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
    border:0;
    }
    #floating-up img
    {
    border:0;
    }
    #floating-up a:hover
    {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
    }
  • Lalu tambahkan kode <a name='to-bottom'></a> tepat diatas kode </body>.
  • Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
    <div id='floating-up'>
    <div><a href='#' title='back to top'><img alt='back to top' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png'/></a></div>
    <div><a href='#to-bottom' title='back to bottom'><img alt='back to bottom' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png'/></a></div>
    </div>
  • Terakhir klik Save / Simpan Template.
    Membuat Tombol Back To Top
Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Back To Top.

.:. 23 komentar .:.Post a Comment

  1. Agar Posisinya letakknya di Center Pada Bagian Kiri, Gimana Cara sobat....
    Sebelumnya.......
    Terima Kasih

    ReplyDelete
    Replies
    1. http://ainstsetia.blogspot.com/

      Delete
    2. Sobat tinggal ganti kode right:0px; dengan left:0px;
      semoga berhasil...

      Delete
    3. thanks... sudah berhasil di blog gw...

      Delete
  2. thanks gan atas infonya
    Ku share di blog ku ya!!!

    ReplyDelete

  3. makasih infonya semoga bermanfaat gan

    ReplyDelete
  4. . artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  5. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete
  6. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  7. terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete


  8. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  9. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    ReplyDelete
  10. gan kok saya pada saat mencari kode di template kok gak ada ya ?
    Mohon Pencerahaannya :D

    ReplyDelete
  11. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  12. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  13. kok di blog saya tidak ada < body > nya ya? ada tapi beda bukan yg itu, Bisa bantu saya admin? thanks

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom