Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

TruongBlogger đã đăng
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Hướng dẫn

  • Hiển thị bài viết theo nhãn kèm theo hình ảnh thu nhỏ ngoài trang chính của blog vô cùng đơn giản và dễ dàng. Việc hiển thị bài viết kèm theo nhãn ngoài trang chủ của blog sẽ giúp trang Blogspot của bạn chuyên nghiệp và đẹp mắt hơn. Bây giờ bạn và truongblogger cùng thực hiện những bước đơn giản để hiển thị bài viết theo nhãn nhé.

    Cách hiển thị bài đăng theo Label

    Trước khi thực hiện bạn có thể xem trước bằng hình ảnh dưới đây:
    Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger
    Demo 1
    Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger
    Demo 2
    Bước 1: Từ Blogger bạn chọn Chủ Đề sau đó chọn Chỉnh sửa HTML. Tiếp theo các bạn ấn Ctrl +F để tìm từ thẻ ]]></ b: skin> và dán toàn bộ CSS sau lên trên thẻ đó:
    li.recent-posts-list a{position:relative;overflow:hidden}
    ul.recent-posts-container{list-style:none;margin:0;line-height:normal;overflow:hidden;display:flex;flex-wrap:wrap}
    ul.recent-posts-container li.recent-posts-list{position:relative;float:left;width:32.33%;text-align:center;font-size:10px;padding:0;margin:.5%;max-height:200px;overflow:hidden}
    ul.recent-posts-container img.recent-post-thumb{width:100%;background:#000;margin:auto}
    ul.recent-posts-container .post-date{font-size:10px;float:left}
    ul.recent-posts-container .recent-details{display:none}
    ul.recent-posts-container .recent-post-title a{float:none!important;text-align:center}
    ul.recent-posts-container li.recent-posts-list a{position:relative;display:block;height:100%;width:100%}
    ul.recent-posts-container .readmorelink{position:absolute;top:5px;left:5px;padding:2px 5px;font-size:10px;background:rgba(0,0,0,.8);color:#FFF}
    .recent-posts-details{display:none}
    ul.recent-posts-container .recent-post-title{color:rgba(0,0,0,.99);padding:10px 30px;padding-top:8px;font-size:18px;background:#fff;display:inline-block;font-weight:400;width:100%;text-align:center;position:absolute;left:0;bottom:0;width:100%;transform:translateY(4px) scale(1.1);-webkit-transform:translateY(4px) scale(1.1);-moz-transform:translateY(4px) scale(1.1);-ms-transform:translateY(4px) scale(1.1);-o-transform:translateY(4px) scale(1.1);opacity:0;transition:.6s all ease-in;-webkit-transition:.6s all ease-in;-moz-transition:.6s all ease-in;-ms-transition:.6s all ease-in;-o-transition:.6s all ease-in;transform-origin:center}
    li.recent-posts-list:hover .postedon{transform:translateX(5px);-webkit-transform:translateX(5px);-moz-transform:translateX(5px);-ms-transform:translateX(5px);-o-transform:translateX(5px)}
    ul.recent-posts-container li.recent-posts-list:hover .recent-post-title{transform:translateY(-20px) scale(1.1) rotate(-2deg);-webkit-transform:translateY(-20px) scale(1.1) rotate(-2deg);-moz-transform:translateY(-20px) scale(1.1) rotate(-2deg);-ms-transform:translateY(-20px) scale(1.1) rotate(-2deg);-o-transform:translateY(-20px) scale(1.1) rotate(-2deg);transition:.6s all ease-out;-webkit-transition:.6s all ease-out;-moz-transition:.6s all ease-out;-ms-transition:.6s all ease-out;-o-transition:.6s all ease-out;opacity:1}
    li.recent-posts-list .postedon{position:absolute;font-size:14px;font-weight:700;z-index:2;left:-5px;top:20px;background:#6B6B6B;color:#fff;padding:5px;border-left:solid 5px #000;transition:.4s all ease;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-ms-transition:.4s all ease;-o-transition:.4s all ease}
    .completed{padding:0!important;background:##36688a!important}
    .completed h4{display:inline-block;width:100%;padding:10px;margin:0}
    .completed h4 a{text-align:center;float:right;color:#fff;font-size:14px;padding:8px 20px;line-height:1.5;display:inline-block;background:#b53428}
    .completed h4 span{color:#fff;display:inline-block;font-size:14px;line-height:1.5;padding:8px 0}
    .section{margin:0}
    @media (max-width:768px) {
    ul.recent-posts-container li.recent-posts-list{width:49%}
    }
    @media (max-width:480px) {
    ul.recent-posts-container li.recent-posts-list{width:100%;margin:0;max-height:none;margin-bottom:14px}
    }
    .completed{clear:both;margin-bottom:20px;font-weight:400;color:#000;font-size:16px;margin-bottom:15px;margin-top:0;text-transform:uppercase;background:#c2382b!important;padding:15px;color:#fff}
    .completed h4{display:inline-block;width:100%;padding:10px;margin:0}
    
    Bước 2: Bạn vào Bố cục và thêm một Tiện ích HTML mới và thêm đoạn code sau vào trong đó
    <div class='widget-content'>
    <div class="completed"><h4><span>TÊN NHÃN</span>
    <a href='/search/label/TÊN NHÃN?&max-results=7'>Xem thêm...</a>
    </h4>
    </div>
    <script>
    var posts_no = 9; // <!-- số bài viết hiển thị -->
    var labelnya = "TÊN NHÃN"; <!-- thay tên nhãn -->
    var showpoststhumbs = true;var readmorelink = false;var showcommentslink = false;var posts_date = true;var post_summary = false;var summary_chars = 0;function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+130),d=s.substr(b+130,c-b-130),u=-130!=a&&-130!=b&&-130!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}
    var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list"><div class="postedon"><span><i class="fa fa-film fa-fw"></i>'+labelnya+'</span></div><a href="'+r+'">'),
    1==showpoststhumbs&&document.write('<img class="recent-post-thumb" src="'+u+'"/>'),
    document.write('<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),
    "content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";
    var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);
    var y=A.lastIndexOf(" ");A=A.substring(0,y),
    document.write(A+"...")}var _="",$=0;
    document.write('<div class="recent-posts-details"><span class="dett">'),
    1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),
    1==readmorelink&&(1==$&&(_+=" </span>"),
    _=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),
    1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),
    l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),
    document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
    document.write("<script src=\/feeds\/posts\/default/-/"+labelnya+"?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");
    document.write("<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$(document).ready(function() {$(\'img.recent-post-thumb\').attr(\'src\', function(i, src) \r\n{return src.replace( \'s200-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");
    </script>
    </div>
    
    Lưu mẫu lại và xem kết quả! Chúc bạn thành công.
    Trên đây là bài viết Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger. Chúc bạn thực hiện thành công. Nếu thấy bài viết hữu ích đừng quên chia sẻ đến bạn bè nhé!
    Tóm tắt nội dung
      Lưu ý:
      Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
      Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
      Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
      Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]
      Viết bình luận (0)

      Trường Blogger

      Pass giải nén mặc định: truongblogger