3 CSS Keren untuk Mempercantik Tampilan Popular Post di Blog

Unknown Maret 10, 2017

Cara mempercantik popular post blog. Salah satu cara yang memikat daya tarik pengunjung untuk betah lama-lama di blog adalah tampilan blog itu sendiri. Oleh karena itu buatlah tampilan blog seindah dan senyaman mungkin, jangan juga terlalu berlebihan karena akan membuat pengunjung merasa risih.

Salah satu faktor yang berpengaruh terhadap tinggi rendahnya pageview sebuah blog adalah Popular Post. Popular post adalah acuan ataupun referensi kepada pengunjung tentang artikel-artikel yang paling banyak dibaca didalam blog.

Jika blog dibuka melalui perangkat desktop, biasanya widget Popular post berada disamping kiri atau kanan, sedangkan jika dilihat melalui perangkat mobile / Hp maka Popular post berada dibagian bawah.

Desain widget Popular post sedemikian rupa guna memancing pengunjung untuk membaca artikel yang ada di Popular post. Mulai dari judul Popular post hingga warna dan bentuk tampilannya. Contoh judul popular post yang memikat pengunjung adalah Paling banyak dibaca, Artikel Hot, Jangan lewatkan, Trending Topik dan lain sebagainya.

Sedangkan tampilan Populart post itu sendiri bisa di desain menggunakan CSS yang bisa diaplikasikan dengan sangat mudah. Berikut ada 4 tampilan Popular Post keren untuk blog yang bisa anda coba:

3 CSS Keren untuk Mempercantik Tampilan Popular Post di Blog

Bagi yang belum tahu cara mengganti desain / CSS Popular Post Blogger. Ikuti langkah-langkah berikut ini:

Buka Template, klik edit HTML

Cari ]]> </ b: skin>. Untuk lebih mudah, tekan Ctrl + F didalam laman edit HTML pastekan kode yang ingin anda cari lalu enter. Dalam kasus ini kode tersebut adalah ]]> </ b: skin>.

Jika sudah ketemu, pastekan salah satu kode CSS yang anda suka dibawah ini tepat diatas kode ]]> </ b: skin>

1. Evo Magz tebaru Style

Kode CSS:

 ///* POPULAR POST WIDGET - http://gudangtipsgadget.blogspot.co.id/ */
.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 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}

.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}

.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

2. Kang Mousir Style

Kode CSS:

 ///*Custom Popular Post - http://gudangtipsgadget.blogspot.co.id/*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts img{float:left;margin:0 5px -10px 0;display:inline;opacity:10}
.PopularPosts a{color:#fff!important;}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;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}

3. No Name CSS 1 Style

NOTE : Warna judul postingan adalah hitam, judul post diatas sengaja dihilangkan

Kode CSS:

 ///* Set color and level http://gudangtipsgadget.blogspot.co.id/*/
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:1%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:1%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:1%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:1%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:1%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:1%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:1%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:1%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:1%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

4. No Name Css 2 Style

NOTE : Warna judul postingan adalah putih, judul post diatas sengaja dihilangkan

Kode CSS:

 ///* CSS Popular Post - http://gudangtipsgadget.blogspot.co.id/*/
.PopularPosts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}
.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.popular-posts a{color:#fff}
.popular-posts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}
.PopularPosts ul li{padding:3px 7px;border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}

Jika terdapat kesalahan saat menyimpan template, periksa kembali apakah sudah benar posisi peletakan kode atau bisa beritahu admin di komentar.

Demikian cara desain popular post blog dengan css keren. Semoga bermanfaat.