Home Blogspot Thủ thuật Blogspot Hiển thị bài viết theo label tại trang chủ Blogspot

Hiển thị bài viết theo label tại trang chủ Blogspot

September 24, 2015 29 blogger
A+ A- Print Email
Bạn muốn một trang chủ Blogspot có giao diện đẹp, hấp dẫn giống một trang báo tương tự như của tranbadat.info hay nhiều trang web khác? Các bài viết sẽ hiển thị theo các label, giúp chúng ta phân ra nhiều chuyên mục tại trang chủ, nhằm giúp độc giả tiếp cận nhiều hơn với các bài viết trên blog.

Hiển thị bài viết theo label tại trang chủ Blogspot

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):

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;}
#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; }
- 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/AVvXsEhazHSaCbVJduiWfOh9X9JSWfRvWlykE7xI0zf2oBi1JFhEjB9eTjM8FLz2-v-FFeh6hpQxLo_cZfX-4HNYn9oukyrJHXjKqt_ghlUKm0IkNSXh0iP8u9vj4_otq-Qfjt5u1vgN0et8tN0/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é.
Nhãn: ,

Post a Comment

  1. Lan HuynhSeptember 25, 2015 at 6:53 AM

    Sao em ko làm được, a có thể giúp em không?

    ReplyDelete
  2. Tuan LeSeptember 26, 2015 at 6:39 AM

    blog cua ban dep that,minh chi muon hien thi giong muc "Thủ thuật CNTT" cua ban thi lam nhu the nao ?

    ReplyDelete
    Replies
    1. Trần Bá Đạt _CTPG_September 26, 2015 at 8:02 AM

      Giống mục này phải có code JS khác nữa :D

      Delete
    2. Tuan LeSeptember 30, 2015 at 4:25 AM

      bạn chỉ mình làm cái đó với,chỉ thích mỗi cái Thủ thuật CNTT

      Delete
  3. Nguyễn Hữu ĐộOctober 27, 2015 at 7:38 PM

    E làm sao lại không hiển thị được Label lên trang chủ nhi?

    ReplyDelete
  4. Nguyen Thanh TruongDecember 10, 2015 at 5:51 PM

    không được rồi...

    ReplyDelete
  5. MyPhamOhui Han QuocDecember 13, 2015 at 2:23 AM

    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!

    ReplyDelete
  6. Hùng HoàngDecember 26, 2015 at 12:58 AM

    ko đc

    ReplyDelete
  7. Đoàn Hồng HàJanuary 10, 2016 at 1:52 AM

    sao không được ad ơi

    ReplyDelete
    Replies
    1. Trần Bá Đạt _CTPG_January 10, 2016 at 2:03 AM

      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

      Delete
  8. EDG - LAPTOP SERVICEJanuary 12, 2016 at 12:31 AM

    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.

    ReplyDelete
    Replies
    1. Trần Bá Đạt _CTPG_January 12, 2016 at 3:22 AM

      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.

      Delete
  9. Phạm Đình NgọcJanuary 13, 2016 at 5:27 AM

    không được, hic

    ReplyDelete
  10. Nien BaJanuary 16, 2016 at 12:12 AM

    Không làm được anh ơi
    không hiển thị gì hết

    ReplyDelete
  11. Mai Huu KhanhFebruary 13, 2016 at 8:10 PM

    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...

    ReplyDelete
  12. BlenkenFebruary 25, 2016 at 7:42 AM

    code bị hiển thị dưới dạng chú thích rồi Đạt ơi!

    ReplyDelete
  13. Lan PhongFebruary 26, 2016 at 2:18 AM

    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/

    ReplyDelete
  14. Max PingMarch 11, 2016 at 1:36 AM

    chả hiển thị dc gì :((

    ReplyDelete
  15. Nhật LinhApril 20, 2016 at 9:44 AM

    chỉnh sửa lại code chưa bạn

    ReplyDelete
  16. Khánh LêJune 11, 2016 at 2:00 AM

    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

    ReplyDelete
  17. Quốc BiTJune 24, 2016 at 6:19 AM

    Không Được

    ReplyDelete
  18. Nguyễn Quang AnAugust 9, 2016 at 1:05 AM

    This comment has been removed by the author.

    ReplyDelete
  19. Hòa Trần VănAugust 11, 2016 at 12:54 AM

    blog mình không hiện bài viết khi nhấn search theo label...

    ReplyDelete
  20. Nga.urcomAugust 12, 2016 at 2:41 AM

    không đc

    ReplyDelete
  21. Minh NguyenOctober 17, 2016 at 8:22 AM

    This comment has been removed by the author.

    ReplyDelete

Subscribe to: Post Comments (Atom)
[blogger]
Test © 2016. All Rights Reserved.
Powered by Blogger

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.