Cara Membuat Widget Popular Post Keren dan Berwarna - [Bergambar]


Cara Membuat Widget Popular Post Warna-warni


Hai bro kali bloggku akan membagikan sedikit tips nih buat para blogger yang ingin mempercantik tampilan blognya dengan membuat Widget Popular Postnya Berwarna-warni dan tentunya bergambar yang membuat tampilan blog kalian semakin keren.

Disini saya akan memberikan 4 style yang bisa kalian coba satu-persatu, dan tentunya cara memasangnya tidak begitu sulit kok, asalkan kalian mengikuti arahan yang saya berikan, ok langsung saja ke tahap pemasangannya.

Cara Pasang Widget Popular Post



  • Silakan kalian masuk ke Blogger.com

  • Masuk ke bagian Tema => Edit Html, terus kalian cari kode </head>

  • Jika sudah ketemu silakan kalian pilih salah satu kode CSS dibawah ini, terdapat 4 kode CSS kalian pilih salah satunya saja yah, jika kurang cocok silakan pilih yang lainnya.

  • Copy kode CSS yang kalian ingin gunakan dan letakkan diatas kode </head>

  • Berikut beberapa kode CSS untuk widget popular post yang akan kalian gunakan nantinya.


Contoh 1

 <style type='text/css'> 
/* Widget popular Post1 */ 
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;} 
.popular-posts ul li:nth-child(1){background-color:#f44336;} 
.popular-posts ul li:nth-child(2){background-color:#e91e63;} 
.popular-posts ul li:nth-child(3){background-color:#9c27b0;} 
.popular-posts ul li:nth-child(4){background-color:#673ab7;} 
.popular-posts ul li:nth-child(5){background-color:#3f51b5;} 
.popular-posts ul li:nth-child(6){background-color:#2196f3;} 
.popular-posts ul li:nth-child(7){background-color:#03a9f4;} 
.popular-posts ul li:nth-child(8){background-color:#00bcd4;} 
.popular-posts ul li:nth-child(9){background-color:#009688;} 
.popular-posts ul li:nth-child(10){background-color:#4caf50;} 
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;} 
.popular-posts ul li a:hover{color:#EEE;} 
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;} </style>

Contoh 2

 
<style type='text/css'>
/*Popular Post 2*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#00bcd4;}
.popular-posts ul li:nth-child(2){background-color:#009688;}
.popular-posts ul li:nth-child(3){background-color:#4caf50;}
.popular-posts ul li:nth-child(4){background-color:#8bc34a;}
.popular-posts ul li:nth-child(5){background-color:#cddc39;}
.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7){background-color:#ffc107;}
.popular-posts ul li:nth-child(8){background-color:#ff9800;}
.popular-posts ul li:nth-child(9){background-color:#ff5722;}
.popular-posts ul li:nth-child(10){background-color:#795548;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style> 

Contoh 3

 &lt;style type='text/css'&gt;
/*Popular Post 3*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
.popular-posts ul li:hover{background-color:#EEE;}
.popular-posts ul li a{color:#424242;text-decoration:none;}
.popular-posts ul li a:hover{color:#212121;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
&lt;/style&gt; 

Contoh 4

 <style type='text/css'>
/*Popular Post 4*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
.popular-posts ul li:hover{background-color:#262626;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style> 

  • Jika sudah simpan tema.

  • Masih di blogger, sekarang kalian masuk ke Tata Letak =>  Tambahkan Widget => Postingan Popular  (untuk posisi widget saya sarankan dibawah yah sesudah postingan artikel) 

  • Simpan, dan lihatlah hasilnya. Tara sekarang tampilan blog kalian terlihat keren dan Berwarna-warni.


Bagaimana mudah bukan Cara Membuat Widget Popular Post Keren dan Berwarna - [Bergambar] ?  Ok bro sampai disini pembahasan saya kali ini. Jika ada yang kurang di mengerti silakan kalian tanyakan pada kolom komentar dibawah.


1 Response to "Cara Membuat Widget Popular Post Keren dan Berwarna - [Bergambar]"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel