Chia Sẻ 10 Mẫu CSS Cực Đẹp Cho Bài Đăng Phổ Biến - Popular Post Blogspot

Hôm nay Yingvn sẽ chia sẻ về phần Popular post - bài đăng phổ biến đẹp cho blogspot. Giúp cho blog của bạn trở nên đẹp hơn bắt mắt hơn giúp nhiều người muốn xem hơn.Ok chúng ta cùng lướt qua các style bài đăng phổ biến này nhé!

Mẫu 1
/* CSS Popular Post */ .PopularPosts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding} .popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} .popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%} .PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-bottom:none} .PopularPosts li:hover{background:#0FB9BB} .PopularPosts li a{text-decoration:none} #PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px} .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0} .PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0} .PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0} .PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0} .PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0} .PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0} .PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0} .PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0} .PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0} .PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}
Mẫu 2
/* CSS Popular Posts */ .PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;} #PopularPosts1 ul li .item-thumbnail{overflow:hidden;width:72px;height:72px;float:right;margin-left:10px;} #PopularPosts1 img {overflow:hidden;width:72px;height:72px;transition:all .4s linear;} #PopularPosts1 img:hover{opacity:0.9;transition:all .4s linear;} .PopularPosts .widget-content ul li{position:relative;padding:0;margin:10px auto;} .PopularPosts .widget-content ul li:first-child {margin-top:0;} .PopularPosts .widget-content ul li:last-child {margin-bottom:0;} .PopularPosts .widget-content ul li:nth-child(1){background:#fff;border-left:2px solid rgba(249,178,86,0.7);width:100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(2){background:#eeeff2;border-left:2px solid rgba(118,167,250,0.7);width:100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(3){background:#fff;border-left:2px solid rgba(228,111,97,0.7);width:100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(4){background:#eeeff2;border-left:2px solid rgba(77,191,217,0.7);width:100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(5){background:#fff;border-left:2px solid rgba(140,196,116,0.7);width:100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a{color:#666;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a:hover{color:#444;} .PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5){background:#e7e9ec;} .PopularPosts .widget-content{background:#fff;} .PopularPosts .item-thumbnail{float:left;padding:0;margin:0;} .PopularPosts .item-title {color:#666;font-weight:400;font-size:13px;padding:5px;} .PopularPosts .item-snippet {display:none;font-size:13px;color:#888;overflow:hidden;text-align:justify;}
Mẫu 3
/* CSS Popular Post */ .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-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;} PopularPosts ul li:last-child{border-bottom:none;} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;} .PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;} .PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}
Mẫu 4
/* CSS Popular Post */ .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-family:'Oswald',Sans-Serif;font-size:13px;color:#fff;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:400;font-size:13px;color:#fff;text-decoration:none;transition:.3s linear;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgba(0,0,0,0.2);color:#fff;width:20px;height:20px;line-height:20px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.3s linear;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){transition:.3s linear;} .PopularPosts ul li:nth-child(1){background-color:#d9ba71;margin-right:0} .PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:2%} .PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:4%} .PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:6%} .PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:8%} .PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:10%} .PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:12%} .PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:14%} .PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:16%} .PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:18%} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#444;transition:.3s linear;} .PopularPosts ul li:hover .item-title a{color:#fff;transition:all .3s linear;} .PopularPosts ul li:hover:before{background-color:#2ba6e1;color:#fff;transition:all .3s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#fafafa;transition:all .3s linear;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .3s linear;}
Mẫu 5
/* CSS Popular Post */ .item-snippet {display:none;} .PopularPosts .item-thumbnail {float:right;margin:0;} #PopularPosts1 h2,#PopularPosts2 h2 {margin:0;} .PopularPosts .popular-posts ul li{list-style:none;overflow:hidden;padding:0;margin:10px 0;} #PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative;} .PopularPosts ul {counter-reset:trackit;} .PopularPosts .popular-posts ul li a {color:#444;transition:all .3s} .PopularPosts .popular-posts ul li a:hover {color:#e1a66c} .PopularPosts .item-title{display:table-cell;line-height:normal;text-overflow:ellipsis;padding:0 10px 0 0} .PopularPosts .item-thumbnail img {display:block;float:left;width:80px;height:auto;padding:0;} .popular-posts ul {padding-left: 0;} #footer-wrapper .popular-posts ul li:nth-child(n+4) {display:none;} #footer-wrapper .popular-posts ul li {border-bottom-color:#4f4f4f;background:#262525;} #footer-wrapper .popular-posts ul li:nth-child(3) {border-bottom:0;}
Mẫu 6
/* Popular Post */ .sidebar .PopularPosts ul{padding:0;margin:0;list-style:none} .sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden} .sidebar .PopularPosts .item-thumbnail{width:120px;height:120px;margin:0 15px 0 0;position:relative;box-shadow:5px 0 0 #fff} .sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0} .sidebar .PopularPosts ul li{margin-bottom:5px;max-height:120px;overflow:hidden} .sidebar .PopularPosts ul li:first-child{background:#D9EDF7}.sidebar .PopularPosts ul li:first-child+li{background:#F2DEDE}.sidebar .PopularPosts ul li:first-child+li+li{background:#DFF0D8}.sidebar .PopularPosts ul li:first-child+li+li+li{background:#FFEEBC}.sidebar .PopularPosts ul li:first-child+li+li+li+li{background:#E0E0E0} .sidebar .PopularPosts .item-title{font-size:90%;font-weight:700;padding:10px 5px} .sidebar .PopularPosts .item-title a{color:rgba(0,0,0,.4);text-decoration:none} .sidebar .PopularPosts .item-snippet{font-size:80%;padding-right:5px} .sidebar .PopularPosts .widget-content ul li{padding:0;border:0}
Mẫu 7
/* CSS Popular Post */ .item-snippet {display:none;} .PopularPosts .item-thumbnail {float:right;margin:0;} #PopularPosts1 h2,#PopularPosts2 h2 {margin:0;} .PopularPosts .popular-posts ul li{background:#fff;list-style:none;overflow:hidden;padding:0;margin:10px 0;box-shadow:0 1px 3px 0 rgba(0,0,0,.1)} #PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative;} .PopularPosts ul {counter-reset:trackit;} .popular-posts ul li div.item-thumbnail-only:before{content:"0"counters(trackit,"");float:left;width:50px;height:100px;text-align:center;line-height:100px;font-size:1.2em;font-weight:500;color:#aaa} .popular-posts ul li:hover div.item-thumbnail-only:before{content:'\f115';font-family:Fontawesome;text-decoration:none;color:#cf4d35} .PopularPosts .popular-posts ul li .item-content {counter-increment:trackit;} div.item-thumbnail-only {counter-increment:trackit;} .PopularPosts .popular-posts ul li a {color:#444;transition:all .3s} .PopularPosts .popular-posts ul li a:hover {color:#cf4d35} .PopularPosts .item-title{display:table-cell;vertical-align:middle;height:100px;line-height:normal;text-overflow:ellipsis;padding:0 10px 0 0} .PopularPosts .item-thumbnail img {display:block;float:left;width:100px;height:auto;padding:0;} .popular-posts ul {padding-left: 0;} #footer-wrapper .popular-posts ul li:nth-child(n+4) {display:none;} #footer-wrapper .popular-posts ul li {border-bottom-color:#4f4f4f;background:#262525;} #footer-wrapper .popular-posts ul li:nth-child(3) {border-bottom:0;} .makesticking{background:none!important;position:fixed;top:15px;z-index:20;-webkit-transform:translateZ(0);} #PopularPosts2 .widget-content {margin:auto;}
Mẫu 8
/* CSS Popular Post */ .item-snippet {display:none;} .PopularPosts .item-thumbnail {float:right;margin:0;} #PopularPosts1 h2,#PopularPosts2 h2 {margin:0;} .PopularPosts .popular-posts ul li{list-style:none;overflow:hidden;padding:0;margin:10px 0;} #PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative;} .PopularPosts ul {counter-reset:trackit;} .popular-posts ul li div.item-thumbnail-only:before{content:"0"counters(trackit,"");float:left;width:50px;height:100px;text-align:center;line-height:100px;font-size:2em;font-weight:500;text-decoration:overline;color:#aaa} .popular-posts ul li:hover div.item-thumbnail-only:before{content:'\f115';font-family:Fontawesome;text-decoration:none;color:#4db2ec} .PopularPosts .popular-posts ul li .item-content {counter-increment:trackit;} div.item-thumbnail-only {counter-increment:trackit;} .PopularPosts .popular-posts ul li a {color:#444;transition:all .3s} .PopularPosts .popular-posts ul li a:hover {color:#4db2ec} .PopularPosts .item-title{display:table-cell;vertical-align:middle;height:100px;line-height:normal;text-overflow:ellipsis;padding:0 10px 0 0} .PopularPosts .item-thumbnail img {display:block;float:left;width:100px;height:auto;padding:0;} .popular-posts ul {padding-left: 0;} #footer-wrapper .popular-posts ul li:nth-child(n+4) {display:none;} #footer-wrapper .popular-posts ul li {border-bottom-color:#4f4f4f;background:#262525;} #footer-wrapper .popular-posts ul li:nth-child(3) {border-bottom:0;} .makesticking{background:none!important;position:fixed;top:15px;z-index:20;-webkit-transform:translateZ(0);} #PopularPosts2 .widget-content {padding:0;margin:auto;} .PopularPosts ul li:nth-child(n+6){display:none;}
Mẫu 9
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;} .popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;} .popular-posts ul li:nth-child(1){background-color:#f44336;} .popular-posts ul li:nth-child(2){background-color:#e91e63;} .popular-posts ul li:nth-child(3){background-color:#9c27b0;} .popular-posts ul li:nth-child(4){background-color:#673ab7;} .popular-posts ul li:nth-child(5){background-color:#3f51b5;} .popular-posts ul li:nth-child(6){background-color:#2196f3;} .popular-posts ul li:nth-child(7){background-color:#03a9f4;} .popular-posts ul li:nth-child(8){background-color:#00bcd4;} .popular-posts ul li:nth-child(9){background-color:#009688;} .popular-posts ul li:nth-child(10){background-color:#4caf50;} .popular-posts ul li:hover{background-color:#757575;} .popular-posts ul li a{color:#FFF;text-decoration:none;} .popular-posts ul li a:hover{color:#EEE;} .popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
Mẫu 10
/* CSS 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:#FF9100;color:#fff;position: relative;font-weight: bold;font-family:'Open Sans', Arial;float: left;} .popular-posts ul li:after {font-family:FontAwesome;font-style:normal;font-weight:normal;content:"\f105";padding:5px;color:#FF9100;font-size:30px;float:right;margin-top:-35px;} .popular-posts ul li {border-bottom: 1px solid #ddd;} .popular-posts ul li a {text-decoration:none; color:#000;} .popular-posts ul li a:hover {text-decoration:underline;} .popular-posts .item-snippet {display:none;}.popular-posts .item-thumbnail {display:none;} .PopularPosts .widget-content ul li {list-style:none;} .PopularPosts .item-title {padding-right:10px;}


Mẫu 11

/* 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 0 0 0!important;padding:10px 20px 10px 10px!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;font-family:arial,sans-serif!important;font-size:12px;font-weight:bold!important;display:block;position:absolute;top:-5px;right:-5px;border-radius:16px;background-color:#333;color:#fff!important;width:28px;height:28px;line-height:28px;text-align:center;padding-right:0!important;border:2px solid #fff} .PopularPosts ul li:nth-child(1){background-color:#A51A5D} .PopularPosts ul li:nth-child(2){background-color:#F53477} .PopularPosts ul li:nth-child(3){background-color:#FD7FAA} .PopularPosts ul li:nth-child(4){background-color:#FF9201} .PopularPosts ul li:nth-child(5){background-color:#FDCB01} .PopularPosts ul li:nth-child(6){background-color:#DEDB00} .PopularPosts ul li:nth-child(7){background-color:#89C237} .PopularPosts ul li:nth-child(8){background-color:#44CCF2} .PopularPosts ul li:nth-child(9){background-color:#01ACE2} .PopularPosts ul li:nth-child(10){background-color:#94368E} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

0 Response to "Chia Sẻ 10 Mẫu CSS Cực Đẹp Cho Bài Đăng Phổ Biến - Popular Post Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel