MODIFIKASI THUMBNAIL IMAGE BAG, 2

Sengaja dibuat dalam dua bagian agar artikel tidak terlalu panjang karena untuk memahami modifikasi thumbnail image, kode yang digunakan agak banyak.
Mudah-mudahan dengan adanya pembagian postingan menjadi dua bagian akan lebih memudahkan anda, jika tertarik untuk menerapkan pada blog anda.

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">
   
   Kode tombol tersebut akan terlihat seperti ini :

Tombol pada contoh diatas belum memiliki target link. Jika ditambah dengan target link, kodenya menjadi seperti ini :

<a href="http://epg-studio.blogspot.com/"><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://epg-studio.blogspot.com/"><input value="DETAIL" style="background-color: white;" type="submit"></a><a href="http://epg-studio.blogspot.com/"><input value="ORDER" style="background-color: pink;" type="submit"></a>

Tampilannya menjadi seperti ini :

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://epg-studio.blogspot.com/"> <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>

Tampilannya seperti ini :

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(&quot;https://lh6.googleusercontent.com/_1j80TgNqd_8/TXoX5kyhIlI/AAAAAAAAB54/VXcHjBY8_d4/texture4.jpg&quot;) repeat scroll right top white; float: left; line-height: 23px; font-size: 12px; font-family: times; text-align: center;"><a href="http://epg-studio.blogspot.com/"> <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://epg-studio.blogspot.com/"><input value="DETAIL" style="" type="submit"></a> <a href="http://epg-studio.blogspot.com/"><input value="ORDER" style="background-color: pink;" type="submit"></a></p>
   
   Tampilannya seperti ini :

Contoh Produk 1
Harga Rp 50.000,-

5. Jika thumbnail image ingin ditampilkan berderet kesamping (misalnya tiga buah kesamping kanan, tambahkan kode tampilan thumbnail image sebanyak tiga buah juga.

Contoh Produk 1
Harga Rp 50.000,-

Contoh Produk 1
Harga Rp 50.000,-

Contoh Produk 1
Harga Rp 50.000,-

Jika menemui kesulitan dalam memahami kode-kode yang digunakan, silakan anda tinggalkan kementar....!!!!