Cara Mudah Letak Gambar Dan Tulisan Dalam Button

Salam semua. hari ini admin nak berkongsi lagi tutorial mudah dengan korang. kali ini admin akan kongsikan Cara Mudah Letak Gambar Dan Tulisan Dalam Button. seperti yang korang tengok pada contoh dibawah. gambar dan tulisan korang nampak lebih menarik. admin pun cuba2 jer tadi, tup2 nampak macam menarik jer..sebab tu admin kongsikan dengan korang



Menarik bukan?.korang nak cuba buat tak?. yang penting korang kena ada coding dibawah. admin akan ajarkan cara - cara nak buat

<button>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyapWIjjD8avW_tZcAtotpCGpejYjmCoQplht4Jchg2NqzLoOjqzwBTujh5OIRDOIRK7ro5g0CD93IxXUh-CKrcITuf5iygayc6dAYbmJCa7Sws__WEXF6hyUm3XdWLhzC6FxRF-qQ38/s320/cinta+kura-kura.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyapWIjjD8avW_tZcAtotpCGpejYjmCoQplht4Jchg2NqzLoOjqzwBTujh5OIRDOIRK7ro5g0CD93IxXUh-CKrcITuf5iygayc6dAYbmJCa7Sws__WEXF6hyUm3XdWLhzC6FxRF-qQ38/s320/cinta+kura-kura.jpg" /></a></div>

<div style="color: green; text-align: center;">
<b>AYAT KORANG</b></div></button>

Coding yang atas sekali tu adalah untuk gambar. korang boleh tukar nak letak atas tulisan mahupun bawah tulisan. just tukar kedudukan jer. coding yang bawah tu untuk tulisan. sama macam koding gambar tadi. korang boleh tukar kedudukan jugak.

Coding Gambar :

text-align : center, left atau right (kedudukan gambar)
href & src : ganti dengan "URL atau Image location" gambar yang korang nak

Coding Tulisan :

color : green (tukar mengikut warna kesukaan korang..hanya perlu tulis jer cth: black, blue, yellow dsg)
text-align : center, left atau right (kedudukan tulisan)
AYAT KORANG : ayat yang korang nak letak dalam button

Kalau korag nak tambah ayat lain dibawah ayat tadi, tetapi dengan warna yang berbeza pun boleh. korang tambah jer koding dibawah pada coding asal tadi

<div style="color: green; text-align: center;">
<b>AYAT KORANG</b></div>

Ianya akan kelihatan seperti berikut :

<button>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyapWIjjD8avW_tZcAtotpCGpejYjmCoQplht4Jchg2NqzLoOjqzwBTujh5OIRDOIRK7ro5g0CD93IxXUh-CKrcITuf5iygayc6dAYbmJCa7Sws__WEXF6hyUm3XdWLhzC6FxRF-qQ38/s320/cinta+kura-kura.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyapWIjjD8avW_tZcAtotpCGpejYjmCoQplht4Jchg2NqzLoOjqzwBTujh5OIRDOIRK7ro5g0CD93IxXUh-CKrcITuf5iygayc6dAYbmJCa7Sws__WEXF6hyUm3XdWLhzC6FxRF-qQ38/s320/cinta+kura-kura.jpg" /></a></div>

<div style="color: green; text-align: center;">
<b>AYAT KORANG</b></div>

<div style="color: green; text-align: center;">
<b>AYAT KORANG</b></div>
</button>



Menarik bukan?. banyak lagi yang korang boleh buat sebenar yer. cuma kita kena rajin mencuba jer. untuk buat dalam posting, koding tadi korang perlu edit melalui "EDIT HTML". selamat mencuba. ikhlas admin kongsikan untuk semua (^_^)

p/s : selain daripada menggunakan kaedah disable right click dan disable highlight. admin rasa cara ini juga boleh digunakan untuk melindungi entry korang dari di "copy & paste" oleh mereka yang tidak bertanggung-jawab.

Suka dengan apa yang admin kongsikan?. sila klik pada button dibawah sebagai tanda sumbangan ikhlas anda untuk duniakongsi.net. hanya sedikit iklan untuk menampung duniakongsi. sumbangan "klik" dari anda sangat admin hargai dengan ucapan terima kasih (^_^)