Kumpulan Widget Populer Post Keren Responsif Untuk Blogger


Cara Membuat Widget Populer Post Keren dan Responsif Di Blog - Widget populer post pada blog berfungsi untuk memperlihat postingan yang paling banyak dilihat atau memiliki pengunjung yang paling banyak dalam jangka waktu tertentu.

Dimana dalam populer post anda bisa menampilan artikel terpopuler selama seminggu, sebulan ataupun selama ini, sehingga pengunjung akan bisa melihat postingan yang paling diminati di blog anda dan kemungkinan pengunjung itu akan tertarik juga untuk melihat karena penasaran.




Kumpulan Widget Populer Post Keren Responsif Untuk Blogger
Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

Widget populer post biasanya sudah tersedia secara default pada setiap template yang anda gunakan. Namun demikian hingga saat ini anda bisa memodifikasi sendiri tampilan populer post pada blog anda sesuai dengan keinginan anda.

Baca juga:

Cara Membuat Populer Post Keren Responsif Untuk Blogger

Cara pertama yang anda lakukan yaitu mengedit template melalui edit HTML yang akan saya uraikan seperti di bawah ini, ikuti intruksi cara pemasangan nya:

1. Langkah pertama mauk de Dashboar blogspot kemudian Klik Template>> Edit HTML

2. Lalu Cari kode </head> untuk mempermudah silahkan gunakan pencarian menggunakan tombol CTRL+F

3. Setelah ketemu Kode </head> di atas kemudian tempelkan kode script di bawah ini tepat di atas kode ,</head> tersebut

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

Dibawah ini saya bagikan beberapa widget populer post keren responsif yang bisa anda coba pada blog anda sehingga akan memberikan nuansa tampilan yang enak dipandang.

Populer post bernomor dengan thumbnail

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger


 /* Popular Post */ .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;} .profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}

Populer post simple dengan nomor tanpa thumbnail

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

 /* Popular Post */

#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}

#PopularPosts1 ul li{padding:8px 0 11px!important;margin:0;list-style:none;font-size:11px;line-height:normal}

#PopularPosts1 ul li:first-child{border-top:none}

#PopularPosts1 ul li:last-child{border-bottom:none}

#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13.5px;color:#1fa67a;display:block;font-weight:500;padding:0 5px 0 0;margin:0;line-height:1.4em;overflow:hidden;}

.popular-posts ul{padding-left:0;counter-reset:trackit}

.popular-posts ul li{border-bottom:none;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}

.PopularPosts ul li:before{content:counters(trackit,&quot;.&quot;);padding:0 .1em 0 10px;font-size:18px;font-weight:500;color:#1fa67a;float:left;margin-right:10px}

.PopularPosts li:nth-child(odd){background:transparent}

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}

#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}

/* Popular Post End*/


Populer Post Warna Warni Bernomor Seperti Evomagz

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger



.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:0!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}

Populer Post Seperti Vio Magz

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
 margin:0 0;
 padding:0 0;
 list-style:none;
 border:none;
 outline:none;
}
.PopularPosts .widget-content ul {
 margin: 0;
 list-style:none;
 counter-reset:num;
}
.PopularPosts .widget-content ul li img {
 display: block;
 width: 70px;
 height: 70px;
 float: left;
}
.PopularPosts .widget-content ul li {
 margin: 0 0 10px;
 counter-increment: num;
 position: relative;
}
.PopularPosts ul li:last-child {
 margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
 font-weight: 500;
 text-decoration: none;
 color: #444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
 color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before {
 font-size: 30px;
 font-weight: 500;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 background: linear-gradient(#49ACE1, #fff);
 width: 26px;
 padding-top: 10px;
 text-align: center;
 content: counter(num);
 color: #fff;
}
.PopularPosts ul li > a {
 display: block;
 padding-left: 32px;
 min-height: 45px;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
 margin-left: 32px;
}
.PopularPosts .item-title {
    line-height: 1.6;
 margin-right: 8px;
 min-height: 40px;
}
.PopularPosts .item-thumbnail {
 float: left;
 margin-right: 8px;
}
.PopularPosts .item-snippet {
    line-height: 1.6em;
 font-size: 14px;
 margin-top: 8px;
}

Populer Post dengan Thumbnail Bergerak

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

#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:97%}
#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;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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}
#PopularPosts1 img:hover{border-radius:0 0 0 0;-moz-transform:scale(1.2) rotate(-711deg);-webkit-transform:scale(1.2) rotate(-711deg);-o-transform:scale(1.2) rotate(-711deg);-ms-transform:scale(1.2) rotate(-711deg);transform:scale(1.2) rotate(-711deg)}

Pupuler Post Dengan Efek Animasi

Kumpulan Widget Populer Post Keren Responsif Untuk Blogger

.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:10;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255, 255, 255, 0.88);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:11;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Silahkan anda pilih salah satu widget populer post diatas yang sesuai dengan keinginan anda. Pastikan hapus terlebih dahulu widget populer post apabila sebelumnya templte anda sudah berisi widget populer post.

Penutup: Itulah Cara Membuat Populer Post Keren Responsif di Blog yang bisa saya bagikan pada postingan kali ini, selamat mencoba.
bm

Hanya seorang manusia biasa yang ingin berbagi pengalaman dan mencoba hal - hal baru.

Post a Comment

silahkan berikan komentar anda dan saran terbaik untuk kemajuan blog ini.