cara membuat Entri Populer warna warni

cara membuat Entri Populer warna warni, Cara Membuat Widget Populer Post Warna-Warni, Cara Membuat Entri Populer Mode Kolom Warna Warni, Membuat Widget Popular Post Warna-Warni, Cara Membuat Popular Post Warna Warni Di Blogger, Cara Membuat Widget Popular Post Warna Warni, Cara Membuat Widget Popular Post Warna Warni Di Blog,,cara membuat Entri Populer lebih asik, cara membuat Entri Populer berwarna, cara membuat Entri Populer tampil lebih ok, cara membuat Entri Populer lebih keren, cara membuat Entri Populer lebih menarik..

pada posting kali ini mas seem akan berbagi bagaimana cara membuat Entri Populer warna warni.. mungkin dikalangan para blogger toritorial ini sudah basi atau kadarluarsa tapi mas seem akan tetap nekat mempostingkannya heheheee.. kana hal ini masih sangat menarik n satu lagi yaitu karna permintaan dari beberapa temen yang masih kebingungan hehhee.. Mas arun, yanto.. moga postingngan kali ini dapat menjawab permasalahan nya hehehe...

langsung ke TKP :

caranya >>

1. Login ke http://www.blogger.com/home
2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, boleh memakai GAMBAR tapi saya menyarankan untuk tidak memakai cuplikan agar terlihat lebih rapi. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja.
3. Klik Simpan.
4. Kemudian kamu klik Template -->
5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode 
   ]]></b:skin> Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode 
   ]]></b:skin> 
   (tekan Ctrl+f untuk memudahkan pencarian)


/* Rainbow Popular repost by http://situs9.blogspot.com*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular repost by http://situs9.blogspot.com*/

6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe selamat mencoba n moga sukses..

cara membuat Entri Populer warna warni

Artikel Terkait