Membuat Thumbnail Post Ala Kang Ismet

Thumbnail Post Ala KI

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

Sebelumnya saya minta maaf kepada Kang Ismet, karena telah melanggar UUD ala Kang Ismet :D.

Tahap Awal Pembuatan

Disini saya hanya memberikan CSS untuk men-design Thumbnail Post agar nampak mirip layaknya milik Kang Ismet, Sebenarnya Simpel saja cara pembuatannya, yang dibutuhkan hanyalah warna background pada gambar thumbnail, dan berikan CSS border-radius pada gambar thumbnail.

Secara Rinci

Sekarang sudah banyak Template yang sudah memiliki fitur yang kita inginkan, seperti template dengan readmore yang sudah siap,breadcrumbs, thumbnail otomatis, dan Lain-lain.

Element yang saya gunakan pada thumbnail post ini adalah .post-thumbnail , dan dibungkus dengan .post-thumbnail-area (pembungkusan tidak terlalu penting) , dibawah ini adalah 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 membuat gambar menjadi seperti ini :

Gambar yang dibuat dari CSS diatas, membuat gambar yang hanya simple saja, lalu dibuat CSS seperti berikut (CSS berikut adalah CSS thumbnail post Blog saya sendiri yang telah saya 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 membuat gambar menjadi :

Simpel bukan ?

Kesimpulannya hanya membuat css seperti ini .post-thumbnail img{ dan .post-thumbnail img:hover{ , dan memberikan css background:#e15c5c pada .post-thumbnail, dan memberikan effect css seperti 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 keinginan sobat), lalu pada img (gambar) buatlah gambar tersebut menjadi seperti lingkaran, hanya dengan menambah css border-radius:100px, maka akan terlihat:

.postthumb img{border-radius:100px}

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

border:6px solid #666

(Ganti warna border sesuai keinginan sobat), setelah ditambahkan css diatas pada element .postthumb img, akan terlihat seperti ini :

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

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

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

(Ganti warna border di hover sesuai keinginan sobat), simpel saja bukan sobat ?

sekian dari saya, tentng Cara Membuat Thumbnail Post Ala Kang Ismet, maaf apabila ada kesalahan yang saya perbuat, terima kasih atas kunjungannya, Wassalam.