Thư viện

Trải nghiệm

Thứ Tư, tháng 7 10, 2013

Bo tròn bài viết trong Popular Post cho Blogger

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. Namkna đã sử dụng CSS3 để bo góc xung quanh tất cả các bài viết

Chia sẻ:
Trong hướng dẫn này namkna 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. Namkna đã 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.
Xem demo ngay tại blog của namkna.
Ảnh minh họa.
Round Corners Popular Post for Blogger

☼ 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ố.

☼ 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.
5- Lưu template lại và xem kết quả.

9 nhận xét:

  1. 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óa
    Trả lời
    1. Chỉ cần xóa đoạn height: 40px; đi là oke mà :)

      Xóa
    2. Đúng vậy có thể xóa đoạn height: 40px; hoặc sửa đoạn:

      .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;
      }

      Xóa
  2. đã làm được, cảm ơn anh nam nhé

    Trả lờiXóa
  3. Anh 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
    Trả lời
    1. Đây nha em:

      http://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

      Xóa
  4. Anh ơi ...
    cho 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/

    Trả lờiXóa
    Trả lời
    1. 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