Koleksi Desain Tampilan Popular Post di Sidebar Blog

Baca Juga

Popular Post adalah widget yang menampilkan daftar artikel blog terbanyak dibaca atau dibuka. Biasanya ditampilkan di Sidebar Blog.

Banyak banget jenis tampilan atau desain widget popular post untuk blogger. Tujuan desain atau modif popular post untuk memperindah biar makin menarik perhatian pengunjung.

Pilihan Desain Tampilan Popular Post Sidebar Blog

1. Tema > Edit HTML
2. Copas salah satu kode style yang dipilih di atas kode ]]></b:skin>
3. Save!

Style 1

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul { padding-left: 0;
counter-reset: trackit;/*setting counter-reset*/
}
.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;/*setting counter-increment*/
}
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #C4C4C4;
float:left;
margin-right:10px;
} /* creates counter before lists */
.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
} /* define background for even number lists */
.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}/* define background for odd number lists */
.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}

Style 2

.PopularPosts .item-snippet{display:none} .PopularPosts .item-title{padding:0 5pxfont-weight:700;padding-bottom:.2em;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts ul{overflow:hidden;list-style:none;background:#fff;padding:5px 5px 0;margin:0;border-top:none} .PopularPosts ul{list-style:none;margin:0;color:#64707a} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{background:none;list-style:none;margin:0;padding:0;border:none;outline:none} .PopularPosts ul li img{display:block;float:left;background:#fafafa;margin:0 10px 0 0;height:60px;width:60px;overflow:hidden;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'f005f005f005f005f005';display:inline-block;position:absolute;color:#30AEE1;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f005f123f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'f005f005f123f006f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'f005f123f006f006f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'f005f006f006f006f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'f123f006f006f006f006';opacity:.7}

Style 3

Kode

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

Style 4

Kode

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

Demikian Pilihan Desain Tampilan Popular Post Sidebar Blog. Good Luck & Happy Blogging! (www.contohblog.com).*