Hiển thị bài viết theo nhãn kèm theo hình ảnh thu nhỏ ngoài trang chính của blog vô cùng đơn giản và dễ dàng. Việc hiển thị bài viết kèm theo nhãn ngoài trang chủ của blog sẽ giúp trang Blogspot của bạn chuyên nghiệp và đẹp mắt hơn. Bây giờ bạn và Việc làm và Định cư cùng thực hiện những bước đơn giản để hiển thị bài viết theo nhãn nhé.
Ảnh Demo chup từ Blogpost của mình
Bước 1: Từ Blogger Dashboard bạn chọn "Chủ Đề" sau đó chọn "Chỉnh sửa HTML". Tiếp theo các bạn ấn "Ctrl +F" để tìm từ thẻ ]]> </ b: skin>
Các bạn chèn đoạn code sau lên phía trên thẻ ]]> </ b: skin>
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:90px; /* Thumbnail height */
width:90px; /* 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 {
font-family:timesnewroman;
padding:8px 0;
font-size:18px;
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 2: Các bạn tìm đến thẻ : </head> và thêm đoạn code sau lên phía trên thẻ : </head> nhé.
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtNcq2FQYmjotc-fyI1VfFtm2i41tkGRBfO2VS8swXZqDua8064e3yo4GwEVxDyDJnKP3TriDZ7teCNKalIxNFGBCLw_nsayY_nKul6FRi8JsZr3vxVnjN41JOm1whldqvPLWmNN-tIg/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("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 3: Các bạn tìm đến thẻ </body> và thêm đoạn code sau lên phía trên thẻ </body>. Mục đích của việc này là để blog của bạn tương thích với mọi độ phân giải nhé.
<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>Bước 4: Các bạn kích Lưu lại nhé
Bước 5: Bây giờ các bạn quay lại trang chủ Blog của bạn. Các bạn kích vào "Bố Cục" . Sau đó các bạn muốn hiển thị nhãn ở vị trí nào thì kích chọn "Thêm tiện ích" ở vị trí đó và chọn HTML/Javascript widget và dán đoạn mã phía dưới vào.
<!-- Đoạn này để hiển nhãn có ảnh thu nhỏ --> <div style='background:#E31A57;color:white;font-family:timesnewroman;font-size:20px;'>Cổng thông tin chính phủ</div> <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script> <script src='/feeds/posts/default/-/%232.CTTCP?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/></script> <!-- Đoạn này để hiển nhãn có ảnh thu nhỏ --> <!-- Đoạn này không có hình ảnh thu nhỏ --> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="https://dinhcuvieclam.blogspot.com/feeds/posts/summary/-/%232.CTTCP?max-results=3&alt=json-in-script&callback=recentpostslist"></script> <!-- Đoạn này không có hình ảnh thu nhỏ -->
Lưu ý:
1.Các bạn thay:
- Tên nhãn "%232.CTTCP" thành nhãn trên thanh menu chính của các bạn nhé. Lưu ý là phải viết đúng chính xác tên trên thanh menu của các bạn nhé.
- Link: https://dinhcuvieclam.blogspot.com thành link Blogpost của bạn
- 3: Số bài viết hiển thị
DEMO
2. Các bạn có thể tùy chỉnh những thông số sau
var numposts ← Số bài viết muốn hiển thị
var showpostthumbnails ← Show/hide ảnh thu nhỏ
var displaymore ← Show or hide link đọc tiếp
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)
Các bạn có bất kì câu hỏi gì liên quan đến việc hiển thị bài viết theo nhãn kèm theo hình ảnh thu nhỏ ngoài trang chính của blogspot thì comment bên dưới bài viết nhé. Mình sẽ giải đáp giúp các bạn.
Đăng nhận xét