Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

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

Trần Bá Đạt bởi Trần Bá Đạt
13/09/2020
trong Blogspot, Thủ thuật Blogspot
1
CHIA SẺ
6.3k
LƯỢT XEM
Chia sẻTweetPinChia sẻ

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

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

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

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

&nbsp;<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='http://lh3.ggpht.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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.

  • Xem thêm: Cách tối ưu SEO cho label Blogspot cực dễ dàng

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

3.6/5 - (5 bình chọn)
Chia sẻ1TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 45

  1. Bùi Thanh Hoài says:
    7 năm trước

    Tks Đạt

    Trả lời
  2. Nguyễn Quang Trung says:
    7 năm trước

    Bạn ơi, làm thế nào để hiển thị lable ở trên cái hình thu nhỏ của bài viết ở ngoài trang chủ. Bạn giúp mình với. Cảm ơn bạn nhiều

    Trả lời
  3. Hau says:
    7 năm trước

    Lỗi khi phân tích cú pháp XML, dòng 990, cột 15: Open quote is expected for attribute “type” associated with an element type “script”.

    giúp với

    Trả lời
  4. Thành Nhân says:
    7 năm trước

    Xin phép Ad,
    Cho mình hỏi nếu như blog đã có sẵn tính năng hiển thị nội dung theo label. Vậy mình cần thao tác code thế nào ở phần “Định cấu hình HTML” để kéo label đó ra trang chủ???

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Nếu đã có rồi thì bạn cần làm theo hướng dẫn của template đó để cho nó hiển thị ra ngoài. Mỗi template có 1 kiểu lấy nội dung ra nên mình không rõ cách làm thế nào. Bạn coi trong hướng dẫn documentation của họ đó.

      Trả lời
      • Thành Nhân says:
        7 năm trước

        Thank admin, để mình xem thử.

        Trả lời
  5. Trần Quang Đức says:
    7 năm trước

    – Xin chào admin ! mình làm theo bạn mà không được . Bạn có thể tìm nguyên nhân giúp mình đc không ! thank admin rất nhiều.
    – Mình muốn các bài viết của mình hiển thị ra theo từng nhãn như bài hướng dẫn có cả thumbail và nội dung rút gọn như https://news52-msdesignbd.blogspot.com

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Hiện tại hướng dẫn này đang bị lỗi rồi nha bạn. Không xài được.
      Cách đơn giản nhất hiện nay để đáp ứng yêu cầu của bạn là sử dụng các template có sẵn tính năng này, bạn có thể vào mục Template Blogspot này để tìm những template có nhé laugh

      Trả lời
  6. Nguyễn Ngọc Quí ✔ says:
    8 năm trước

    không hiển thị smile

    Trả lời
  7. Trần Bá Đạt says:
    8 năm trước

    Cái này chắc phải để mình kiểm tra mới biết là do lỗi gì laugh

    Trả lời
  8. Ckfoody - Châu Kiên says:
    8 năm trước

    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!

    Trả lời
  9. van duong says:
    8 năm trước

    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

    Trả lời
  10. Trần Bá Đạt says:
    8 năm trướ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.

    Trả lời
  11. I - T BOY says:
    8 năm trước

    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.

    Trả lời
  12. Cuong Nguyen says:
    8 năm trước

    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

    Trả lời
  13. Đỗ Xuân Hưởng says:
    8 năm trước

    ko duoc rui anh oi

    Trả lời
  14. Minh Nguyen says:
    9 năm trước

    This comment has been removed by the author.

    Trả lời
  15. Nguyễn Quang An says:
    9 năm trướ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

    Trả lời
  16. Nguyễn Quang An says:
    9 năm trước

    This comment has been removed by the author.

    Trả lời
  17. Nga.urcom says:
    9 năm trước

    không đc

    Trả lời
  18. Hòa Trần Văn says:
    9 năm trước

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

    Trả lời
  19. Quốc BiT says:
    9 năm trước

    Không Được

    Trả lời
  20. Khánh Lê says:
    9 năm trước

    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

    Trả lời
  21. Nhật Linh says:
    9 năm trước

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

    Trả lời
  22. Max Ping says:
    9 năm trước

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

    Trả lời
  23. Lan Phong says:
    9 năm trước

    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/

    Trả lời
  24. Blenken says:
    9 năm trước

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

    Trả lời
  25. Mai Huu Khanh says:
    9 năm trước

    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…

    Trả lời
  26. Nien Ba says:
    9 năm trước

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

    Trả lời
  27. Phạm Đình Ngọc says:
    9 năm trước

    không được, hic

    Trả lời
  28. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    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.

    Trả lời
  29. EDG - LAPTOP SERVICE says:
    9 năm trước

    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.

    Trả lời
  30. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    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 laugh

    Trả lời
  31. Đoàn Hồng Hà says:
    9 năm trước

    sao không được ad ơi

    Trả lời
  32. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    OK. Để mình kiểm tra lại code! @-)

    Trả lời
  33. Hùng Hoàng says:
    10 năm trước

    ko đc

    Trả lời
  34. MyPhamOhui Han Quoc says:
    10 năm trước

    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!

    Trả lời
  35. Nguyen Thanh Truong says:
    10 năm trước

    không được rồi…

    Trả lời
  36. Nguyễn Hữu Độ says:
    10 năm trước

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

    Trả lời
  37. Nguyễn Hữu Độ says:
    10 năm trước

    Ko hiển thì được Label thi sao a

    Trả lời
  38. Tuan Le says:
    10 năm trước

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

    Trả lời
  39. Trần Bá Đạt _CTPG_ says:
    10 năm trước

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

    Trả lời
  40. Tuan Le says:
    10 năm trước

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

    Trả lời
  41. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Bị lỗi gì à bạn? @-)
    Nói rõ mình xem

    Trả lời
  42. Lan Huynh says:
    10 năm trước

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

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    62 chia sẻ
    Chia sẻ 60 Tweet 0
  • Hướng dẫn nhận key Office 2019 bản quyền, active Office 2019

    58 chia sẻ
    Chia sẻ 57 Tweet 0
  • Tải về Microsoft Office 2019 Retail chính thức phiên bản mới nhất

    22 chia sẻ
    Chia sẻ 21 Tweet 0
  • Template MagOne bản quyền 21$ – Chia sẻ miễn phí

    2 chia sẻ
    Chia sẻ 1 Tweet 0
  • Template MagNews bản quyền – Chia sẻ hoàn toàn miễn phí

    14 chia sẻ
    Chia sẻ 11 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.