/ 2 nhận xét

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

Bài đăng mới nhất theo nhãn

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.
Bài đăng mới nhất theo nhãn
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.

Bước 1: 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>

Bước 2: Chèn CSS
#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ước 3: Vào phần bố cục, tạo widget mới và dán code 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>

Thay đổi cho phù hợp các biến:
 - num_posts: số bài hiển thị cho widget
 - label_name: nhãn muốn hiển thị

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>

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 các bạn thành công!
Nguồn hung1001
Gửi bài hoặc câu hỏi về thienlong433@gmail.com

Ý kiến bạn đọc (2)

  1. A để js click hoặc double click chọn hết code cho tiện đi a.

    Trả lờiXóa
    Trả lời
    1. Hii, anh đang cố "triệt tiêu js" nên đang muốn "nhẹ hóa" cái template này em ạ. Dạo này em có xem world cup chứ nhỉ?

      Xóa

Hình ảnh chủ đề của Mae Burke