Cari Artikel Blog Ini

Total Tayangan Laman

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....!!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

maman mengatakan...

bos gimana cara masukan thumbnail image? yg dijelasin kan cuma kode scripty z, tlg jelasin gan! thanks

maman mengatakan...

gan dmn taro kode html nya ???? di element pages atw edit html???? thks

Irawan mengatakan...

benar2 membantu postingan anda untuk perbaikan blogku. mohon mampir ke blogku hasil saran dr blog anda

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!