Cara Membuat Tombol Icon Back To Top Pada WordPress

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.

Mudah kan … ? Selamat mencoba dan semoga bermanfa’at …

sumber :  http://onesetia82.wordpress.com/2012/01/07/cara-membuat-tombol-icon-back-to-top-pada-wordpress/#more-3185