Loading...
ucapan

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda




Monday, February 23, 2015

Membuat Thumbnail Post Ala Kang Ismet

Post Generator PRO
Plugin Wordpress POST GENERATOR PRO sederhana tapi powerful, Membuat ribuan artikel blog hanya dalam sehari saja. Tanpa masalah Duplicate Content.
Rugi jika tidak memilikinya walau belum punya Hosting dan blog wordpress, akibat penjualannya sudah berakhir. Miliki secepatnya... Sangat bagus digunakan untuk mengupgrade BACKLINK ke blog utama demi menghasilkan Duit Or Dollar bagi pemain Adsense, He..
Thumbnail Post ala KI
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 :

Contoh sebelumnya

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 :

Contoh Sesudah

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.
Title : Membuat Thumbnail Post Ala Kang Ismet
Description : Thumbnail Post Ala KI Membuat Thumbnail Post Ala Kang Ismet - Halo sobat, kali ini saya akan memberikan Tutorial trik Membuat thumbn...

35 komentar

Boleh Minta Thread Comments Nya :v

kalau dibuat beda warna tiap label gimana ya?

keren sob...mantappp...

keren gan ,
semoga sukses deh ini blog :)

ijin nyimak dulu gan....

jadi menarik ya, save as sob...

makasih mas sudah berbagi saya coba pelajari dulu ya :D

bisa dishaare gk nih tempel nya

wow, mantaps deh bisa NiRu tempe kang ismet haha

Itu Sih Tinggal Pake Javascript :D

This comment has been removed by the author.

Terima kasih nih izin praktek langsung mas

kok saya belum bisa yah cuma dapat bulatannya saja :D

Wah Gan Bisa Lebih Rinci Ndak Ya? Makin Bingung Ini oakowakwaokwa Tapi Kereen

kreaksi juga mas, keren :-bd

mudah sob, buat javascript atau dengan tag condition...

Nah Ini nih yg saya cari cari selama ini dan saya ingin sekali membuat thumbnail post ala KI tapi saya tak suka karena dapat membuat blog menjadi lambat :D , SEMOGA BERMANFAAT fvker-project321.blogspot.com

Wah keren nih mas, kang ismet banget

Ini banget yg gw cari, thanks sob.. Udah jadi :D http://transfosad.blogspot.com

Ini banget yg gw cari, thanks sob.. Udah jadi :D http://transfosad.blogspot.com

Tampilannya keren gan.
Semoga sukses!!

Jangan lupa comeback ya: http://catatan-lingga.blogspot.com/

gan klo kita membaut template dari awal dan ingin seperti kang ismet langkah awalnya gmn ? apa langsung ikut tutor di atas ?

mantap mas, akan saya coba terapkan diblog..
Terima kasih ya sudah share :)

blogwalking TeamProbuxIndonesia

Salam kenal mas, sepertinya penggemar Kang Ismet ya ? hehe

Keren kak :D
tapi kalau boleh tau kalau mau ngasih label di pojoknya gmana ya ?? :/
nih, saya juga pake template kakak http://elind-education.blogspot.com/ =====>> coba di cek ya kak, saya pengen banget soalnya :D

gan, link blog agan udah ane pasang di blog ane.. dan juga blog agan udh ane follow. Follow back yah gan :) makasih

Trus cara menjadikannya responsive gimana mas?

kak itu di copas kemana? ke template --> html? atau tata letak --> + widget --> html/javasripct?

Bagus gan artikelnya. Ane jadi terbantu.

Btw kunjungi blog ane:
http://lantingrusak.blogspot.co.id/

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.