Tạo bài viết mới theo nhãn chi tiết cho blogger/blogspot

Share:
Chào các bạn, mới gần đây mình có cập nhật hệ thống hiển thị bài viết theo nhãn cho blog của mình. Nó giúp cho mọi người có một cái nhìn tổng quan hơn về các mục chính trong blog hơn. Và bây giờ mình sẽ chia sẻ cách làm thế nào để tạo bài viết theo nhãn cho blogger với các bạn nhé. Code gốc được mình lấy bên Idblanter chỉ edit và tối ưu lại cho đỡ phải dùng nhiều class, id và chỉnh màu, bố cục, responsive thôi.

Tạo bài viết mới theo nhãn chi tiết cho blogger/blogspot

Bài mới theo nhãn - Recent Posts By Label For Blogger

Bước 1: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Thêm toàn bộ code dưới trước thẻ
</head>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style type='text/css'> /* CSS Recent Post by Label */ .npclabel-wrapper{background:#fff; padding:0 10px;} .npclabel ul{list-style:none;margin:0;padding:0} .npclabel li{margin:0;padding:0} .npclabel .widget{margin:0;padding:0;border-bottom:4px solid #e6e6e6} .npclabel .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden} .npclabel h2{position:relative;margin:0;padding:5px 0;font-size:13px;font-weight:400;margin-bottom:15px} .data-title{color:#2b5cb9;border-bottom:2px solid #2b5cb9;padding:3px 5px;font-size: 15px;font-weight: 500;text-transform: capitalize} .npclabel .index{font-size:15px;font-weight:400} .npclabel .index a{padding:3px 5px;border-bottom:2px solid #2b5cb9;color:#2b5cb9;float:right;font-weight:500;transition:all 0.3s ease;} .npclabel .index a:after{content:&#39;\f101&#39;;font-family:fontawesome;visibility:hidden;opacity:0;transition:all 0.3s ease;position: absolute; margin-top: 4px;right: -18px;} .npclabel .index a:hover:after{opacity:1;visibility:visible;right:0} .npclabel .index a:hover{padding-right:13px} .npclabel span.npc_meta_comment a:hover{color:#2b5cb9!important} .npclabel ul.npc_thumbs li a:hover,.npclabel ul.npc_thumbs2 li a:hover{color:#2b5cb9;text-decoration:none} .npc_left{margin:0;padding:0;} .npc_left .cat_thumb{float:left;margin-right:10px!important} .npc_right{float:left;padding:0} ul.npc_thumbs{margin:0;padding:0} ul.npc_thumbs li,ul.npc_thumbs2{margin:0;padding:0} ul.npc_thumbs .cat_thumb{position:relative;margin:0;padding:0;width:252px;height:145px} ul.npc_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s} ul.npc_thumbs .cat_thumb img:hover{opacity:.9} ul.npc_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:60px;float:left;margin-right:10px!important;} ul.npc_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;height:72px;overflow:hidden} ul.npc_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s} ul.npc_thumbs2 .cat_thumb2 img:hover{opacity:.9} span.npc_title{font-size:18px!important;font-weight:500;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:48px;overflow:hidden} span.npc_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px} span.npc_title a{color:#333}span.npc_title a:hover{color:#2b5cb9;text-decoration:none} span.npc_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0} span.npc_meta{display:block;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.npc_meta a{color:#aaa;display:inline-block} span.npc_meta_date,span.npc_meta_comment,span.npc_meta_more{display:inline-block;margin-right:10px} span.npc_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px} span.npc_meta_comment a:hover{color:#2b5cb9!important} span.npc_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px} ul.npc_thumbs2 li a:hover,ul.npc_thumbs li a:hover{color:#2b5cb9;text-decoration:none} @media screen and (min-width:1024px) and (max-width:1025px){span.npc_meta{display:none!important}ul.npc_thumbs2 li{width:21%!important}} @media only screen and (max-width:768px){ul.npc_thumbs2 li{width:30%!important}.tanggal i,.tags i{color:#ff8000!important}.npc_right{width:100%;float:left;margin:0;padding:0}span.npc_title2{max-height:33px!important}ul.npc_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.npclabel .widget-content{margin-top:10px}span.npc_summary,.npc_left{display:none}span.npc_title a{font-weight:500}span.npc_title{margin:0 0 5px}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.npc_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:640px){ul.npc_thumbs2 li{width:22%!important}} @media only screen and (max-width:480px){ul.npc_thumbs2 li{width:49%!important}} @media screen and (max-width:320px){ul.npc_thumbs2 li{width:60%!important}ul.npc_thumbs2 .cat_thumb2 img{width:80px;height:50px}.npc_right{width:100%;float:left;margin:0;padding:0}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px}span.npc_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px){.npc_right{width:100%;float:left;margin:0;padding:0}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px}span.npc_title2{font-size:18px;line-height:1.2em}} </style> </b:if> </b:if> <script type='text/javascript'> //<![CDATA[ function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="Tháng 1",g[2]="Tháng 2",g[3]="Tháng 3",g[4]="Tháng 4",g[5]="Tháng 5",g[6]="Tháng 6",g[7]="Tháng 7",g[8]="Tháng 8",g[9]="Tháng 9",g[10]="Tháng 10",g[11]="Tháng 11",g[12]="Tháng 12",document.write('<span class="npc_left">'),document.write('<ul class="npc_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="npc_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="npc_meta">'),1==showpostdate&&(v=v+'<span class="npc_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="npc_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="npc_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="npc_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="npc_right">'),document.write('<ul class="npc_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="npc_title npc_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="npc_meta npc_meta2">'),1==showpostdate2&&(v=v+'<span class="npc_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="npc_meta_comment npc_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="npc_meta_more npc_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")} //]]> </script> <script type='text/javascript'> var numposts=1,numposts2=5,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=50,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb=&quot;https://3.bp.blogspot.com/-bP9BhHzcg3c/VulaYI1KgPI/AAAAAAAADlY/an6hlFHd5BQAUhNQbriNvTLripE4v5EQA/s320/blanter_thumb.png&quot;,no_thumb2=&quot;https://2.bp.blogspot.com/-9deKCtKRtvU/VulaYPTKW6I/AAAAAAAADlU/wb9d_4ysGPIC-ytki80VChZiMPrz7Af2w/s1600/blanterthumb_small.png&quot;; </script>
Bước 3: Thêm code hiển thị tại bất kì cho nào bạn thấy phù hợp (nằm trong cặp thẻ
<body>...</body>
, nếu muốn thêm vào vị trí như blog mình thì bạn tìm
<b:section class='main' id='main' showaddelement='no'>
và chèn code dưới trước đoạn vừa tìm được nhé)
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='npclabel-wrapper'> <b:section class='npclabel' id='npclabel1' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML80' locked='false' title='Tiêu đề 1' type='HTML'> <b:includable id='main'> <h2><span class='data-title'><data:content/></span><span class='index'>&lt;a title=&#39;Xem thêm&#39; href=&#39;/search/label/<data:content/>?&amp;max-results=10&#39;&gt;Xem thêm&lt;/a&gt;</span></h2> <div class='widget-content'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script> </div> </b:includable> </b:widget> </b:section> </div> </b:if>
Bước 4: Lưu template và chuyển qua Bố cục. Tại đây bạn sẽ thấy có vài tiện ích HTML/Javascript vừa được thêm vào, hãy chỉnh sửa từng tiện ích bằng cách thêm Tiêu đềTên nhãn muốn hiển thị bài mới ví dụ như hình dưới:

Lưu ý:

Tên nhãn trong khung Nội dung phải viết đúng như tên nhãn trong blog bạn nhé tức sẽ phân biệt chữ hoachữ thường đấy.
Điền xong thì Lưu tiện ích lại.
Để thêm các widget khác thì bạn thêm code như ở bước 3 và chỉnh khác id phần b:section đi là được nhé, ví dụ npclabel1, npclabel2...

Bonus

Phần này dành cho bạn nào đã ẩn mục bài viết mới mặc định của blog đi rồi nhé (blog mình cũng bỏ rồi để tạo sự nhất quán ấy mà). Khi đó để hiển thị bài viết mới mà vẫn dùng style của bài theo nhãn này bạn sửa như sau:
Trong code widget định hiện bài mới chung chung ở bước 2, bạn tìm script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;
và sửa lại thành
script src=\&quot;/feeds/posts/default?orderby=published&amp; là được nhé.

Kết luận

Trên đây, mình vừa hướng dẫn xong cho các bạn cách để tạo bài viết mới theo nhãn cho blog rồi đấy. Bạn hoàn toàn có thể tùy biến sao cho ra nhiều sản phẩm độc đáo hơn nữa nhé. Nếu có bất kì vấn đề gì hãy để lại bình luận dưới bài nha.

36 nhận xét:

  1. Ủa ông hết bị chặn link rồi hả?

    Trả lờiXóa
    Trả lời
    1. T hết từ lâu rồi ông. Kháng nghị 2 lần với Facebook rồi cứ để đó tự nhiên nó đc.

      Xóa
  2. Ê cái bước 3 và bước 4 hơi khó hiểu chút, tức là bước 3 đặt ở đâu?

    Trả lờiXóa
    Trả lời
    1. Bước 3 là đặt ở bất kì chỗ nào ông thích ấy, nếu muốn như blog t thì tìm dòng kia và chèn trước nó tức là đặt ngay trên mục các bài mới nhất mặc định của blog ấy ông. Chèn xong thì lưu temp lại rồi qua bước 4 điền tên nhãn thì nó mới hiển thị đc.

      Xóa
    2. Ông phải nói rõ là chèn vô thẻ body hay sao ý, chứ đưa ra ngoài body hay ra ngoài head thì ở đó mà hiện hả :v

      Xóa
    3. Đợi tí t update lại, trong css còn thiếu css responsive nữa.

      Xóa
    4. ông koi lại mấy cái bước đi, hình như tui thấy nó sai sai sao á

      Xóa
    5. Ông có cần xem bài gốc k thì t gửi? Chứ t chưa thấy nó sai ở đâu đâu, chỉ thiếu cái ông bảo là nói rõ chèn ở đâu thôi.

      Xóa
    6. Đã ok rồi nhé, ghé blog tui xem ok ko :v

      Xóa
    7. Blog ông xài cái này nhìn nó hợp thế nào ý. Đem về Blog tui cảm thấy nó thiếu sự cân đối nên tui tháo rồi :v

      Xóa
    8. Blog t nhiều mục quá nên t để thế này cho nó hiển thị 1 số mục chính thôi cho dễ nhìn :3 bên phải hơi trống, t vừa nhét thêm 1 ads nữa này mà chọn đáp ứng thì chiều dọc vẫn thiếu :(

      Xóa
    9. Nhiều mục bằng tui ko? chủ yếu để trên menu bớt

      Xóa
    10. K :)) t ít hơn ông mà. Trích ra mục hay viết bài thôi.

      Xóa
  3. Trả lời
    1. A vừa xem, nó lấy theo bài mới nhất hay bài e chỉ định đấy?

      Xóa
  4. Trả lời
    1. Ừ có mấy ng bảo a post bài nên a post cho mn xài luôn.

      Xóa
  5. ads kiếm nhiều tiền ko a ? để e đăng ký admicro

    Trả lờiXóa
    Trả lời
    1. Nó tính theo view và click tùy theo loại ads và nơi view+click ads e ạ. Ads nc ngoài và nhất là ng view+click từ nc ngoài, nhất là bên Mỹ thì số tiền sẽ gấp nhiều lần. Còn k trung bình như GA a dùng thì 1 click cho 1 ads vn hình như chỉ có 0.02$ 1 click thôi e ạ.

      Xóa
  6. Hay Quá Rồi A. Làm gì Có Cái Nào Tuyệt Hơn <3 :)))

    Trả lờiXóa
  7. Em đọc thấy hơi khó hiểu, anh có thể sửa lại code thành y nguyên anh đang xài đc ko anh Cường, để em thay thành tên label em thôi chứ để thé này em mù tịt lun

    Trả lờiXóa
    Trả lời
    1. K đc đâu e. A viết phải code nguyên mẫu để mn còn tùy biến, copy hết code bên a sẽ bị lỗi vì a còn dùng thẻ điều kiện việt hóa label phù hợp vs blog a nữa e ạ :3

      Xóa
  8. Anh rảnh ko qua ultra viewer hay teamviewer hỗ trợ em với ạ

    Trả lờiXóa
    Trả lời
    1. A k e ạ. Cũng như thông báo a ghim trong group thì trong thời gian này a bận lắm, bài viết còn đi copy paste chứ có tự viết đâu e.

      Xóa
  9. Vậy để em tự mò cx đc

    Trả lờiXóa
    Trả lời
    1. Oke e, tự mò sẽ tốt hơn, dùng mì ăn liền mãi lâu nâng kĩ năng lắm :3

      Xóa
  10. Nhìn hơi rối mắt @@

    Trả lờiXóa
    Trả lời
    1. Rồi sau a sẽ quen thôi, đặc điểm mấy blog thủ thuật nó hay để phân mảng như kia+GA nên a thấy rối :v

      Xóa
  11. a Cường dạo này ít ra bài quá :v

    Trả lờiXóa
    Trả lời
    1. A bận e ạ. Hết tháng 6 mới xong đồ án.

      Xóa

Bình luận