Popular Posts Style
Updated on 24 September
Style 1
Popular Post Widget v2
#PopularPosts1 article{position:relative;min-height:25px;line-height:25px;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto 3px;transition:all .3s;background:#ecf0f1;cursor:pointer;border-radius:5px}#PopularPosts1 .item-thumbnail,#PopularPosts1 .item-thumbnail img{border-radius:4px;padding:0;margin:0}#PopularPosts1 .item-thumbnail{margin:5px 10px 5px 0}#PopularPosts1 a{position:relative;color:#333;z-index:2}.PopularPosts widget-content,.PopularPosts article,.PopularPosts article img,.PopularPosts article a,.PopularPosts article a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts widget-content{padding:5px;list-style:none;font-size:15px;background:#fff;margin:0;width:100%;font-weight:400;}.PopularPosts widget-content article img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px}.PopularPosts widget-content article .item-title a{font-size:15px;color:inherit;text-decoration:none}#PopularPosts1:hover article{opacity:.7;transform:scale(0.95)}#PopularPosts1 article:hover{opacity:1;transform:scale(1.0)}
Popular Post Widget v1
#PopularPosts1 li{position:relative;min-height:25px;line-height:25px;padding:10px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto 3px;transition:all .3s;background:#ecf0f1;cursor:pointer;border-radius:5px}#PopularPosts1 .item-thumbnail,#PopularPosts1 .item-thumbnail img{border-radius:4px;padding:0;margin:0}#PopularPosts1 .item-thumbnail{margin:5px 10px 5px 0}#PopularPosts1 a{position:relative;color:#333;z-index:2}.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{padding:5px;list-style:none;font-size:15px;background:#fff;margin:0;width:100%;font-weight:400;}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px}.PopularPosts ul li .item-title a{font-size:15px;color:inherit;text-decoration:none}#PopularPosts1:hover li{opacity:.7;transform:scale(0.95)}#PopularPosts1 li:hover{opacity:1;transform:scale(1.0)}
Style 2
Popular Post Widget v2
/* Popular Posts */
.PopularPosts .widget-content article:first-child{border:0}
#PopularPosts1 article{position:relative;min-height:22px;line-height:22px;padding:10px 15px;text-overflow:ellipsis;overflow:hidden;margin:0 auto 2px;border-left:8px double #fff;transition:all .3s}
#PopularPosts1 article:before{content:'';background:rgba(0,0,0,0.05);height:5%;right:0;left:0;bottom:0;position:absolute;z-index:1;transition:all .3s}
#PopularPosts1 article:hover:before{height:100%}
#PopularPosts1 a{position:relative;color:#333;z-index:2}
#PopularPosts1 a:hover{color:#311b92;text-decoration:none;}
.PopularPosts .widget-content,.PopularPosts article,.PopularPosts article img,.PopularPosts article a,.PopularPosts article a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts .widget-content{list-style:none;font-size:16px;color:#fff;margin:0px;width:100%;font-weight:500}.PopularPosts .widget-content article img{display:none;}.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px}.PopularPosts .widget-content article .item-title a{font-size:15px;color:inherit;text-decoration:none}.PopularPosts .widget-content article{margin:0;padding:10px 5px 10px 40px;cursor:pointer}.PopularPosts .widget-content article:nth-child(1){background-color:#88ffce}.PopularPosts .widget-content article:nth-child(2){background-color:#b8ff88}.PopularPosts .widget-content article:nth-child(3){background-color:#eaff88}.PopularPosts .widget-content article:nth-child(4){background-color:#ffe788}.PopularPosts .widget-content article:nth-child(5){background-color:#ffc088}.PopularPosts .widget-content article:nth-child(6){background-color:#ffaa88}.PopularPosts .widget-content article:nth-child(7){background-color:#F48FB1}.PopularPosts .widget-content article:nth-child(8){background-color:#B39DDB}.PopularPosts .widget-content article:nth-child(9){background-color:#9FA8DA}.PopularPosts .widget-content article:nth-child(10){background-color:#90CAF9}
#PopularPosts1:hover article{opacity:.7;transform:scale(0.95)}
#PopularPosts1 article:hover{opacity:1;transform:scale(1.0);box-shadow:0 15px 10px -10px rgba(0,0,0,0.2)}
Popular Post Widget v1
/* Popular Posts */
.PopularPosts .widget-content ul li:first-child{border:0}
#PopularPosts1 li{position:relative;min-height:22px;line-height:22px;padding:10px 15px;text-overflow:ellipsis;overflow:hidden;margin:0 auto 2px;border-left:8px double #fff;transition:all .3s}
#PopularPosts1 li:before{content:'';background:rgba(0,0,0,0.05);height:5%;right:0;left:0;bottom:0;position:absolute;z-index:1;transition:all .3s}
#PopularPosts1 li:hover:before{height:100%}
#PopularPosts1 a{position:relative;color:#333;z-index:2}
#PopularPosts1 a:hover{color:#311b92;text-decoration:none;}
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:16px;color:#fff;margin:0px;width:100%;font-weight:500}.PopularPosts ul li img{display:none;}.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px}.PopularPosts ul li .item-title a{font-size:15px;color:inherit;text-decoration:none}.PopularPosts ul li{margin:0;padding:10px 5px 10px 40px;cursor:pointer}.PopularPosts ul li:nth-child(1){background-color:#88ffce}.PopularPosts ul li:nth-child(2){background-color:#b8ff88}.PopularPosts ul li:nth-child(3){background-color:#eaff88}.PopularPosts ul li:nth-child(4){background-color:#ffe788}.PopularPosts ul li:nth-child(5){background-color:#ffc088}.PopularPosts ul li:nth-child(6){background-color:#ffaa88}.PopularPosts ul li:nth-child(7){background-color:#F48FB1}.PopularPosts ul li:nth-child(8){background-color:#B39DDB}.PopularPosts ul li:nth-child(9){background-color:#9FA8DA}.PopularPosts ul li:nth-child(10){background-color:#90CAF9}
#PopularPosts1:hover li{opacity:.7;transform:scale(0.95)}
#PopularPosts1 li:hover{opacity:1;transform:scale(1.0);box-shadow:0 15px 10px -10px rgba(0,0,0,0.2)}
0 comments for Popular Posts Style