Terwujud

Cara Membuat Efek Thumbnail Cantik di Home Page



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Mencoba untuk otak-atik tampilan Thumbnail di blog ini dengan memberi tambahan kode CSS-nya, maka tampilan gambarnya pun berubah.

Sebenarnya cara ini sudah banyak dijelaskan oleh para blogger sebelumnya, akan tetapi ada sedikit perbedaan yang jelas seperti dari kode pemanggil Id atau kode CSS baru yang ditambahkan ke dalam HTML.

Disini saya akan menjelaskan Cara Membuat Efek Thumbnail Cantik di Home Page secara cepat dan mudah, tugas anda hanya menambahkan sedikit kode CSS-nya saja, dan itu tidak sulit kok! ^-^.
Thumbnail
Temukan kode Thumbnail blog anda
Contoh pada kode Thumbnail blog ini (Sebelum di Edit ), lihat ke bawah:
a.thumbx{display:block;padding:4px;float:left;width:180px;height:120px;overflow:hidden; margin-right:10px;background-color:#A7F7A4;border:1px solid #E0E0E0; }

a.thumbx img{display:block;width:100%;height:100%;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;} .post{border: 3px solid #A7F7A4;box-shadow:0px 2px 10px 0px;margin:0 0 20px 0;overflow:hidden}

ul#relpost_img_sum li img:hover, a.thumbx img:hover, .PopularPosts img:hover, #sidebartengah .widget-content img:hover {opacity: 0.4}
Keterangan:
Kode berwarna merah adalah Id CSS yang tentu tidak sama dengan kode Thumbnail anda, tapi hal itu tidak menjadi masalah, sebab anda hanya menambahkan kode CSS-nya saja.

Sesudah di Edit
Contohnya kode Thumbnail blog ini, lihat ke bawah:
a.thumbx{display:block;padding:4px;float:left;width:150px;height:150px;overflow:hidden; margin-right:10px;background-color:#A7F7A4;border:1px solid #E0E0E0; border-radius: 100px;}

a.thumbx img{display:block;width:100%;height:100%;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; border-radius:100px;} .post{border: 3px solid #A7F7A4;box-shadow:0px 2px 10px 0px;margin:0 0 20px 0;overflow:hidden}

ul#relpost_img_sum li img:hover, a.thumbx img:hover, .PopularPosts img:hover, #sidebartengah .widget-content img:hover { border: 10px solid #600606; border-radius: 100px; opacity: 0.8 }
Keterangan:
  • Lebar dan tinggi gambar harus sama, lihat pada kode di atas
  • Kode yang berwarna Merah adalah kode yang saya tambahkan, sehingga Efek Thumbnail yang semula berbentuk kotak menjadi bulat dan bergerak saat kursor menyentuhnya. Untuk membuktikannya, silahkan lihat Home Page blog ini, dan arahkan kursor anda, lihat apa yang terjadi !, Mudah kan,....


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 5 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. Thumbnail itu... keren mas.... box-shadownya lebih memancar, pasti terlihat hidup...

    ReplyDelete
  2. wah kreen bapak, saya tak coba dulu di blog lain

    ReplyDelete
  3. wah keren juga nih ya pak. biar blog enak dipandang, hehe.

    ReplyDelete
  4. .. keren banget nich tutor nya,, pengen nyoba dech ..

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved