Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Cara Membuat Widget Popular Post Simple Hitam Putih Tanpa Thumbnail Pada Blogspot


Cara Membuat Widget Popular Post Simple Hitam Putih Tanpa Thumbnail Pada Blogspot

Chuwee.xyz - Bagi kalian para blogger mungkin tidak asing lagi dengan yang namanya widget popular post. Widget popular post adalah salah satu widget yang wajib ada pada sebuah blog maupun website. Dikarenakan peran widget popular post sangat penting untuk meningkatkan traffic pengunjung pada suatu blog atau website.


Daftar postingan atau artikel yang paling sering dilihat oleh pengunjung akan ditampilkan pada widget popular post yang bisa diurutkan tampilannya berdasarkan 7 hari terakhir, 30 hari terakhir, tahun lalu, maupun setiap saat.


Pada sebelumnya saya sudah share artikel tentang Cara Membuat Widget Popular Post Keren Warna Warni Pada Blogspot untuk dipasang pada sidebar blogger. 


Kumpulan Widget Popular Posts Hitam Putih Tanpa Thumbnail Keren dan Minimalis


Berikut akan saya bagikan beberapa kumpulan dari widget popular post dengan bertemakan hitam putih. Cara pasangnya masih sama dan sangat mudah hanya tinggal kalian copy paste atau copas saja salah satu kode css popular post dibawah ini dan letakkan diatas kode ]]></b:skin> di template blog kamu lalu pilih simpan. 


Popular Post Hitam Putih Style Pertama


Popular Post Hitam Putih Style Pertama

#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:7px!important;margin:0;list-style:none;border-bottom:1px solid #fafafc;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:13px;color:#555!important;display:block;font-weight:700;padding:0!important;margin:0!important;line-height:1.4em}
#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}
.PopularPosts h2{padding:5px 0}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;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 li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0!important}

 

Popular Post Hitam Putih Style Kedua


Popular Post Hitam Putih Style Kedua

#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; border-bottom: 1px solid #e9e9e9;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:13px; color: #2b2b2b !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}
.PopularPosts h2{padding-right:.4em;padding-left:1em}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 10px;font-size:20px;font-weight:bold;color:#F66;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
/* Hides Thumbnail and Snippet */
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0em !important}


Popular Post Hitam Putih Style Ketiga

 

Popular Post Hitam Putih Style Ketiga

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 4px !important;margin:0; list-style: none; border-bottom: 1px solid #fff;font-size:12px;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:13px; color: #000000 !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.2em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}
.PopularPosts h2{padding-right:.4em;padding-left:1em}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #fff;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:5px 10px 15px 10px;font-size:18px;font-style: italic;font-weight:bold;color:#fff;float:left;margin-right:10px;border:1px solid #B80103;width:10px;height:10px; border-radius:100%;background: #d20000;display: block;}
.PopularPosts li:first-child{border-top:1px solid #fff}
.PopularPosts li:nth-child(odd){background:#fff}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a:link,.PopularPosts a:visited {color:#2b2b2b;font-size:.9rem}
.PopularPosts a:hover{color:#c00}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0em !important}


Popular Post Hitam Putih Style Keempat

 

Popular Post Hitam Putih Style Keempat


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



Popular Post Hitam Putih Style Kelima


Popular Post Hitam Putih Style Kelima

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


Demikian Widget Popular Post Simple Hitam Putih Tanpa Thumbnail yang bisa saya bagikan, semoga artikel ini dapat bermanfaat.