Thủ thuật Blogspot này sẽ sử dụng các label để hiển thị các bài viết trong các label này. Ví dụ, các bạn có thể thấy ở trang chủ của mình. Đó là các label: Blogspot, Windows, SEO, Thủ thuật CNTT và Ninja Coming. Mỗi label sẽ hiển thị các bài viết nằm trong Label đó. Rõ ràng với cách hiển thị truyền thống là phân trang của blogspot thì các phân các chuyên mục như thế này giúp độc giả dễ dàng tiếp cận các thông tin mà chúng ta đang cung cấp.
Hướng dẫn hiển thị bài viết theo label tại trang chủ Blogspot
- Như thường lệ, tốt nhất trước khi chỉnh sửa chúng ta nên Backup lại code web trước đã.- Truy cập vào trang quản trị Blogger: https://www.blogger.com
- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):
- Click vào vùng code, và 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;}- Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
#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; }
<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/AVvXsEj50H8jZObWWZsb9folNMEoRP6XrcBJI8ZmMUts5TmEQH3xTA9Q1Ytn9UonfXycXN9btSbWKsL-y1jNnTSdzbUNNssGNgyRMgAoNfS0sGl4ev0s6k8cryFejk7hq6H01-xGR1cUqlvAeWg/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.
- Cuối cùng, vào Bố cục (Layout), 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ị ở trang chủ nhé.
- Lưu lại và tận hưởng thành quả, bạn đã có thể hiển thị bài viết theo label tại trang chủ blogspot rồi đấy.
Và nếu muốn thêm các label khác, bạn chỉ cần lấy đoạn code phía trên đổi label name thành các label khác rồi thêm vào các vị trí muốn thôi. Và để có giao diện thật đẹp như của mình thì các bạn cần biết CSS để chỉnh sửa bố cục trang web nhé.
Post a Comment
Sao em ko làm được, a có thể giúp em không?
Bị lỗi gì à bạn? @-)
Nói rõ mình xem
blog cua ban dep that,minh chi muon hien thi giong muc "Thủ thuật CNTT" cua ban thi lam nhu the nao ?
Giống mục này phải có code JS khác nữa :D
bạn chỉ mình làm cái đó với,chỉ thích mỗi cái Thủ thuật CNTT
E làm sao lại không hiển thị được Label lên trang chủ nhi?
Ko hiển thì được Label thi sao a
không được rồi...
Mình cũng làm theo hướng dẫn 3 bước trên, nhưng sao không được Bá Đạt ơi!
ko đc
OK. Để mình kiểm tra lại code! @-)
sao không được ad ơi
OK, mấy nay bận quá mình chưa có kiểm tra lại code được. Sr các bạn nha :D
anh cho hỏi cách lấy link của nhãn (label) để chèn vào menu. Như trước đây chỉ cần trỏ chuột vào nhãn và copy link là được nhưng bây giờ làm thế thì toàn báo lỗi.
Bạn lấy nhãn ở ngoài trang web đó, kiểu gì giao diện bạn cũng để lại cái nhãn mà. Thì copy link ở đó thôi.
không được, hic
Không làm được anh ơi
không hiển thị gì hết
Cũng không làm được! Hiện nhãn nhưng không hiện bài! Thử code khác cũng được nhưng trông không đẹp lắm...
code bị hiển thị dưới dạng chú thích rồi Đạt ơi!
blog em không hiển thị một bài viết nào cả. làm theo anh hướng dẫn mà vẫn không được, anh xem hộ với
http://testblogbanhang.blogspot.com/
chả hiển thị dc gì :((
chỉnh sửa lại code chưa bạn
bạn cho mình hỏi cái nầy chỉ chèn bên thanh bên thôi hay chèn vào giữa trang chủ được bạn
Không Được
blog mình không hiện bài viết khi nhấn search theo label...
không đc
a ơi sao e vào nhãn Mà nó Ko Hiển Thi Được ạ, A Xem Giúp e với ạ,http://www.shareandshare.info/search/label/L%E1%BA%ADp%20Tr%C3%ACnh%20C%2FC%2B%2B
ko duoc rui anh oi
Muốn hiển thị riêng mục bài viết mới nhất thì làm như nào bạn? 2 chế độ grid và list như của bạn ý vì nó k có label gì hết
Anh ơi cho em hỏi em có một blog mà muốn chỉnh số lượng bài trên mỗi trang cho nó đều nhau thì làm thế nào ạ? em tìm và làm theo nhiều trang rồi mà không được.
Ủa, hầu như ở trang nào cũng đều có số lượng bài giống nhau mà bạn. Nếu không giống thì chắc do bạn không chèn dấu ngắt bài viết khiến mấy bài dài quá làm các bài khác không hiển thị ra thôi.
bạn có thể tham khảo video của mình tại đây nhé. hi vọng có thể giúp ích cho các bạn
https://www.youtube.com/watch?v=OX9eFx28c6E
Bạn cho hỏi mình đã viết bài, đặt nhãn nhưng khi click vào các nhãn thì ko có bài viết mà ra trang trắng là do lỗi gì vậy bạn? ở trang chủ thì vẫn hiển thị bài viết bình thường nhưng khi click vào "xem tất cả" lại ra trang trắng. cảm oan nhiều!
Cái này chắc phải để mình kiểm tra mới biết là do lỗi gì :D
không hiển thị :)