humghn.com
Các bạn thấy việc thêm một tiện ích " Bài đăng phổ biến " vào blogspot không hề khó . Quan trọng là các bạn cần code để chèn trực tiếp vào theme blogspot . Trong những bài viết trước , chuyên đề đã gửi đến các bạn những mẫu " Bài đăng phổ biến " với một vài thiết kế 3D bóng bẩy vì thế , trong bài viết này , chuyên mục sẽ gửi đến các bạn mẫu " Bài đăng phổ biến " với thiết kế đơn giản , không màu mè nhưng vẫn mang dáng vẻ chuyên nghiệp . ( Với mẫu thiết kế này , chỉ khi bạn dán chúng vào web/blog của bạn thì mới thấy hết sự đơn giản nhưng tinh tế của nó . Vì thế các bạn chịu khó làm thử xem thế nào nhé ).
Ảnh DEMO
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>
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqcJhPCum6_CVrq4nplkimUblATllO_w23K2Hgvb8RwJyN93e1tIxPTWUc6IZ2nTvFraxHQrlhVzYnkMZCPjiSf3Yj4DDC1w6DCNBq2E7DiCMrV8BE3148dE9A3mg51YB0v4fU6ZERLM/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Phía trên là code chính để tạo nên label . Các bạn hoàn toàn có thể tùy chỉnh một cách dễ dàng với một số kiến thức HTML của bạn . Cuối cùng , xin chúc các bạn thành công !
