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

Xin chào các bạn hôm nay Khoảnh Khắc Đời Sống xin hướng dẫn cách tạo Widget bài viết mới hiển thị theo Label và cóThumbnails ảnh . 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.
Hình Ảnh Minh Họa

DEMO

Widget bài viết mới nhất hiển thị theo Label dạng Thumbnails ảnh

Để 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 ko 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 – thuthuatblogspot.com——————————— */ 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&lt;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/-/Tên label bạn cần hiển thị?published&alt=json-in-script&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ị đã ok chưa.