Widget Popular Posts Blog Simple Keren Responsive

Widget Popular posts

Widget Popular Posts merupakan salah satu widget wajib yang harus dipasang pada sebuah blog. Widget ini dapat menampilkan artikel blog kita yang banyak dibaca pengunjung. Widget blog selain Popular Posts yang biasa dipasang adalah Recent Posts, Random Post, Label, dan sebagainya.

Widget Popular Post merupakan widget blog yang sangat mudah untuk digunakan. Kita tidak perlu repot dengan kebanyakan kode HTML. Melainkan kita hanya perlu menggunakan kode CSS tanpa menggunakan kode Javascript-nya. 

Sebelum kita memasang widget Popular Post pada Sidebar Blog, terlebih dahulu kita pasang kode CSS-nya yang mengatur segi tampilan dari widget ini nantinya.

Langkah menambahkan kode CSS untuk widget Popular Post adalah:
1. Klik menu Template >> Edit HTML.
2. Cari (bisa dengan Ctrl + F) kode </b:skin>
3. Copy dan Paste kode berikut ini tepat sebelum kode </b:skin> ini.

Klik Spoiler Berikut:

/* custom popular post*/
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.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;
}

Kode CSS diperoleh dari :
http://contohblognih.blogspot.com/2014/12/membuat-widget-popular-posts-keren-di.html

Jika sudah, silahkan Save template kita.

Lanjut, cara menambahkan Widget Popular Posts pada sidebar Blog adalah:
1. Pada Blogger Dashboard, masuk ke menu Layout (Tata Letak)
2. Klik Add a Gadget di Sidebar yang ingin kita pasangi widget ini.
3. Pilih Popular Posts Widget atau Entri Populer.
4. Silahkan centang pilihan yang muncul, kita bisa menampilkan widget ini dengan gambar, ringkasan, ataupun kedua-duanya. Bisa juga hanya judul saja.
5. Terakhir, silahkan simpan.

Jika sudah selesai, silahkan klik lihat blog untuk melihar perubahan.

Jika sebelumnya anda menggunakan widget popular posts warna-warni, silahkan hapus kode CSS untuk pengaturan warna-nya saja dan tambahkan kode CSS di atas. Seperti pada template Evo Magz misalnya. Jika anda menggunakan template Evo Magz karya mas Sugeng dan ingin mengganti
widget populer post-nya seperti di atas maka ikuti langkah berikut.

Widget Popular Posts Template Evo Magz Mas Sugeng

Berikut ini merupakan Kode CSS dalam Template Evo Magz karya Mas Sugeng. Temukan kode CSS berikut ini dengan cari (bisa Ctrl+F) dan mengetik Popular Posts:

Klik Spoiler Berikut:

/* Custom CSS for Blogger Popular Post Widget */
.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 {
font-weight:bold;
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:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.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 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}

Silahkan hapus kode CSS yang saya beri warna merah di atas. Kemudian tambahkan kode CSS di atas tersebut dengan langkah-langkah di atas.

Begitulah cara memasang Widget Popular Posts Blog Keren. Semoga bermanfaat.