Cara membuat Popular post keren warna warni

Oleh Mashudi

Tuesday, 15 July 2014

cara membuat popular post keren warna warni

Assalamualaikum blogger onnetz.
kemarin kita sudah membahas tentang cara mudah membuat template blogger sendiri. serta bagi para bloggers yang merasa kotak komentarnya tidak muncul atau tidak tampil silahkan diperiksa disini. dan apabila template yang mendukung serta semuanya mendukung. termasuk SEO, dan komponen lainnya. pasti akan membuat pengunjung akan merasa betah cari informasi di web atau blog tersebut.
dan sekarang kita akan membahas bagaimana membuat popular post menjadi warna warni.

Widget popular post. sebenarnya sudah menjadi widget bawaan di blogger. yang mana tugasnya seperti namanya. untuk menampilkan posting atau tulisan paling populer dibaca di blog atau web tersebut. namun disini kita akan mengubahnya menjadi lebih indah dilihat. enak dipandang. dan pastinya tetap menjadikan blog kita tampil dinamis tanpa memberatkan.
dan disini kita hanya akan menambahkan kode CSS saja. namun karena kode CSS ini tampilan widget ini akan berubah menjadi indah seperti pada gambar. dan contoh di blog ini.

langsung saja kita lihat langkah-langkahnya :
1. Buka Blogger anda.
2. Buka Tampilan > HTML
3. Cari kode ]]></b:Skin> kemudian anda taruh kode dibawah ini tepat diatas kode ]]><b:skin>

#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:97%}
#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;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

4. setelah anda pasang. sekarang buka tata letak
5. tambah widget
6. cari popular post
7. selesai.

selamat anda berhasil menambahkan widget popular post warna warni. dan sekarang blog anda semakin cantik dan keren.
semoga dengan tutorial ini membuat anda semakin semangat untuk memperindah blog anda.

Terima Kasih Atas Kunjungan Anda
DITULIS OLEH Mashudi
Jika mengutip harap berikan link yang menuju ke artikel Cara membuat Popular post keren warna warni ini. Jika artikel ini bermanfaat, ajak kawan mu untuk ambil manfaatnya. Terima kasih atas perhatiannya, baca juga yang lainnya yah.

Tag : Tips dan tricks Blogger

Translate all