Chia Sẻ Một Số Mẫu Popular Post Đẹp Cho Blogspot

Và nay Mình sẽ tiếp tục chia sẽ các bạn một số mẫu khác khá đẹp nên áp dụng cho Blogspot.

Mục lục:

• Thực Hiện

Lời Kết

Thực Hiện

Mẫu 1

CSS/* 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/* 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/* 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 4

CSS/* 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 5

CSS/* 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 6

CSS/* 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 7

CSS/* 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 8

CSS.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 9

CSS/* 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 10

CSS/* 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}

Lời Kết

Vậy là mình đã Chia Sẻ các bạn Một Số Mẫu Popular Post Đẹp Cho Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công