~ Berbagi ilmu itu indah

Sudah lama ga update artikel … Beberapa hari absen dari peredaran wordpres[dot]com, karena akhir-akhir ini saya coba belajar nge-blog pada platform blogspot[dot]com. Kembali saya oprek wordpres[dot]com ini, dan kesempatan ini tidak akan disia-siakan, saya akan coba sharing artikel bagaimana Cara Membuat Tombol Icon Back To Top Pada WordPress, seperti yang terlihat di bagian bawah kanan blog saya. Icon Back To Top memiliki fungsi jika kita klik icon tersebut maka halaman blog akan kembali ke bagian atas, tanpa harus muterin mouse atau yang lainnya. Memang sungguh melelahkan jika kita membuka blog yang super panjang artikelnya, dan kita ingin kembali ke bagian atas blog harus muter-muter mouse …

Tertarik … ? gampang ko membuatnya, pertama agan buat sendiri icon yang akan dijadikan gambarnya. Masalah membuat icon, bebas dengan software apapun yang penting software tersebut suport format .png contoh (Photoshop, CorelDraw, de-el-el). Bagi anda yang ga mau direpotkan harus membuat sendiri gambar icon-nya, tenang saya sediakan beberapa contoh icon yang saya dapat dari browsing google (malas gan bikin sendiri).

Berikut beberapa contoh icon yang mungkin saja ada yang cocok dengan selera mas brow ….

http://onesetia82.files.wordpress.com/2012/01/back-to-top-1.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-2.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-3.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-4.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-5.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-6.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-7.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-8.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-9.png

http://onesetia82.files.wordpress.com/2012/01/back-to-top-10.png

Selanjutnya untuk memasang icon tersebut di blog agan caranya begini gan . . . Anda perhatikan script HTML di bawah :

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='

http://onesetia82.files.wordpress.com/2012/01/navigate-up-icon.png

' /></a>
</a></div>

Keterangan Script HTML :

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='

Ganti dengan URL Icon Gambar

' /></a>
</a></div>

Jika menginginkan icon back to top tampil di bawah kiri, tinggal merubah script HTML-nya pada bottom:10px;right:10px menjadi bottom:10px;left:10px

Setelah anda edit script HTML-nya, selanjutnya copas script tersebut dan paste atau tempatkan pada Widget Text blog anda. Save/Simpan dan selesai.