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 ]]>.

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 :
  
  
  ,
  

  ,
  

  ,
  

  , & sejenisnya.
• Kemudian copas kode berikut di atasnya :

back to top

• Jangan lupa melakukan edit pada kode menjadi
• 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.

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

• Letakkan jquery back to top tersebut di atas kode
• Tambahkan kode CSS berikut di atas ]]>.

#back-to-top {right:20px;bottom:40px;position:fixed;}

• Ganti kode dengan
• Selanjutnya tambahkan kode berikut di atas kode .

height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/>

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...

      

Share |