• Tạo Bài Đăng Phổ Biến Với Sao Vàng

    Lần này Chu Bằng AiTi sẽ hướng dẫn các bạn tạo widget bài đăng phổ biến cho blog dạng 5 sao thật hấp dẫn cho blogger. Bắt tay vào làm luôn
    Tạo Bài Đăng Phổ Biến Với Sao Vàng

    1. Đầu tiên muôn thưở là vào Blogger -> mẫu -> Chỉnh sửa HTML

    2. Sau đó tìm thẻ đóng </head> rồi chèn toàn bộ code sau vào trước một trong hai thẻ đóng đó
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
    Các bạn nên tìm xem trong blog mình đã có chưa nếu có rồi thì bỏ qua bước này nha
    3. Sau đó các bạn lại tìm tiếp thẻ đóng </style> hoặc ]]></b:skin> rồi chèn toàn bộ code sau vào trước một trong hai thẻ đóng đó 
    /* Popular Post */
    .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
    .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
    .PopularPosts ul{margin:0;list-style:none;color:#64707a}
    .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
    .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
    .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
    .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
    .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
    .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
    .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
    .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
    .PopularPosts ul li:hover:before{opacity:1}
    .PopularPosts ul li:first-child{border-top:none}
    .PopularPosts ul li:last-child{border-bottom:none}
    .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
    .PopularPosts ul li a:hover{color:#2476e0;}
    .PopularPosts .item-thumbnail{margin:0;}
    .PopularPosts .item-snippet{display:none}
    .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
    4. Lưu mẫu lại
    5. Vào Blogger -> Bố cục -> Thệm tiện ích -> Bài đăng phổ biến rồi chỉnh như hình sau

    [Widget] Tạo Bài Đăng Phổ Biến Với Sao Vàng
    Chú ý các bạn có thể thay đổi các thông số sau
    • Tên tiêu đề
    • Được xem nhiều nhất (Chọn một trong 3)
    • Hiên thị: chỉ thay đổi cái hiên thị tối đa .... bài đăng, Còn lại giữ nguyên hiện trường. 
    Các bạn thay code sau nếu thích để thay cái 5 sao. Tức là cái trên khi áp dụng thì sẽ có 5 sao vàng, xuống tiếp là 5 sao 4 vàng 1 trắng, xuống tiếp là 3 vàng 2 trắng. Còn dùng code này sẽ hiên thị 5 sao > 4sao >3 sao> 2sao,... không có sao trắng.

    Các bạn thay đoạn CSS trên bằng code CSS sau 
    /* Popular Post */
    .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
    .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
    .PopularPosts ul{margin:0;list-style:none;color:#64707a}
    .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
    .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
    .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
    .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
    .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
    .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
    .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
    .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
    .PopularPosts ul li:hover:before{opacity:1}
    .PopularPosts ul li:first-child{border-top:none}
    .PopularPosts ul li:last-child{border-bottom:none}
    .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
    .PopularPosts ul li a:hover{color:#2476e0;}
    .PopularPosts .item-thumbnail{margin:0;}
    .PopularPosts .item-snippet{display:none}
    .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

    Lời Kết

    Vậy là mình đã hướng dẫn các bạn Tạo Bài Đăng Phổ Biến Với Sao Vàng, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

    • GET A FREE QUOTE NOW

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    GET FREE QUOTE

    SAY HELLO TO ME

    Tìm kiếm Blog này
    Được tạo bởi Blogger.

    Lưu trữ Blog

    ADDRESS

    4759, NY 10011 Abia Martin Drive, Huston

    EMAIL

    contact-support@mail.com
    another@mail.com

    TELEPHONE

    +201 478 9800
    +501 478 9800

    MOBILE

    0177 7536213 44,
    017 775362 13

    Copyright © 2017 chia sẽ video hay mới nhất. Designed By Portfolio Blogger Template.
    Made With