Cara Membuat Tombol Back to Top

Cara Membuat Tombol Back to Top
Cara Membuat Tombol Back to Top - Menulis di blog adalah sesuatu yang cukup menyenangkan, khususnya bagi para blogger yang hobi menulis. Terkadang hasil tulisan kita menghasilkan tulisan yang panjang, sehingga ketika kita membaca tulisan hingga akhir, akan sedikit merepotkan untuk kembali ke paragraf paling atas dari tulisan kita.

Untuk menangani masalah tersebut kita dapat membuat sebuah fasilitas yang biasa disebut Back to Top. Dimana tombol ini memungkinkan kita kembali ke paragaraf paling atas hanya dengan mengklik tombol back to top. Bagaimana cara membuat tombol back to top ikuti tutorial di bawah ini.

Copy kode Css dibawah ini kemudian tambahkan pada baris diatas kode ]]></b:skin> pada template kamu.

p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%; float:right;
padding-right:10px; }

Setelah kode css di tambahkan, selanjutnya kamu tentukan posisi tombol back to top berada dimana. Kita ambil contoh tombol akan kita letakkan tepat di atas footer. Tugas kamu mencari kode yang menunjukkan posisi footer berada di html template blog kamu. Posisi footer biasanya di awali dengan kode seperti <div class="footer"></div> atau sejenisnya.

Copy kode dibawah ini kemudian tambahkan pada baris tepat di atas kode footer yang kamu temukan

 <p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p>  

Langkah selanjutnya adalah melakukan edit pada kode body menjadi seperti di bawah ini
 <body> menjadi <body id='to-top'>  

Setelah itu simpan hasil pekerjaan kamu dan refresh blog kamu untuk melihat tombol back to top. Demikianlah tutorial cara membuat tombol back to top pada blog kita. Sebagai catatan tombol back to top tidak harus di letakkan diatas footer saja, Kamu bisa berkreasi sesuai dengan keinginan kamu.

Artikel Menarik Lainnya

0 comments :

Post a Comment

Tinggalkan jejak Anda dikomentar ini.
Kami membutuhkan kritik dan saran Anda untuk kemajuan Blog ini.
Terima kasih sudah berminat untuk meluangkan waktu berkomentar disini, semua kritik dan saran Anda akan saya dengarkan untuk memajukan Blog ini.
Gunakan name/url untuk berkomentar.
Anonymous = Spam

.
.
.
.
.

---->>Alexa<-----

---->Histats<----

Link Sobat