Membuat Thumbnail Post Ala Kang Ismet

Thumbnail Post Ala KI

Membuat Thumbnail Post Ala Kang Ismet - Halo sobat, kali ini aku akan memperlihatkan Tutorial trik Membuat thumbnail post ala KI (Kang Ismet), banyak teman aku yang menanyakan tutorial ini, dengan lontaran menyerupai "Gimana yah buat area postingan kayak kang ismet?", mengkin berbeda-beda pertanyaan teman aku yang dilontarkan kepada saya, dan mungkin semua pertanyaan itu hanya ada 1 jawaban.

Sebelumnya aku minta maaf kepada Kang Ismet, dikarenakan telah melanggar Undang-Undang Dasar ala Kang Ismet :D.

Tahap Awal Pembuatan

Disini aku hanya memperlihatkan CSS untuk men-design Thumbnail Post semoga nampak menyerupai layaknya milik Kang Ismet, Sebenarnya Simpel saja cara pembuatannya, yang diperlukan 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, menyerupai template dengan readmore yang sudah siap,breadcrumbs, thumbnail otomatis, dan Lain-lain.

Element yang aku gunakan pada thumbnail post ini yakni .post-thumbnail , dan dibungkus dengan .post-thumbnail-area (pembungkusan tidak terlalu penting) , dibawah ini yakni 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 menyerupai ini :

Gambar yang dibentuk dari CSS diatas, menciptakan gambar yang hanya simple saja, kemudian dibentuk CSS menyerupai berikut (CSS berikut yakni 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 menyerupai ini .post-thumbnail img{ dan .post-thumbnail img:hover{ , dan memperlihatkan css background:#e15c5c pada .post-thumbnail, dan memperlihatkan effect css menyerupai 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 harapan sobat), kemudian pada img (gambar) buatlah gambar tersebut menjadi menyerupai lingkaran, hanya dengan menambah css border-radius:100px, maka akan terlihat:

.postthumb img{border-radius:100px}

Apabila sobat menginginkan Thumbnail Post menyerupai aku Ala Kang Ismet , tambahkanlah border yang akan menghias gambar postthumb, buatlah css menyerupai ini :

border:6px solid #666

(Ganti warna border sesuai harapan sobat), sesudah ditambahkan css diatas pada element .postthumb img, akan terlihat menyerupai ini :

.postthumb img{border-radius:100px;border:6px solid #666}

Untuk memperindah buatlah hover pada .postthumb img , maksud dari hover yakni memberi efek pada ketika suatu element tersentuh kursor, disini kita akan memberi efek hover border pada .postthumb img, buatlah css menyerupai dibawah ini

.postthumb img:hover{border:6px solid #000}

(Ganti warna border di hover sesuai harapan 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.

Tweet

Subscribe to receive free email updates: