Silahkan anda simak Cara Membuatnya :
1. Siapkan beberapa image yang akan anda tampilkan baik image untuk background maupun image yang tampil utuh.
2. Siapkan kode tombol yang akan digunakan untuk menyertai thumbnail image. Perhatikan kodenya :
<input value="ORDER" style="background-color: pink;" type="submit">
Hasilnya :
Tombol pada contoh diatas belum memiliki target link. Jika ditambah dengan target link, kodenya menjadi seperti ini :
<a href="http://www.yes-or-no.co.cc/"><input value="ORDER" style="background-color: pink;" type="submit"></a>
Tampilannya seperti ini : (sama seperti pada tampilan pertama, hanya yang ini telah memiliki target link/alamat yang dituju)
Karena dalam contoh ada dua tombol, tambahkan satu lagi kode tombol seperti dibawah ini :
<a href="http://www.yes-or-no.co.cc/"><input value="DETAIL" style="background-color: white;" type="submit"></a><a href="http://www.yes-or-no.co.cc/"><input value="ORDER" style="background-color: pink;" type="submit"></a>Hasilnya :
3. Siapkan kode untuk menampilkan thumbnail image, seperti dibawah ini :
<p style="padding: 7px; margin-right: 10px; border: 2px solid white; background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TXoX5kyhIlI/AAAAAAAAB54/VXcHjBY8_d4/texture4.jpg) repeat scroll right top ; float: left; line-height: 23px; font-size: 12px; font-family: times; text-align: center;"><img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TXoTQWw1VWI/AAAAAAAAB5Q/jOKg-8UThCk/fs6.jpg" float="center" />
</p>
Tampilannya akan seperti ini :
Jika ditambahkan judul yang memiliki link target diatas image, serta jika image thumbnail disorot mouse akan muncul titel image tersebut kodenya menjadi sepert ini :
<p style="padding: 7px; margin-right: 10px; border: 2px solid white; background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TXoX5kyhIlI/AAAAAAAAB54/VXcHjBY8_d4/texture4.jpg) repeat scroll right top; float: left; line-height: 23px; font-size: 12px; font-family: times; text-align: center;"><a href="http://www.yes-or-no.co.cc/"> <span style="font-weight: bold;color:yellow;" >Contoh Produk 1</span><br/><span style="font-weight: bold;color:yellow;" >Harga Rp 50.000,-</span></a>
<a href="http://epg-studio.blospot.com/"><img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TXoTQWw1VWI/AAAAAAAAB5Q/jOKg-8UThCk/fs6.jpg" float="center" title="Contoh Produk 1 Harga Rp 50.000,-" height="150px" width="100px" /> </a>
</p>
Hasilnya
4. terakhir sekali, tambahkan kode kedua tombol diatas untuk melengkapi tampilan thumbnail image. Susunan kodenya seperti ini :
<p style="padding: 7px; margin-right: 10px; border: 2px solid white; background: url("https://lh6.googleusercontent.com/_1j80TgNqd_8/TXoX5kyhIlI/AAAAAAAAB54/VXcHjBY8_d4/texture4.jpg") repeat scroll right top white; float: left; line-height: 23px; font-size: 12px; font-family: times; text-align: center;"><a href="http://www.yes-or-no.co.cc/"> <span style="font-weight: bold;color:yellow;" >Contoh Produk 1</span><br/><span style="font-weight: bold;color:yellow;" >Harga Rp 50.000,-</span></a>
<a href="http://epg-studio.blospot.com/"><img src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TXoTQWw1VWI/AAAAAAAAB5Q/jOKg-8UThCk/fs6.jpg" float="center" title="Contoh Produk 1 Harga Rp 50.000,-" height="150px" width="100px" /> </a>
<a href="http://www.yes-or-no.co.cc/"><input value="DETAIL" style="" type="submit"></a> <a href="http://www.yes-or-no.co.cc/"><input value="ORDER" style="background-color: pink;" type="submit"></a></p>
Hasilnya :
♂ Good Luck ♀
Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
