Cara Membuat Efek Thumbnail Cantik di Home Page

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

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