Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Như các bạn cũng đã biết, bài đăng phổ biến là một trong những tiện ích có sẵn khá hay được cung cấp bởi Google, nó giúp chúng ta thống kê cho khách truy cập biết những bài đăng nào đăng được chú ý đến nhất trong website/blog của chúng ta. Không những thế nó còn kéo dài được thêm thời gian khách truy cập ở lại trên website/blog của chúng ta nữa (điều mà mọi blogger đều mong muốn).



Giao diện bài viết phổ biến trắng xanh - Blogger




Hôm nay mình muốn chia sẻ đoạn CSS trang trí lại tiện ích này, giao diện cũng khá đơn giản, tông màu trắng, và có lẫn thêm một ít màu xanh biển.



Trang trí lại bài viết phổ biến - Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML



Giao diện bài viết phổ biến trắng xanh - Blogger


2. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên



Giao diện bài viết phổ biến trắng xanh - Blogger


.PopularPosts {
width:100%;
margin: 0 auto;
padding: 0!important;
border-radius: 2%;
-moz-border-radius: 2%;
-webkit-border-radius: 2%;
counter-reset: trackit;
box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
border: 1px solid #EEE;
}

.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;font-weight: 500!important;
text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;
box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
font-size: 16px!important;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px!important;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 3px;
bottom:0;
top:0;
}
.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;
}
.popular-posts ul{padding:0!important;margin:0!important;}
.popular-posts ul li {
border-bottom: 1px solid #f1f1f1;
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;}
#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}
#PopularPosts1 li:nth-child(even) {background: #FFF;}
#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}
#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}
#PopularPosts1 ul li:before {content: counters(trackit,".");padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}
#PopularPosts1 a:hover {text-decoration: underline;}
#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}
.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}
3. Lưu lại giao diện hiện tại, và tận hưởng.



Bạn có thể thay đổi CSS trên để phù hợp với Blogger của bạn, rất mong việc bạn thay đổi giao diện bài viết phổ biến sẽ giúp ích trong việc lưu lượng và thời gian truy cập của mình. Đừng quên để lại nhận xét nếu như bạn có thắc mắc cũng như yêu cầu gì. Chúc vui!

0 comments:

Post a Comment

Popular Posts