Membuat "Back to Top"

Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.

Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.

Cara I :

  • Tambahkan kode CSS berikut di atas kode ]]></b:skin>.
p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }

Keterangan :
  1. font-family = keluarga bentuk teks yang akan kita tampilkan.
  2. font-size = ukuran teks.
  3. float = peletakkan teks (kanan atau kiri)
  4. padding-right = jarak antara teks dengan bidang sebelah kanan.
  • Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.
  • Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, & sejenisnya.
  • Kemudian copas kode berikut di atasnya :
<p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p>
  • Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'>
  • Kemudian simpan template kamu.
Catatan :
  1. Untuk peletakkan back to top tidak harus di atas footer.
  2. Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.
  3. Blog demonya ada di utuharies.blogspot.com.

Cara II :
  • Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>

Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.

  • Letakkan jquery back to top tersebut di atas kode </head>
  • Tambahkan kode CSS berikut di atas ]]></b:skin>.
#back-to-top {right:20px;bottom:40px;position:fixed;}
  • Ganti kode <body> dengan <body id='to-top'>
  • Selanjutnya tambahkan kode berikut di atas kode </body>.
<div id='back-to-top'>
<a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
</div>

Catatan :
  1. height = tinggi image
  2. width = lebar image
  3. Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (Kenapa image tidak muncul?).
  • Simpan template.

Selamat membuat back to top...

22 komentar untuk “Membuat "Back to Top"”

  1. Nice sharing.. Back to top membuat pembaca lebih mudah untuk manjat keatas. hehe :)

    BalasHapus
  2. biasanya tombol/link Back to Top cuman bisa aktif satu kali aja, jadi klo pada halaman itu sudah diklik..maka klo diklik lagi g akan scroll totomatis ke atas (back to top) lagi

    mampir :D

    BalasHapus
  3. @Ka Damar : OB rasa untuk back to top ini tidak begitu kk. Tergantung peletakkan linknya (a href='#to-top') dimana? Klo peletakkannya pada posting tertentu, jelas cuma berlaku untuk posting tersebut. Tapi kalau di body, menurut OB berlaku untuk seluruh halaman blog.

    BalasHapus
  4. O....bener Boz . . ..tak coba :D

    BalasHapus
  5. um.... makasih tutorialnya sobat....

    salam kenal dan salam hangat dari blogger Bali

    BalasHapus
  6. salam kenal..Sob..kunjung balik ya!

    BalasHapus
  7. trims info nya sobat...
    salam kenal, bagus banget info2 disini

    BalasHapus
  8. ulasan yang informatif Sob..lanjutkan..sukses selalu!

    BalasHapus
  9. Keren juga ya, tapi bisa ditambahin gambar ga tuh?

    BalasHapus
  10. @Reza Winandar : Untuk back to top cara 1 bisa kk, tinggal mengganti kode
    <a href='#to-top' title='back to top'>back to top</a>
    dengan kode
    <a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
    Silakan rubah alamat image di atas (src), height, dan width.

    BalasHapus
  11. menarik sahabat,pada saat ke atas kelihatan seperti berjalan..

    BalasHapus
  12. berhasil mas, tapi kok gag disamping yo?

    BalasHapus
  13. THANKS MAZZZ KEBANTU BANGET NIH,.. SERING2 SHARE YA MAS,.. NEW BIE NIH,,, MASIH AWAM,, MASIH BUTUH BANYAK BELAJAR. MAKASIH BANGET.

    BalasHapus
  14. wahh mante[p gan... jadi lebih lembut scroolnyaa makasih yaa

    BalasHapus
  15. Dapatkan update lowongan kerja 2011 hanya di:

    http://jobstreet-id.blogspot.com/

    BalasHapus
  16. saya sudah coba n berhasil,m makasi yah :)

    BalasHapus