Home » » Modifikasi Thumbnail Image

Modifikasi Thumbnail Image


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(&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://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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .