Blog Archive

Cara Membuat tombol "Back to top" di blog - by s2c3rr



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.
Mau tahu caranya...??ikuti langkah-langkah di bawah ini :
1. Login Blogger.com.
2. Di Dashbord sobat pilih >> Rancangan >> Edit HTML
3. Expand template widget
4. Letakkan 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 :
font-family = keluarga bentuk teks yang akan kita tampilkan.
font-size = ukuran teks.
float = peletakkan teks (kanan atau kiri)
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'>
5. Kemudian simpan template Sobat.

Mungkin ini saja yang dapat saya sampaikan pada kesempatan kali ini dan semoga artikel ini bermanfaat bagi yang membutuhkannya.
>>> Indahnya Berbagi <<<

Share this:

Post a Comment

 
Copyright © All About. Designed by OddThemes | Distributed By Gooyaabi Templates