{tocify} $title = {Mục lục bài viết}
Thủ thuật này sử dụng các label để hiển thị các bài viết chứa trong label đó. Rõ ràng so với cách hiển thị truyền thống là phân trang thì cách phân bài viết theo các chuyên mục như thế này giúp độc giả dễ dàng tìm kiếm được các thông tin trong cùng một chủ đề mà họ quan tâm
Để thực hiện, các bạn làm theo các bước sau:
- Bước 1: Đăng nhập vào trang quản trị Blogger: https://www.blogger.com
Lưu ý: Trước khi chỉnh sửa các bạn nên back up lại code web trước nhé
- Bước 2: Vào Mẫu (Template) -> Chỉnh sửa HTML
- Bước 3: Tìm đến thẻ]]></b:skin>, sau đó thêm đoạn code này vào phía trên nó:
img.label_thumb{
float:left;
margin-right:15px !important;
height:65px;
/* Thumbnail height */
width:65px;
/* Thumbnail width */
border: 1px solid #ff00ff;
}
#label_with_thumbs {
float: left;
width: 100%;
min-height: 80px;
margin: 0px 15px 2px 0px;
padding: 1;
}
ul#label_with_thumbs li {
padding:6px 0;
min-height:60px;
margin-bottom:1px;
border-bottom: 1px solid #ff99ff;
}
#label_with_thumbs li{
list-style: none ;
padding-left:1px !important;
}
#label_with_thumbs a {
text-transform: none;
}
#label_with_thumbs strong {
padding-left:1px;
}
Bước 4: Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
<
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/AVvXsEhlRmgOieSrEewvXMkx5r1NJXkTeOob2Q0GRsWR1by6eNGqA90OBiG0SfYooQgD_uq9eB4RUS-uTJw9M0ZtUxHTK5iL7JbT84HRCD2mfyPv0qNgtn2S1316-sCn2T1EFkr-tVNBoBrlyg/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;}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>
Sau đó lưu template lại
Bước 5: Cuối cùng, vào Bố cục, chọn vị trí mà bạn muốn hiển thị theo label, và thêm tiện ích (Add widget), chọn HTML/Javascript và thêm đoạn code này vào trong nó:
<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/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
[tintuc]
Bạn có một blogspot và muốn trang chủ có giao diện đẹp mắt, thu hút giống một trang báo điện tử? Hiển thị bài viết theo label tại trang chủ blogspot, giúp trang chủ phân ra nhiều chuyên mục, độc giả sẽ dễ dàng tiếp cận nhiều bài viết hơn trên blog của bạn.
Thủ thuật này sử dụng các label để hiển thị các bài viết chứa trong label đó. Rõ ràng so với cách hiển thị truyền thống là phân trang thì cách phân bài viết theo các chuyên mục như thế này giúp độc giả dễ dàng tìm kiếm được các thông tin trong cùng một chủ đề mà họ quan tâm
Để thực hiện, các bạn làm theo các bước sau:
- Bước 1: Đăng nhập vào trang quản trị Blogger: https://www.blogger.com
Lưu ý: Trước khi chỉnh sửa các bạn nên back up lại code web trước nhé
- Bước 2: Vào Mẫu (Template) -> Chỉnh sửa HTML
- Bước 3: Tìm đến thẻ]]></b:skin>, sau đó thêm đoạn code này vào phía trên nó:
img.label_thumb{
float:left;
margin-right:15px !important;
height:65px;
/* Thumbnail height */
width:65px;
/* Thumbnail width */
border: 1px solid #ff00ff;
}
#label_with_thumbs {
float: left;
width: 100%;
min-height: 80px;
margin: 0px 15px 2px 0px;
padding: 1;
}
ul#label_with_thumbs li {
padding:6px 0;
min-height:60px;
margin-bottom:1px;
border-bottom: 1px solid #ff99ff;
}
#label_with_thumbs li{
list-style: none ;
padding-left:1px !important;
}
#label_with_thumbs a {
text-transform: none;
}
#label_with_thumbs strong {
padding-left:1px;
}
Bước 4: Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
<
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/AVvXsEhlRmgOieSrEewvXMkx5r1NJXkTeOob2Q0GRsWR1by6eNGqA90OBiG0SfYooQgD_uq9eB4RUS-uTJw9M0ZtUxHTK5iL7JbT84HRCD2mfyPv0qNgtn2S1316-sCn2T1EFkr-tVNBoBrlyg/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;}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>
Sau đó lưu template lại
Bước 5: Cuối cùng, vào Bố cục, chọn vị trí mà bạn muốn hiển thị theo label, và thêm tiện ích (Add widget), chọn HTML/Javascript và thêm đoạn code này vào trong nó:
<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/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó, chỗ label name, các bạn thay bằng tên label muốn hiển thị.
– Lưu lại và reload lại trang và tận hưởng thành quả nhé
Nếu muốn thêm các label khác, bạn chỉ cần lấy đoạn code trên đổi label name thành các label khác rồi thêm vào các vị trí bạn muốn. Nếu bạn có thắc mắc gì, hãy để lại ở phần bình luận, mình sẽ giải đáp nhé
[/tintuc]
Post a Comment