Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

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

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

5 komentar

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

Balas

wah kreen bapak, saya tak coba dulu di blog lain

Balas

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

Balas

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

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis