Membuat tombol Back to Top

Jika blog anda termasuk yang menampilkan banyak posting sehingga tampilan jadi memanjang ke bawah, maka yang anda butuhkan adalah tombol yang dapat dengan segera mengarahkan pengunjung kembali ke halaman awal. Karena jika tidak hal tersebut akan menjadi pekerjaan yang sangat melelahkan bagi pengunjung. Anda tidak maukan kehilangan pelanggan...

Berikut kode Back to Top yang anda butuhkan:

Silahkan masuk ke pengaturan HTML template blog anda, jangan lupa beri centang Expand Widget. Selanjutnya copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

#csstop { overflow: hidden; float:right; width:55px; height:66px; clear:both; }

Selanjutnya, jika yang anda inginkan adalah tombol berupa gambar, maka copy kode di bawah ini dan letakkan sebelum kode <div id="footer">

<a href='#' id='csstop'><img src='http://dc178.4shared.com/img/Iyd4_cHJ/0.3044262106643665/back_to_top_2.png' title='Kembali ke atas'/></a>

Jika anda kurang berkenan dengan gambar/ icon back to topnya, anda bisa ganti sesuai selera anda. Caranya dengan mengupload gambar milik anda ke hosting gambar gratis kemudian replace kode gambar yang sudah ada di atas (http://dc178.4shared.com/img/Iyd4_cHJ/0.3044262106643665/back_to_top_2.png).

Kalau ingin yang lebih simple anda bisa gunakan versi footer sebagaimana gambar di bawah:

Sertakan kode <a href='#' id='csstop'>Back2top</a> dalam catatan kaki/ footer. Umumnya catatan kaki terletak di antara kode <div id='footer'> dan </div>
Berikut cara meletakkan kodenya:

<div id='footer'>
(c)2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> . <a href='http://www.deluxetemplates.net/' target='_blank'>Blogger Templates</a> Developed by: <a href='http://www.facebook.com/profile.php?id=100000145639557' target='_blank'>M.Sholehudin Zuhry</a>. Wp by <a href='http://wpthemesfree.com/' target='_blank'>wpthemesfree</a><a href='#' id='csstop'>Back2top</a>
</div>

Jika sudah silahkan di Save dan lihat hasilnya. Begitu anda klik Gambar/Icon atau tulisan Back to Top pada footer, maka secara otomatis anda akan di arahkan ke halaman paling atas dari blog anda. Selamat mencoba!

Posted by Zuhry D'Explorer