Cách tạo Widget bài mới nhất hiển thị theo Label có Thumbnails ảnh

Chào các bạn hôm nay chúng tôi xin hướng dẫn cách tạo Widget hiển thị bài viết mới theo Label và có Thumbnails ảnh cho blogger. Mục đích việc này giúp blog của bạn sinh động hơn và khiến người đọc dễ theo dõi và có thể đọc nhiều bài viết hơn.

Để làm cái này ,bạn cần thực hiện theo bước sau.

Bước 01: Login blogspot > Template (Mẫu) > Edite HTML (Chỉnh sửa HTML).

– Chú ý: trước khi edit nên backup code gốc tránh khi sửa sai không khôi phục lại được nhé.

Bước 02: Thêm code dưới lên trước đoạn code ]]></b:skin> (dùng ctrl F để tìm nhé)

/* Recent posts by labels */
img.label_thumb{
 float:left;margin-right:10px !important;
 height:65px; /* Thumbnail height */
 width:65px; /* Thumbnail width */
 border: 1px solid #fff;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs {
 float: left;
 width: 100%;
 min-height: 70px;
 margin: 0px 10px 2px 0px;
 padding: 0;
}
ul#label_with_thumbs li {
 padding:8px 0;
 min-height:65px;
 margin-bottom:0px;
 border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
 list-style: none ;
 padding-left:0px !important;}
#label_with_thumbs a {text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px;}

Bước 3: Copy đoạn code dưới trước thẻ đóng </head>

<strong><br>');
if(“content”in entry){
    var postcontent=entry.content.$t;
} elseif (“summary”in entry){
    var postcontent=entry.summary.$t;
} else var postcontent=””;
var re=/<\S[^>]*>/g;
postcontent=postcontent.replace(re,””);
if(showpostsummary==true){
    if(postcontent.length<numchars){
        document.write(”);
        document.write(postcontent);
        document.write(”);
    } else{ 
        document.write(”);
        postcontent=postcontent.substring(0,numchars);
        var quoteEnd=postcontent.lastIndexOf(” “);
        postcontent=postcontent.substring(0,quoteEnd);
        document.write(postcontent+'…');
        document.write(”);
    }
} 
var towrite='';
var flag=0;
document.write('<br>');

if(showpostdate==true){
    towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;
    flag=1;
}
if(showcommentnum==true){
    if(flag==1){
        towrite=towrite+' | ';
    }
    if(commenttext=='1 Comments')commenttext='1 Comment';
    if(commenttext=='0 Comments')commenttext='No Comments';
    commenttext='<a href=”'+commenturl+'” target =”_top”>'+commenttext+'<a>';
    towrite=towrite+commenttext;flag=1;;
}
if(displaymore==true){
    if(flag==1)towrite=towrite+' | ';
    towrite=towrite+'<a href=”'+posturl+'” class=”url” target =”_top”>More »<a>';
    flag=1;;
}
document.write(towrite);
document.write('<li>');
    if(displayseparator==true)if(i!=(numposts-1))document.write(”);
}
document.write('<ul>');
}//]]><script>

Bước 4: Thêm code dưới ở trước thẻ </body>

<script type='text/javascript'>
function changeThumbSize(id,size) {
    var blogGadget = document.getElementById(id);
    var replacement = blogGadget.innerHTML;
    blogGadget.innerHTML = replacement.replace(/s72-c/g,”s”+size+”-c”);
    var thumbnails = blogGadget.getElementsByTagName(“img”);
    for(var i=0; i < thumbnails.length;i++){
        thumbnails[i].width = size;
        thumbnails[i].height = size;
    }
}
 changeThumbSize(“label_with_thumbs”,210);
</script>

Sau đó bạn save template lại

Bước 5: bạn tạo 01 widget mới đặt tên tùy ý. Và copy code dưới đây vào để kích hoạt:

<script type="text/javascript">
    var numposts = 3;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = true;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Ten-label-ban-can-hien-thi?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Tinh chỉnh theo ý thích :
– var numposts ← Là số bài viết muốn hiển thị
– var showpostthumbnails ← Hiển thị hoặc không hiển thị ảnh (true nghĩa là có hiển thị)
– var displaymore ← Có hiển thị read more link không
– var displayseparator ← Hiện thị ngăn cách bài
– var showcommentnum ← Hiển thị số lượng comment
– var showpostdate ← Hiển thị ngày post bài
– var showpostsummary ← Hiển thị hay khôgn tổng số bài
– var numchars ← Hiển thị số lượng chữ ( bthg là 100 chữ cái)

Cuối cùng là bạn ra xem blog bạn hiển thị đã vừa ý chưa. Chúc các bạn thành công!