Cara membuat popular post warna warni di sidebar blog

cara membuat popular post warna warni di sidebar blog 

Cara membuat widget popular post warna warni – Penampilan blog yang kece tentu membuat para pengunjung merasa tidak bosan dengan desain blog yang sobat gunakan.  Sobat bisa melakukan perombakan desain ini di setiap element yang ada di blog sobat. 


Salah satu widget yang paling sering di ubah tampilannya yaitu widget popular post. 

Popular post adalah sebuah widget yang menampilkan daftar artikel yang paling sering di lihat oleh pengunjung blog sobat. Manfaat widget ini sangat besar untuk mendongkrak jumlah page view blog sobat. 

Namun tampilan popular post yang biasa baisa saja kadang membuat para pengunjung merasa kurang nyaman, dan kurang tertarik untuk mengklik judul yang ada di dalam widget tersebut. 

Mungkin sobat sudah sering melihat desain popular post yang warna warni ini, tapi masih belum tahu bagaimana cara untuk membuatnya. 

Caranya cukup mudah sobat hanya perlu menambahkan kode CSS ke dalam template blog sobat, fungsinya yaitu untuk memberikan customisasi terhadap tampilan widget tersebut.

Dalam tutorial cara membuat popular post warna warni ini, sobat bisa memilih antara 3 desain berikut ini, pilih sesuai selera sobat

Cara memasang widget popular post

Sebelum sobat mengubah tampilan popular postnya, terlebih dahulu sobat harus memasang widget popular post (khusus bagi sobat yang belum menerapkan popular post di dalam blog) bagi yang sudah bisa langsung ke cara mengubah tampilan popular post keren warna warni 

1. Login terlebih dahulu ke halaman dashboard blogger sobat 

2. Kemudian masuk ke layout > add gadget 

3. dan pilih popular post. 

Sampai disini sobat telah berhasil memasang widget popular post, namun dengan tampilan yang standar. Untuk mengubah agar tampilannya menjadi warna warni sobat bisa mengikuti langkah langkah berikut ini. 

Cara membuat widget popular post warna warni

1. setelah masuk ke halaman dashboard blogger, 

2. Kemudian masuk ke halaman template > edit template 

3. Selanjutnya copy salah satu kode css dibawah dan paste tepat di atas kode ]]></b:skin> atau</style> 

4. Kemudian tekan save 

Tampilan desain pertama popular post warna waerni

desain pertama popular post warna warni

kode CSS desain pertama

/*----- TAB POPULER -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Tampilan desain kedua popular post warna warni

desain kedua popular post warna warni

kode CSS desain kedua

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li aimg{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative} .PopularPosts ul lia{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!important} .PopularPostsul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none} .PopularPosts ulli:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */ 

.PopularPosts ul li:nth-child(1){background-color:#f1c40f;} .PopularPosts ul li:nth-child(2){background-color:#f39c12;} .PopularPosts ul li:nth-child(3){background-color:#2ecc71;}.PopularPosts ul li:nth-child(4){background-color:#27ae60;} .PopularPosts ul li:nth-child(5){background-color:#e67e22;} .PopularPosts ul li:nth-child(6){background-color:#d35400;}.PopularPosts ul li:nth-child(7){background-color:#3498db;} .PopularPosts ul li:nth-child(8){background-color:#2980b9;} .PopularPosts ul li:nth-child(9){background-color:#ea6153;}.PopularPosts ul li:nth-child(10){background-color:#c0392b;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

Tampilan desain ketiga popular post warna warni

desain ketiga popular post warna warni

kode CSS desain ketiga

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;} .PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;} .PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;} .PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;} .PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:normal;color:#000 !important;text-decoration:none;} .PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important} .PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important} .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important} .PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important} .PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important} .PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important} .PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important} .PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important} .PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important} .PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important} .PopularPosts .item-thumbnail {margin:0 0 0 0;} .PopularPosts .item-snippet {font-size:11px;} .widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed} .widget-content ul li:last-child{border-bottom:medium none !important} .widget-content ul li a{color:#333} .widget-content ul li a:hover{color:#C80441} .item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}

Nah itu tadi tutorial cara mengubah tampilan popular post warna warni, gimana mudah kan,  sobat juga bisa mengubah warna nya sesuai dengan selera sobat, tinggal mengganti kode warna yang ada misalnya #A51A5D sobat ganti menjadi #AEAEAE atau kode warna apapun sesuai selera. biar blog sobat semakin cantik happy blogging !!!.