=xXx+=(EXPLORATION)Xx==+==x

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

Contoh Produk 1
Harga Rp 50.000,-

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 :

Contoh Produk 1
Harga Rp 50.000,-

♂ 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