Hầu hết các blogger muốn làm cho trang web của họ độc đáo và bắt mắt. Nếu bạn không có ý tưởng về viết mã thì bạn không thể làm điều đó. Nhưng đừng lo lắng, Anh Nhím Blog luôn cố gắng để giúp trang web của bạn trông tốt hơn bằng cách hướng dẫn các bạn sử dụng những đoạn mã của Anh Nhím Bl;og. Vì vậy, trong hướng dẫn này, Anh Nhím Blog sẽ hướng dẫn các bạn tạo tiện ích bài đăng phổ biến và Anh Nhím Blog chắc chắn rằng bạn sẽ thích nó. Widget này không chỉ giúp trang web của bạn trông đẹp hơn mà cũng làm cho người đọcthấy hạnh phúc để xem nó.
Thêm Mã CSS vào Blog
Các bạn vào Blogger > Mẫu > Chỉnh Sửa Mẫu. Sau đó chèn doạn code sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>
.PopularPosts .item-thumbnail{margin-bottom:0;-webkit-box-shadow:0 0 9px rgba(0,0,0,0.4) inset;-moz-box-shadow:0 0 9px rgba(0,0,0,0.4) inset;box-shadow:0 0 9px rgba(0,0,0,0.4) inset;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:10px}
.PopularPosts ul li img{height:50px;padding-right:0;width:50px;background:#333;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.PopularPosts .widget-content ul li{background:#00aeef}
.PopularPosts .widget-content ul li+li{margin:0 10px 0 0;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease}
.PopularPosts .widget-content ul li+li+li{margin:0 20px 0 0}
.PopularPosts .widget-content ul li+li+li+li{margin:0 30px 0 0}
.PopularPosts .widget-content ul li+li+li+li+li{margin:0 40px 0 0}
.PopularPosts .widget-content ul li:hover{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
.PopularPosts .widget-content ul li:nth-child(2n+1){background:#222}
.PopularPosts ul li a{color:#fff;font-family:Arial,serif;font-size:15px;font-weight:500;line-height:20px;padding:12px;display:block}
Nếu Blog bạn đã từng có CSS Popular post thì các bạn chép đè đoạn code trên vào code cũ nha.
Add Popular Posts Widgets
Các bạn đăng nhập Blogger > Bố Cục > Thêm Tiện Ích > Rồi Chọn Bài Đăng Phổ Biến
Sau đó các bạn tùy chỉnh cấu hình như sau:
Comments (0) Cancel reply