Cara Membuat Populer Post keren di Blogger

Populer Post Akan menampilkan daftar postingan yang paling di lihat dan sering di lihat oleh pengunjung bisa disesuaikan di pengaturan widget itu sendiri misal 7 hari 30 hari dan jumblah daftar postingan bisa disesuaikan

ZTN INFORMATION akan memberikan Tutorial Coding Cara Membuat Populer Post Keren Di Blogger yang bisa kalian terapkan di blogger sobat

1). Masuk Ke Blogger
2). Pilih Tema Lalu Edit HTML
3). Cari kode ]]></b:skin> atau </style
dan paste kode di bawah ini Tepat di atas kode ]]></b:skin> atau </style>

#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}

---

Skin Populer Post ke 2

.widget .widget-item-control a img{border:none;width:20px!important;height:20px!important;padding:none;background:none;-moz-box-shadow:none;-webkit-box-shadow:none;-ie-box-shadow:none;box-shadow:none}
.sidebar .PopularPosts .widget-content ul li{padding:0;height:73px!important;overflow:hidden!important;list-style-type:none!important;list-style:none}
.sidebar .popular-posts ul{list-style-type:none!important;counter-reset:popcount;margin:0;padding:0!important}
.sidebar .popular-posts ul li:before{background:rgba(247,247,247,1);color:#000;content:counter(popcount,decimal);counter-increment:popcount;float:right;font-size:15px;line-height:20px;list-style-type:none;padding:0 6px 1px 5px;border-radius:0 0 7px 7px;position:relative;display:inline-block;box-shadow:-2px 2px 10px rgba(187,187,187,0.7);font-weight:400;top:0;right:1px;z-index:999999999999;border:solid #B5B5B5;border-width:0 1px 1px}
.sidebar .PopularPosts .item-thumbnail{float:left;margin:0!important}
.sidebar .PopularPosts img{padding-right:0!important;width:72px;height:72px;overflow:hidden!important;margin-right:0}
.sidebar .PopularPosts .item-title a:hover{background:#f6f6f6;color:#000}
.sidebar .PopularPosts .item-title a{background:#EAEAEA;color:#6E6E6E;display:block;font-size:14px;font-weight:400;line-height:normal;font-family:"Oswald",sans-serif;padding:10px 30px 0 78px;transition:all .4s ease-in-out;height:62px;text-decoration:none;border-bottom:1px solid #ccc}

Skin Populer Post Ke 3

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin: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:700;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}
.PopularPosts ul li:nth-child(1){background-color:#111}
.PopularPosts ul li:nth-child(2){background-color:#222}
.PopularPosts ul li:nth-child(3){background-color:#333}
.PopularPosts ul li:nth-child(4){background-color:#444}
.PopularPosts ul li:nth-child(5){background-color:#555}
.PopularPosts ul li:nth-child(6){background-color:#666}
.PopularPosts ul li:nth-child(7){background-color:#777}
.PopularPosts ul li:nth-child(8){background-color:#888}
.PopularPosts ul li:nth-child(9){background-color:#999}
.PopularPosts ul li:nth-child(10){background-color:#aaa}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-snippet{font-size:11px}

Skin Populer Post Ke 4

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin: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:700;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}
.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}
.PopularPosts .item-snippet{font-size:11px}

Skin Populer Post Ke 5

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;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:400;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:0;right:0;padding-right:0!important}
.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}
.PopularPosts .item-snippet{font-size:11px}
.widget-content ul li{margin:0;padding:6px 0;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:700;color:#FC0}

Skin Populer Post Ke 6

.popular-posts ul{padding-left:0;counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:.3em .6em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#292D30;color:#fff;position:relative;font-weight:700;font-family:georgia;float:left;border:2px solid #ddd;box-shadow:1px 2px 9px #666}
.popular-posts ul li{border-bottom:1px dashed #ddd}
.popular-posts ul li:hover{border-bottom:1px dashed #696969}
.popular-posts ul li a{text-decoration:none;color:#5A5F63}
.popular-posts ul li a:hover{text-decoration:none}

Skin Populer Post Ke 7

.PopularPosts ul{padding:0;margin:0}
.PopularPosts li{display:block;padding:3px 25px!important;margin:5px 0 0 20px;position:relative;border:1px solid #00aeef;transition:all .15s}
.PopularPosts a{color:#333;font-weight:700}
.PopularPosts li:before{content:"f0c1";position:absolute;top:6%;left:-5%;background:#00aeef;padding:10px;border-radius:50%;height:12px;width:12px;font:normal normal normal 14px/1 FontAwesome;color:#fff;text-align:center;border:1px solid #00aeef}
.PopularPosts .item-snippet{text-align:left;margin-bottom:3px;cursor:default;font-size:11px}
.PopularPosts .item-title{text-align:center}
.PopularPosts li:hover{background:#00aeef;color:#fff;border:1px solid #d8d9da}
.PopularPosts li:hover a{color:#fff}
.PopularPosts li:hover:before{border:1px solid #f5f8fa}
.item-content .item-thumbnail{display:none}

Skin Populer Post Ke 8

#PopularPosts1 ul{padding:10px 0;margin-top:-15px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

Klik Simpan
cara memasangnya semuanya sama dengan cara di atas tinggal kalian sesuaikan Skin Populer Post mana yang kalian suka

itulah Cara Membuat Populer Post Keren Di blogger

Jika Sobat Merasa Tidak Keberatan Silahkan Berikan Respon yang ada di bawah ini atau Tinggalkan Saran & Kritik atau masukan pendapat di kolom komentar