Tạo recent bài viết theo nhãn theo kiểu mới

LongAnIT 11/07/2019

Đăng nhập vào blogger - Chù đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>
<div id='newminanlabel1-wrapper'>
        <b:section class='newminanlabel1' id='newminanlabel1' maxwidgets='3' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Thủ thuật máy tính' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>SEO</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></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>
      <div id='newminanlabel2-wrapper'>
        <b:section class='newminanlabel2' id='newminanlabel2' maxwidgets='3' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Tiện ích dành cho văn phòng' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Ebook</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></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>   
<div id='newminanlabel2-wrapper'>
        <b:section class='newminanlabel3' id='newminanlabel3' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML82' locked='false' title='Blogging tips' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Android</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></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>
</div> </div>      </div>
</b:if></b:if>
Bước 3: Phần code Javascript copy toàn bộ code bên dưới dán vào trước thẻ đóng </head>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newminan_left">'),document.write('<ul class="newminan_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="newminan_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newminan_meta">'),1==showpostdate&&(v=v+'<span class="newminan_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newminan_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newminan_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newminan_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="newminan_right">'),document.write('<ul class="newminan_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="newminan_title newminan_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newminan_meta newminan_meta2">'),1==showpostdate2&&(v=v+'<span class="newminan_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newminan_meta_comment newminan_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newminan_meta_more newminan_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=15,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!0,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb=&quot;http://3.bp.blogspot.com/-bP9BhHzcg3c/VulaYI1KgPI/AAAAAAAADlY/an6hlFHd5BQAUhNQbriNvTLripE4v5EQA/s320/blanter_thumb.png&quot;,no_thumb2=&quot;http://2.bp.blogspot.com/-9deKCtKRtvU/VulaYPTKW6I/AAAAAAAADlU/wb9d_4ysGPIC-ytki80VChZiMPrz7Af2w/s1600/blanterthumb_small.png&quot;;
</script>
</b:if>
</b:if>
Bước 4: Một chút CSS để hoàn thiện
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Recent Post by Label */
.newminanlabel1 ul,.newminanlabel2 ul, .newminanlabel3 ul{list-style:none;margin:0;padding:0}
.newminanlabel1 li,.newminanlabel2 li, .newminanlabel3 li{margin:0;padding:0;}
.newminanlabel1 .widget,.newminanlabel2 .widget, .newminanlabel3 .widget{margin:0;padding:0;border-radius:4px;background:#fff;margin-bottom:20px;border-bottom: 5px solid #337ab7;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);}
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content ,.newminanlabel3 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newminanlabel1 h2,.newminanlabel2 h2,.newminanlabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newminanlabel2 h2,.newminanlabel3 h2{margin:20px 0 0 0;}
.newminanlabel1 h2:before,.newminanlabel2 h2:before,.newminanlabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.newminanlabel2 h2:before{content:&#39;\f0c3&#39;;}.newminanlabel3 h2:before{content:&#39;\f143&#39;;}
.newminanlabel1 .index,.newminanlabel2 .index, .newminanlabel3 .index{font-size:10px;float:right;font-weight:400;}
.newminanlabel1 .index a,.newminanlabel2 .index a, .newminanlabel3 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newminanlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newminanlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newminanlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newminanlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.newminanlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.newminanlabel2 span.newminan_meta_comment a:hover{color:#38761d!important}
.newminanlabel2 ul.newminan_thumbs li a:hover,.newminanlabel2 ul.newminan_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newminan_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.newminan_right{width:250px;width:47.5%;float:right;margin:0;padding:0;height: 320px !important;overflow: auto;}
ul.newminan_thumbs{margin:0;padding:0}
ul.newminan_thumbs li,ul.newminan_thumbs2{margin:0;padding:0}
ul.newminan_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:400px;height:200px}
ul.newminan_thumbs .cat_thumb img{height:auto;max-width:100%;transition:all 0.2s;padding: 4px;border: 1px solid #ccc;box-shadow: 0 0 2px #bbb;
-moz-box-shadow: 0 0 2px #bbb;-webkit-box-shadow: 0 0 2px #bbb;border-radius:5px}
ul.newminan_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newminan_thumbs2 li{margin:0 0 10px;padding:0 0 25px;border-bottom:1px solid #e9e9e9}
ul.newminan_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newminan_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;overflow:hidden}
ul.newminan_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s;border-radius:5px}
ul.newminan_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newminan_title{font-family:Roboto;font-size:17px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newminan_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.newminan_title a{color:#333}
span.newminan_title a:hover{color:#ff675c;text-decoration:none}
span.newminan_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newminan_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.newminan_meta a{color:#aaa;display:inline-block}
span.newminan_meta_date,span.newminan_meta_comment,span.newminan_meta_more{display:inline-block;margin-right:10px}
span.newminan_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.newminan_meta_comment a:hover{color:#ff675c!important}
span.newminan_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.newminan_thumbs2 li a:hover,ul.newminan_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newminanlabel1 .widget-content, .newminanlabel2 .widget-content {padding:20px 25px;}
.newminan_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.newminan_right {width:46%;float:right;margin:0;padding:0;}
ul.newminan_thumbs .cat_thumb {width:100%;height:auto;}
ul.newminan_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newminan_thumbs li {margin:0;padding:0;}
span.newminan_title2 {font-size:20px;line-height:1.2em;}
span.newminan_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px 20px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs2 li{border-bottom:0}
span.newminan_summary,.newminan_left{display:none}
span.newminan_title{margin:0 0 5px}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newminan_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newminanlabel1-wrapper,#newminanlabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px 20px}
.newminanlabel1 h2,.newminanlabel2 h2{padding:10px 20px 1px 20px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newminan_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px}
.newminanlabel1 h2,.newminanlabel2 h2{padding:10px 10px 1px 10px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newminan_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
 Bước 5: Vào bố cục xuất hiện 3 Widgets. Click vào chình sửa và thay thế nhãn mà bạn muốn hiển thị trên web nhé.

Thay thế nhãn bạn cần hiển thị trên blog

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây