Membuat Auto Readmore Thumbnail tanpa Javascript

Membuat Auto Readmore Thumbnail tanpa Javascript- Itu Tips Yang Kita Bahas Kali Ini,Membuat Auto Readmore Thumbnail tanpa Javascript Seperti Kang Ismet ,Siapa Yang Tidak Mau Bukan ?,Saya Saya Pake Kalo Ga Percaya Lihat Di Home ,Okey Jika Kalian Juga Mau silahkan Ikuti Tutor Nya

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
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}

Sekian Dulu tips Dari Saya,Jika Belum Mengerti Silahkan Comment