3 Css Keren Untuk Mempercantik Tampilan Popular Post Di Blog

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

Salah satu faktor yang besar lengan berkuasa terhadap tinggi rendahnya pageview sebuah blog yakni Popular Post. Popular post yakni contoh ataupun tumpuan kepada pengunjung perihal artikel-artikel yang paling banyak dibaca didalam blog.

Jika blog dibuka melalui perangkat desktop, biasanya widget Popular post berada disamping kiri atau kanan, sedangkan kalau 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 sampai warna dan bentuk tampilannya. Contoh judul popular post yang memikat pengunjung yakni Paling banyak dibaca, Artikel Hot, Jangan lewatkan, Trending Topik dan lain sebagainya.

Sedangkan tampilan Populart post itu sendiri sanggup di desain memakai CSS yang sanggup diaplikasikan dengan sangat mudah. Berikut ada 4 tampilan Popular Post keren untuk blog yang sanggup 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 aba-aba yang ingin anda cari kemudian enter. Dalam kasus ini aba-aba tersebut adalah ]]> </ b: skin>.

Jika sudah ketemu, pastekan salah satu aba-aba CSS yang anda suka dibawah ini sempurna 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 yakni 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 yakni 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 ketika menyimpan template, periksa kembali apakah sudah benar posisi peletakan aba-aba atau sanggup beritahu admin di komentar.

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