8 Style Widget Popular Posts Keren Terbaru Untuk Blogger

Baca Juga

8 Style Widget Popular Posts Keren Terbaru Untuk Blogger - Buat kamu yang suka ngeblog mungkin sudah tahu dengan yang namanya widget popular posts. Ya, widget popular posts merupakan salah satu widget yang harus ada dalam sebuah blog. Karena widget popular posts memiliki peranan yang cukup penting bagi sebuah blog untuk meningkat trafik pengunjung pada sebuah blog.

Widget popular posts sendiri akan menampilkan daftar posting yang paling sering dilihat oleh pengujung yang bisa disesuaikan atau diurutkan berdasarkan 7 hari terakhir, 30 hari terakhir, tahun lalu, ataupun setiap saat.

Karena begitu pentingnya widget ini dalam sebuah blog, untuk itu saya akan membagikan widget popular posts dengan tampilan yang keren untuk blog kamu yang tentunya bisa menarik perhatian pengunjung dan juga meningkatkan trafik. Berikut penjelasannya.

Cara Memasang Widget Popular Post Ke Dalam Blog

Sebelum memodifikasi tampilan widget popular posts, pastikan widget popular posts di blog kamu sudah aktif. Jika belum aktif, kamu bisa mengikuti langkah - langkah yang ada pada gambar GIF berikut ini untuk mengaktifkan widget ini ke blog kamu.

Untuk pengaturan widget popular posts nya bisa kamu atur sesuai dengan keinginan kamu.

Cara Membuat Tampilan Widget Popular Posts Menjadi Keren

Catatan :
Jika ditemplate blog kamu sudah terpasang atau sudah ada CSS Popular Post, maka hapus terlebih dahulu CSS tersebut atau menggantinya dengan CSS Popular Posts berikut ini. Agar tidak terjadi kesalahan saat menyimpan template.

Widget Popular Posts Warna Warni ( Style 1 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></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} 

Widget Popular Posts Dengan Tampilan Elegan ( Style 2 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Posts Dengan Tampilan Hitam Putih ( Style 3 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Posts Keren Warna Warni Ala Kang Mousir ( Style 4 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Post Keren Warna Warni Ala Mas Sugeng ( Style 5 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Posts Keren With Number ( Style 6 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Posts Keren ( Style 7 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Widget Popular Posts Keren With Images ( Style 8 )

Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.

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

Setelah itu, tambahkan kode JavaScript berikut ini tepat di atas </body>.

<script type='text/javascript'> //<![CDATA[  function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(//s72-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400); //]]> </script>

Catatan :
Jika sudah, jangan lupa pilih "Simpan Template".

Demikianlah informasi mengenai widget popular post keren untuk blogger. Semoga bermanfaat.