Cara Membuat Blog Dengan Popular Posts Aneka Warna

DINAMIKA | Membuat Blog Dengan Widget Popular Posts Aneka Warna - Buat blogger pemula yang ingin mempercantik dan menambah konten menarik di blog dapat membuat widget Popular Posts beraneka warna.

Cara membuat blog lebih menarik dapat dilakukan dengan banyak cara, diantaranya dengan menambah beberapa widget. Tujuannya adalah selain mempercantik desain juga dapat meningkatkan daya tarik bagi orang yang berkunjung ke blog. Salah satu widget yang dapat ditampilkan di blog adalah widget Popular Posts, yang berisi posting artikel-artikel top yang paling sering dibaca orang. Widget Popular Posts dapat pula ditampilkan dengan banyak gaya atau style, salah satunya dengan efek pelangi atau dikenal dengan Rainbow Popular Posts yang menampilkan banyak warna. 

Membuat widget Rainbow Popular Posts yaitu sebagai berikut :

1. Masuk ke dashboard, lalu klik design. Setelah itu pada menu layout, klik add widget Popular Post, atur sedemikian rupa terserah mau ditaruh di sidebar mana. Lebih baik diberikan thumbnail dan tidak diberikan tulisan (bisa diatur menurut selera).

2. Kemudian catat widgetid nya, disini widget ID saya adalah PopularPosts1. Jika sudah, masuklah ke menu template > Edit HTML > cari kode ]]></b:skin>

3. Letakkan kode dibawah ini, tepat diatas kode ]]></b:skin> 

/* Rainbow Popular Post Style Start */

#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 Post Style End */ 

4. Klik Pratinjau terlebih dahulu, jika sudah tidak terjadi error pada widget maupun template, silahkan klik simpan untuk menyimpan perubahannya.

Semoga widget popular posts ini bisa menambah warna di blog Anda, sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat para pembaca merasa bosan. Bila ingin mengeksplorasi lagi mengenai widget popular posts, silahkan baca Cara Membuat Blog Menarik Dengan Popular Posts Unik dan Cara Membuat Blog Menarik Dengan Popular Posts Animasi 3 Dimensi.

(sumber: http://ravictory.blogspot.com/2013/04/cara-membuat-widget-popular-posts-warna.html )