 |
| Thumbnail Post Ala KI |
Membuat Thumbnail Post Ala Kang Ismet - Halo sobat, kali ini aku akan menawarkan Tutorial trik Membuat thumbnail post ala KI (Kang Ismet), banyak sobat aku yang menanyakan tutorial ini, dengan lontaran ibarat "Gimana yah buat area postingan kayak kang ismet?", mengkin berbeda-beda pertanyaan sobat aku yang dilontarkan kepada saya, dan mungkin semua pertanyaan itu hanya ada 1 jawaban.
Sebelumnya aku minta maaf kepada Kang Ismet, alasannya sudah melanggar Undang-Undang Dasar ala Kang Ismet :D.
Tahap Awal Pembuatan
Disini aku hanya menawarkan CSS untuk men-design Thumbnail Post semoga nampak ibarat layaknya milik Kang Ismet, Sebenarnya Simpel saja cara pembuatannya, yang diharapkan hanyalah warna background pada gambar thumbnail, dan berikan CSS border-radius pada gambar thumbnail.Secara Rinci
Sekarang sudah banyak Template yang sudah mempunyai fitur yang kita inginkan, ibarat template dengan readmore yang sudah siap,breadcrumbs, thumbnail otomatis, dan Lain-lain.Element yang aku gunakan pada thumbnail post ini yaitu
.post-thumbnail , dan dibungkus dengan .post-thumbnail-area (pembungkusan tidak terlalu penting) , dibawah ini yaitu css awal thumbnail post : .post-thumbnail-area { width: 180px; height: 130px; float:left; overflow:hidden; } .post-thumbnail { display:block; width:100%; height:100%; max-width:none; max-height:none; min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none; position:static; } .post-body-area { padding:20px; margin-left:180px; /* Thumbnail width */ font-size:11px; }Dan akan menciptakan gambar menjadi ibarat ini :
Gambar yang dibentuk dari CSS diatas, menciptakan gambar yang hanya simple saja, kemudian dibentuk CSS ibarat berikut (CSS berikut yaitu CSS thumbnail post Blog aku sendiri yang telah aku redesign) :
.post-thumbnail-area { width: 180px; height: 130px; float:left; overflow:hidden; } .post-thumbnail { display:block; width:100%; height:100%; max-width:none; max-height:none; min-width:0; min-height:0; margin:0; padding:11px 0 0 36px; border:none; outline:none; position:static; background:#e15c5c } .post-thumbnail img{ border:0;padding:0;width:100px;height:100px;border-radius:100px;border:6px solid #e17676} .post-thumbnail img:hover{border:6px solid #e59393} ._post-body-area { padding:20px 5px 20px 13px; margin-left:180px; /* Thumbnail width */ font-size:13px; }Dan akan menciptakan gambar menjadi :
Simpel bukan ?
Kesimpulannya hanya menciptakan css ibarat ini .post-thumbnail img{ dan .post-thumbnail img:hover{ , dan menawarkan css background:#e15c5c pada .post-thumbnail, dan menawarkan effect css ibarat css diatas.
Tutor Lengkap
Carilah element thumbnail post pada blog sobat, buatlah background pada thumbnailnya, misalkan element thumbnail blog sobat.postthumb, tambahkan css background:#333 pada element tersebut, maka terlihat :.postthumb{background:#333}(Ganti warna background sesuai cita-cita sobat), kemudian pada img (gambar) buatlah gambar tersebut menjadi ibarat lingkaran, hanya dengan menambah css
border-radius:100px, maka akan terlihat:.postthumb img{border-radius:100px}Apabila sobat menginginkan Thumbnail Post ibarat aku Ala Kang Ismet , tambahkanlah border yang akan menghias gambar postthumb, buatlah css ibarat ini :
border:6px solid #666(Ganti warna border sesuai cita-cita sobat), sesudah ditambahkan css diatas pada element
.postthumb img, akan terlihat ibarat ini :.postthumb img{border-radius:100px;border:6px solid #666}Untuk memperindah buatlah hover pada
.postthumb img , maksud dari hover yaitu memberi efek pada ketika suatu element tersentuh kursor, disini kita akan memberi efek hover border pada .postthumb img, buatlah css ibarat dibawah ini.postthumb img:hover{border:6px solid #000}(Ganti warna border di hover sesuai cita-cita sobat), mudah saja bukan sobat ?
sekian dari saya, tentng Cara Membuat Thumbnail Post Ala Kang Ismet, maaf apabila ada kesalahan yang aku perbuat, terima kasih atas kunjungannya, Wassalam.
