Home / Hướng Dẫn / Blogger / Cách tạo Widget bài mới nhất hiển thị theo Label có Thumbnails ảnh

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&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ị đã vừa ý chưa. Chúc các bạn thành công!

About Tạp Chí Tin Học

4 comments

  1. code lỗi tùm lum hết, sao mà add và templates được

    • Tạp Chí Tin Học

      Cám ơn bạn để mình xem lại. Vì code này mình đang sử dụng vẫn xài rất tốt.

      • code lỗi add ơi.. cái khúc đầu code chèn vào trước thể báo lỗi miết á add, bài viết hay cực, nhưng mà có gì đó rồi… add xem lại giúp mình cái nhé

  2. bây giờ mình thấy đa số các bloger sài theme download trên mạng về sài.giống blog của mình vậy vừa nhanh vừa đẹp.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.