Cara Membuat Popular Post Keren Berwarna di Blogger

Cara Membuat Popular Post Keren Berwarna di Blogger - Popular post adalah widget yang menampilkan artikel paling populer atau sering dibaca oleh pengunjung. Widget ini biasanya dipasang pada sidebar blog, popular post berfungsi untuk memberikan informasi kepada pengunjung tentang artikel apa saja yang sering dibaca, tentu dapat menarik perhatian pengunjung untuk membaca artikel tersebut.

Widget popular post secara default memiliki tampilan yang sederhana dan simple, namun ternyata banyak para blogger yang sudah memodifikasi tampilan popular post dengan sentuhan warna-warni. Tentu ini akan terlihat sangat menarik dimata pengunjung sehingga berpeluang besar mengundang klik untuk membaca artikel popular post.

Koleksi Popular Post Keren Berwarna di Blogger

Kali ini saya akan berbagi beberapa macam tampilan popular post keren dan cantik untuk menghiasi tampilan blog kita. walaupun banyak variasinya, tampilan popular post ini tidak membuat blog menjadi lambat sehingga aman untuk seo blog anda.

1. Popular Post Warna-Warni Paling Populer Keren

Popular Post Warna-Warni Paling Populer Keren di blog
Kode Popular Post

/*Popular Post SEO Indigo*/
.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 {color:#444 !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;}
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}

Widget popular posts yang pertama ini terlihat kalem namun elegan dengan kontras warna yang sedap dipandang mata. Jika ingin warna yang lebih mencolok silahkan pilih versi yang kedua dibawah ini.

2. Widget Popular Post Berwarna di Blogspot 

Widget Popular Post Berwarna di Blogspot
Kode Popular Post
/*Popular Post SEO Indigo*/
.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 ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!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}
Popular post yang kedua ini lebih dominan menggunakan warna terang dan mencolok, sangat cocok untuk meramaikan tampilan blog agar lebih menarik.

3. Popular Post Keren Berwarna di Blogger (evo magz)

Popular Post Keren Berwarna di Blogger

Kode Popular Post
/*Popular Post SEO Indigo*/
.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;}
Popular post ini adalah hasil buat pemikiran Mas Sugeng yang dituangkan pada templatenya yang cukup terkenal yaitu Evo Magz. Jika anda suka, popular post keren ini bisa menjadi pilihan.

4. Popular Post Keren Modifikasi Warna-Warni

cara membuat popular post warna warni di blogspot

Kode Popular Post
/*Popular Post SEO Indigo*/
#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; margin: 0; min-height: 30px; orphans: 2; padding: 0px 0 0 40px; 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;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:100%} 
#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:100%} 
#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:100%} 
#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:100%} 
#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:100%} 
#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:100%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:100%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:100%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:100%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:100%} 
#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}


Cara Memasang Popular Post Keren Berwarna di Blog

  1. Masuk akun blogger anda
  2. Masuk menu Tema kemudian edit HTML
  3. Kemudian cari kode ]]></b:skin> lalu letakkan kode yang sudah anda pilih tepat di ATAS kode ]]></b:skin>.
  4. Setelah memasang kode diatas, selanjutnya masuk halaman Tata Letak >> Tambahkan Gadget >> pilih Entri Populer. "Hilangkan centang pada thumbnail gambar dan cuplikan"
    Cara Memasang Popular Post Keren Berwarna di Blog
  5. Terakhir simpan template dan lihat hasilnya.
Bagaimana mudah bukan memasang popular post keren di blog? tapi namanya manusia sudah pasti kadang belum paham, jika kurang jelas silahkan tinggalkan pessan pada kolom komentar yang sudah tersedia. 

Selamat mencoba. GRATIS!!!
0 Komentar untuk "Cara Membuat Popular Post Keren Berwarna di Blogger"

Berkomentarlah sesuai dengan topik dan tidak menaruh link aktif. Terima kasih atas perhatiannya.