Xem demo ngay tại blog của namkna.
Ả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:
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ố.
☼ 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.
Nhận xét
bài viết này đã làm thử nhưng tiêu đề bài viết dài quá nên áp dụng cách thức này thì phần chữ sẽ bị dôi ra ngoài, anh có thể tùy chỉnh sang auto chữ để bo vừa khớp với khung hình ko, như thế thì ok.
Trả lờiXóaChỉ cần xóa đoạn height: 40px; đi là oke mà :)
XóaĐúng vậy có thể xóa đoạn height: 40px; hoặc sửa đoạn:
Xóa.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;
height: 40px;
-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;
}
thành:
.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;
min-height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;
}
đã làm được, cảm ơn anh nam nhé
Trả lờiXóaKhông có gì :)
XóaAnh Nam có thể hướng dẫn làm cái popular post nó hiện ra như cái xem nhiều tuần qua blog của anh không. Em cảm ơn nhiều
Trả lờiXóaĐây nha em:
Xóahttp://namkna.blogspot.com/2011/12/them-hieu-ung-tooltips-cho-rencent-post.html
hoặc bài này.
http://namkna.blogspot.com/2011/12/lam-ep-tien-ich-popular-posts-hieu-ung.html
Anh ơi ...
Trả lờiXóacho em hỏi em muốn dùng hai tiện ích Popular Post trong phần bài đăng phổ biến được không ạ , một cái dùng là BÀI ĐĂNG MỚI cái cái khác là BÀI ĐĂNG CŨ HƠN . nhưng em làm nó cứ chỉ ra một cái. và hàng loạt kiểu bài đăng giống nhau. Như em làm đây nó chỉ ra có 1 tiện ích và bài đăng nó lên trên cả hai tiện ích
http://taplambloggerhuuduan.blogspot.com/
Bài đăng phổ biến và popular post là một mà em. chỉ có một cái là tên tiếng việt còn một cái là tên tiếng anh thôi bạn ak.
Xóa