Jadi akan mendapatkan traffik yang lebih dan tentunya banyak manfaat untuk pemilik situs tersebut.
Berikut ini admin akan membagikan kode supaya popular post ini kelihatan lebih keren yaitu dengan tampilan warna warni. Berikut tutorial lengkapnya:
1. Masuk dasbor Blogger.
2. Pilih Template > Edit HTML.
3. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan).
4. Copy-paste kode berikut di atas kode ]]></b:skin>:
#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) ;}
5. Simpan template dan lihat hasilnya, kurang lebih seperti ini:
Demikian tutorial tentang membuat popular post yang berwarna-warni, apabila ada pertanyaan silahkan tinggalkan komentar. Jangan lupa bagikan juga melalui sosial media yang tersedia.
