humghn.com
Để thiết kế một blog/web đẹp thì không thể thiếu các label bài đăng . Các label đó có thể là bài viết liên quan , có thể là bài viết cùng chủ đề hoặc cũng có thể là bài viết nổi bật nhất , được nhiều người quan tâm nhất . Những bài viết nổi bật và được nhiều người xem như vậy trong một blog/web được gọi là " Bài viết phổ biến " .
Nếu nghe qua cái tên " Bài viết phổ biến " đã đủ để làm các độc giả quan tâm đến những bài viết đó , nhưng sẽ còn làm độc giả quan tâm hơn nhiều nếu như mục " Bài viết phổ biến " được thiết kế tinh tế và đẹp mắt . Vậy trong bài viết này , chuyên mục sẽ gửi đến các bạn cách tạo label " Bài viết phổ biến nhất " cho blogspot với style sắc màu
Cách thực hiện
Bước 1 : Đăng nhập blogspot , chọn mục " Bố Cục " sau đó chọn " Thêm Tiện Ích "
Bước 2 : Chọn tiện ích bài viết phổ biến và sửa thông số như sử thích
Bước 3 : Nhấp lưu lại và chuyển sang mục " Mẫu "
Bước 4 : Chọn mục " Chỉnh sửa HTML "
Bước 5 : Dán đoạn code dưới đây đằng trước đoạn mã ]]></b:skin>
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,hild + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first- cpularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Poi:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul lirst-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;} #PopularPosts1 img { border-radius:200px; width:60px; height:60px; margin-left:4px;
#PopularPosts1 ul li:f}
Bước 6 : Nhấp lưu và hưởng thụ thành quả nhé .
Chú ý : Bài viết trong label này sẽ hiển thị cả tiêu để và vài chục chữ đầu tiên trong bài đăng . Nếu bạn chỉ muốn hiển thị tiêu đề thì bạn chỉ cần thêm dấu gạch ngắt trong bài viết . Bạn xem hình minh họa dưới đây sẽ hiểu hơn
Chúc các bạn thành công !
