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

  • ITtoday.vn - Hôm nay chúng tôi hướng dẫn các bạn cách chèn đoạn CSS3 bo tròn bài đăng phổ biến vào trong code blog.

  • Sunday, 26 July 2015, 05:06:17 PM
  • Bo tròn bài viết trong Popular Post cho Blogger
  • Gồm 2 bước chính:

     

    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 Bố cục (Layout)
    3- Chọn Thêm Tiện ích (Add Widget)
    4. Bấm chọn mục bài đăng phổ Biến (Popularpost) 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) .


    - Chọn mẫu (template)
    - Chọn chỉnh sửa HTML.
    - Dán mã dưới đây trước thẻ ]]> :

    /* 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.

    Lưu template lại và xem kết quả.