Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Cách tạo tiện ích bài viết gần đây và bài viết gần đây theo nhãn

                    Tiện ích bài viết gần đây hay recent posts và bài viết gần đây theo nhãn hay recent posts by label rất được sử dụng trong Blog thông thường vẫn đặt trong side bar bên phải bài viết hoặc nếu những bạn đã có kinh nghiệm sử dụng tiện ích bên cạnh các bài viết mới nhất ngoài trang chủ tạo thành mẫu có giao diện Tin tức, Tạp chí trông rất chuyên nghiệp.

                    Ưu điểm khi sử dụng tiện ích này có thể cài đặt hiển thị hoặc không hiển thị các thuộc tính dưới đây:

                    + Số lượng bài viết
                    + Ảnh bài viết
                    + Số nhận xét
                    + Thời gian đăng bài
                    + Đoạn tóm tắt

                    Tất nhiên script sử dụng feed gọi dữ liệu bài viết là không thể thiếu, các bạn đặt đoạn script này trên thẻ </head>

                    Copy
                    <script src='https://cdn.rawgit.com/ns24h/js/master/recentposts.js'/>

                    Đặt tiếp đoạn script trước </body>

                    Copy
                    <script>
                        $('.recentposts img').attr('src', function(i, src) {
                            return src.replace('s72-c', 's1600')
                        })
                    </script>

                    Tiếp theo các bạn vào bố cục chọn thêm tiện ích bên side bar tùy số lượng tiện ích mà bạn muốn hiển thị giả sử là 2 tiện ích một sử dụng cho bài viết gần đây và một sử dụng cho bài viết gần đây theo nhãn. Khi thêm xong các bạn vào mẫu chỉnh sửa tìm đến 2 tiện ích này chọn mở rộng tiện ích tìm đoạn <b:includable id='main'>...</b:includable> các bạn sửa thành áp dụng với bài viết mới

                    Copy
                    <b:includable id='main'>
                    <h2><data:title/></h2>
                    <div class='recentposts'>
                    <script>
                    var numposts = 5;
                    var showpostthumbnails = true;
                    var showcommentnum = true;
                    var showpostdate = true;
                    var showpostsummary = true;
                    var numchars = 100;
                    </script>
                    <script expr:src='&quot;/feeds/posts/default?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>
                    <div class='clear'/>
                    </div>
                    </b:includable>

                    Trong đó:

                    numposts = 5; // Số lượng bài viết
                    showpostthumbnails = true; // Hiển thị hình ảnh
                    showcommentnum = true; // Số nhận xét thay true thành false nếu không muốn hiển thị
                    showpostdate = true; // Thời gian đăng bài thay true thành false nếu không muốn hiển thị
                    showpostsummary = true; // Tóm tắt thay true thành false nếu không muốn hiển thị
                    numchars = 100; // Số ký tự tóm tắt

                    Nếu áp dụng với tiện ích bài viết gần đây theo nhãn các bạn chỉ cần sửa đoạn script ở trên thành

                    Copy
                    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:content + &quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>

                    Viết đầy đủ

                    Copy
                    <b:includable id='main'>
                    <h2><data:title/></h2>
                    <div class='recentposts'>
                    <script>
                    var numposts = 5;
                    var showpostthumbnails = true;
                    var showcommentnum = true;
                    var showpostdate = true;
                    var showpostsummary = true;
                    var numchars = 100;
                    </script>
                    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:content + &quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>
                    <div class='clear'/>
                    </div>
                    </b:includable>

                    Để hiển thị được bài viết gần đây theo nhãn các bạn vào bố cục chọn chỉnh sửa tiện ích thêm tên nhãn muốn hiển thị. Cứ như vậy bạn có thể thêm các tiện ích bài viết gần đây theo nhãn khác, phần css tạo style các bạn tự thiết kế cho phù hợp ví dụ:

                    Copy
                    .recentposts ul{margin:0;padding:0}
                    .recentposts ul li{float:left;padding:0 0 15px 0;list-style:none}
                    .recentposts .imageContainer{float:left;height:90px;margin-right:15px;width:145px}
                    .recentposts img{height:100%;width:100%}
                    .recentposts .label_title{color:#333;font:bold 16px Roboto,sans-serif;line-height:20px;display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:unset}
                    .recentposts .post-summary{font-size:15px;line-height:1.6em;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-top:15px;display:none}

                    Chấm hết bài!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn