Đăng bởi Admin | 13/7/13 | 0 nhận xét
Trong hướng dẫn này mình sẽ giải thích làm thế nào để bo góc cho các bài viết phổ biến của blogger. Thủ thuật này chạy tốt với tất cả các trình duyệt web hiện đại. Mình đã sử dụng CSS3 để bo góc xung quanh tất cả các bài viết. Các bạn có thể làm theo các bước hướng dẫn dưới đây để thêm nó vào blog.
Ảnh minh họa.
Xem thêm:
Ảnh minh họa.
☼ Bước 1: Tạo một tiện ích Popular post.
- Nếu blog bạn đã có tiện ích Popular post rồi thì có thể bỏ qua bước này tiến hành luôn bước 2:
1- Đăng nhập vào Blog
2- Vào mẫu (Template)
3- Chọn Thêm Tiện ích (Add Widget)
4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại:
5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác định Id của tiện tích popular post và cài đặt các thông số.
2- Vào mẫu (Template)
3- Chọn Thêm Tiện ích (Add Widget)
4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại:
☼ Bước 2: Bo tròn tiện ích bài đăng phổ biến (Round Corners Popular Post Widget for Blogger) .
1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây trước thẻ ]]></b:skin> :
/* The CSS Code for the menu starts here http://namkna.blogspot.com/ */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px; } .popular-posts ul li a { font-style: italic; } .popular-posts ul li:hover { border:1px solid #d10202; -moz-box-shadow: 3px 2px 5px #d10202; -webkit-box-shadow: 3px 2px 5px #d10202; box-shadow: 3px 2px 5px #d10202; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { height:40px;width:40px; webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .popular-posts .item-thumbnail img:hover{ -moz-box-shadow: 0px 0px 5px #d10202; -webkit-box-shadow: 0px 0px 5px #d10202; box-shadow: 0px 0px 5px #d10202;}
☼ Tùy chỉnh:
- Nếu bị lỗi tiêu đề xuống dòng do quá dài thì sửa height: 40px; thành min-height: 40px;.
- height:40px;width:40px; lần lượt là chiều cao và chiều rộng của ảnh thumbnail.
Xem thêm:
- Tạo Popular pots có có số đếm và title trích dẫn
- Hiển thị đoạn trích dẫn dạng title cho Bài đăng phổ biến
- blogspot
- Ẩn một bài viết bất kỳ trong tiện ích Bài viết xem nhiều
- Hiển thị Bài đăng phổ biến dạng ảnh xoay tròn từ CSS3 cho blog
- Tạo Màu nền riêng cho bài viết xem nhiều nhất
- Tạo Hiển thị bài đăng phổ biến dạng ảnh chuyển động
- Tạo Tiện ích Bài đăng phổ biến bố trí theo chiều ngang
- Tạo Bài viết phổ biến dạng ảnh Gallery cho blog
- Tạo Bài viết phổ biến dạng Slides trượt dọc cho Blogger
Theo: Namkna
Không có nhận xét nào:
Đăng nhận xét
Cảm ơn bạn đã nhận xét !
Mã hóa Code- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.