Kumpulan Widget Populer Post Keren Responsif Untuk Blogger
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 |
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 Featured Post di Homepage Blog
- Cara Mengganti Author dan ID Penulis di Postingan Blogger
- 2 Cara Membuat Blockquote Keren Dengan CSS Di Blog
- Cara Membuat Simbol Ceklis (√) Secara Otomatis Di Setiap Postingan Blog
- Cara Membuat Daftar Isi Di Artikel Blogger
- Cara Membuat Link Hidup Di Komentar Blog Dengan Mudah
- Cara Membuat Sitemap Blogger Dengan Mudah 100% Work
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
/* 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
/* 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,".");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
.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
.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
#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
.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.
seconds.
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !