[Blogger] Tiện ích hiển thị bài đăng theo nhãn blogger

Tiện ích bài đăng phổ biến ta có thể gặp ở hầu hết template blogger, tuy nhiên nó chỉ hiển thị bài đăng theo tần suất chứ chưa đáp ứng được yêu cầu hiển thị bài đăng theo một nhãn cụ thể nào đó. Dựa trên thiết kế quen thuộc - thumbnail bên trái và title bên phải của bài đăng phổ biến, trong bài viết này chúng ta hãy cùng đi xây dựng tiện ích hiển thị bài đăng theo nhãn blogger

Xem demo tại đây
 DEMO
Code này rất gọn nhẹ, chỉ tải tiêu đề bài viết và ảnh thumbnail ngoài ra không tải comments, đoạn trích ngắn, hay ngày tháng đăng bài,... nên sẽ giảm thiểu đáng kể tốc độ tải trang cho bạn.

Trong bài viết này tôi sẽ để kích thước ảnh thumbnail là 140:90 giống như demo.

Trước tiên bạn đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML

Dán code sau trước thẻ đóng </head>

<script type='text/javascript'>//<![CDATA[
function labelthumbs(e){document.write('<ul id="label_with_thumbs">');for(var t=0;t<num_posts;t++){var l,i,n=e.feed.entry[t],r=n.title.$t;if(t==e.feed.entry.length)break;for(var u=0;u<n.link.length;u++)if("replies"==n.link[u].rel&&"text/html"==n.link[u].type&&(n.link[u].title,n.link[u].href),"alternate"==n.link[u].rel){l=n.link[u].href;break}try{i=n.media$thumbnail.url.replace("s72-c","w140-h90-p-k-no-nu")}catch(e){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),i=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://i.imgur.com/x5ykUQS.png"}document.write('<li class="clearfix">'),show_thumbs&&document.write('<div class="label-thumbnail"><a href="'+l+'" title="'+r+'"><img alt="'+r+'" class="label_thumb" src="'+i+'"/></a></div>'),document.write('<div class="label-title"><a href="'+l+'" title="'+r+'">'+r+"</a></div>"),document.write("</li>")}document.write("</ul>")}
//]]></script>

Trong đó bạn có thể thay đổi

• w140-h90-p-k-no-nu: độ rộng và chiều cao của thumbnail theo ý thích của bạn
• https://i.imgur.com/x5ykUQS.png : ảnh thay thế trong trường hợp bài viết không có ảnh thumbnail

Viết CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&subset=vietnamese');
#label_with_thumbs {
    margin: 0;
    padding: 0
}

#label_with_thumbs li {
    overflow: hidden;
    padding: 15px 15px 15px 0;
    border-top: 1px solid rgba(238, 238, 238, .6);
    position: relative;
    margin: 0
}

#label_with_thumbs li:first-child {
    border-top: none;
    padding: 0 15px 15px 0;
}

#label_with_thumbs li a {
    color: #111;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35em;
    transition: color .3s;
}

#label_with_thumbs .label-thumbnail {
    width: 140px;
    height: 90px;
    margin: 0 15px 0 0 !important;
    float: left;
    overflow: hidden;
}

#label_with_thumbs .label-thumbnail img {
    border-radius: 5px;
    cursor: pointer
}

#label_with_thumbs .label-title {
    padding: 0;
    line-height: 0;
    margin: 0 0 4px;
    -webkit-line-clamp: 4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

#label_with_thumbs .label-title a {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    text-decoration: none
}

Lưu mẫu lại.

Bây giờ bạn chuyển qua phần bố cục, tạo mới một widget và dán nội dung sau

<script type='text/javascript'>//<![CDATA[
var home_page = document.location.origin;
var num_posts = 5;
var label_name = "Sport";
var show_thumbs = true;
document.write("<script src='"+home_page+"/feeds/posts/default/-/"+label_name+"?published&alt=json-in-script&max-results="+num_posts+"&callback=labelthumbs'><\/script>");
//]]></script>

Trong đó bạn có thể thay đổi các biến sau

• num_posts: số bài hiển thị cho widget
• label_name: nhãn muốn hiển thị
• show_thumbs: bật thumbnail = true, tắt = false

Lưu ý: Nếu widget layout của bạn đang ở v3 có thể sẽ thiếu thẻ tiêu đề h2, bạn cần thay đổi <b:includable id='main'>...</b:includable> của widget vừa tạo thành

<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
        <data:content/>
    </div>
    <b:include name='quickedit' />
</b:includable>

Để hiển thị đúng. Ngoài ra bạn có thể tạo không giới hạn các widget để hiển thị bài đăng theo label bạn mong muốn, tuy nhiên không nên quá lạm dụng vì quá trình tải feed quá nhiều sẽ khiến website bị chậm

Việc hiển thị bài đăng theo nhãn này rất phù hợp cho những website về tin tức, người dùng có thể tùy biến rất nhiều so với việc sử dụng tiện ích popular posts truyền thống.

Chúc bạn thành công !