CODE HIỂN THỊ BÀI ĐĂNG THEO NHÃN CÓ ẢNH TRONG BLOGSPOT

Hiển thị bài viết theo nhãn trên trang chủ blogspot

Hôm nay, thuthuatblogger.net xin chia sẻ cách hiển thị bài viết theo nhãn trên trang chủ của blogspot. Dưới đây là hình ảnh thu được say khi chia label của blogspot trên trang chủ

Các bạn thực hiện đầy đủ và từng bước như sau nhé:

- Bước 1: Đăng nhập và Blogspot và truy cập vào phần chính sửa code giao diện

Bước 2:  Sửa code

Tìm dòng ]]></b:skin> và chèn vào trước nó đoạn code bên dưới: 

/* 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; };

Tiếp theo: tìm kiếm thẻ </head>
Chèn đoạn code bên dưới vào trước thẻ </head>

<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/AVvXsEg7Iz2qTmjpe9ksU2j_kYRpuG33Y0Zmb1U3JIzSYf3Dl6Df7dpEssbzHvAa47rAWY1uT-3jc-E4kIMV5VdCL7uM5kgJP7yVeZKKrP2VB0ATKHz_raqcuIcHv0PAK4NX3kl4WguWc7q81Po/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>

Tiếp theo: tìm thế </body>
Chèn đoạn code bên dưới vào trước thẻ đóng </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,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;label_with_thumbs&quot;,210);
</script>

Bước 3: Đưa code vào vị trí cần hiển thị mục chia label ( ở đây là trang chủ).

Có một chú ý là đối với giao diện có hai phần chỉ hiển thị ở  trang chủ và không hiển thị trong trang chủ thì chỉ việc copy đoạn code số 1 bên dưới vào phần chỉ hiển thị ở trang chủ.

<div style='background:#E31A57;color:white;font-family:timesnewroman;font-size:20px;'>Tên hiển thị nhãn</div>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script> 
<script src='/feeds/posts/default/-/Ten_nhan?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>

Còn nếu giao diện nào không có mục chỉ hiện thị ngoài trang chủ thì chèn code số 2 bên dưới vào đoạn cần hiển thị bài viết của nhãn tương ứng.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
/*----Nội dung trên---*/


<div style='background:#E31A57;color:white;font-family:timesnewroman;font-size:20px;'>Ẩm thực </div>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script> 
<script src='/feeds/posts/default/-/amthuc?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>
   

/*---Nội dung dưới---*/


</b:if>

Trong đó code số 1 và code số 2 bạn hãy thay “Tên nhãn hiển thị” thành tên nhãn bạn muốn hiển thị và  “Ten_nhan” là tên thiết lập nhãn khi tạo bài viết.

Hãy like nếu bạn thấy bài viết hay nhé!