Để thành công thêm một tiện ích bài viết gần đây (recent post) thì những yếu tố không thể thiếu đó là Jquery, css và js. Nghe có vẻ khó nhưng bạn hoàn toàn có thể làm được sau khi đọc được bài chia sẻ này.
I. Thêm thư viện Jquery trước khi cài tiện ích bài viết gần đây
Jquery được coi là yếu tốt tất yếu để cấu thành nên tiện ích bài viết gần đây, nên việc thêm jquery là bất di bất dịch nếu bạn muốn sử dụng tiện ích này.Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Thêm đoạn code sau trên </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Xem thêm: Trỏ tên miền về Blogspot chỉ trong 5 phút
II. Tiện ích bài viết gần đây #1
Bước 1: Vào Mẫu > Chỉnh sửa HTMLBước 2: Thêm đoạn CSS sau trên </head>
.recent-post-style1 ul,.recent-post-label ul{list-style:none;margin:0;padding:0}
.recent-post-style1 li,.recent-post-label li{margin:0;padding:0;}
.recent-post-style1 .widget,.recent-post-label .widget{margin:0;padding:0}
.recent-post-style1 .widget-content,.recent-post-label .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.recent-post-style1 h2,.recent-post-label h2,.recent-post-label3 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}
.recent-post-label h2,.recent-post-label3 h2{margin:20px 0 0 0;}
.recent-post-style1 h2:before,.recent-post-label h2:before,.recent-post-label3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.recent-post-label h2:before{content:'\f0c3';}.recent-post-label3 h2:before{content:'\f143';}
.recent-post-style1 .index,.recent-post-label .index{font-size:10px;float:right;font-weight:400;}
.recent-post-style1 .index a,.recent-post-label .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.recent-post-label .index a{color:#ef6c00;border-color:#ffa726}
.recent-post-style1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.recent-post-label .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.recent-post-style1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.recent-post-label .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.recent-post-label span.recent-post_meta_comment a:hover{color:#38761d!important}
.recent-post-label ul.recent-post-thumbs-style1 li a:hover,.recent-post-label ul.recent-post-thumbs-style12 li a:hover{color:#ff675c;text-decoration:none}
.recent_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.recent_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.recent-post-thumbs-style1{margin:0;padding:0}
ul.recent-post-thumbs-style1 li,ul.recent-post-thumbs-style12{margin:0;padding:0}
ul.recent-post-thumbs-style1 .recent_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.recent-post-thumbs-style1 .recent_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.recent-post-thumbs-style1 .recent_thumb img:hover{opacity:.9;}
ul.recent-post-thumbs-style12 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.recent-post-thumbs-style12 li:last-child{border-bottom:none;margin:0;padding:0}
ul.recent-post-thumbs-style12 .recent_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.recent-post-thumbs-style12 .recent_thumb2 img{height:auto;transition:all .2s}
ul.recent-post-thumbs-style12 .recent_thumb2 img:hover{opacity:.9;}
span.recent-post-title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.recent-post-title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.recent-post-title a{color:#333}
span.recent-post-title a:hover{color:#ff675c;text-decoration:none}
span.recent-post_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.recent-post_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.recent-post_meta a{color:#aaa;display:inline-block}
span.recent-post_meta_date,span.recent-post_meta_comment,span.recent-post_meta_more{display:inline-block;margin-right:10px}
span.recent-post_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.recent-post_meta_comment a:hover{color:#ff675c!important}
span.recent-post_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.recent-post-thumbs-style12 li a:hover,ul.recent-post-thumbs-style1 li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.recent-post-style1 .widget-content, .recent-post-label .widget-content {padding:20px 25px;}
.recent_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.recent_right {width:46%;float:right;margin:0;padding:0;}
ul.recent-post-thumbs-style1 .recent_thumb {width:100%;height:auto;}
ul.recent-post-thumbs-style1 .recent_thumb img {width:100%;height:auto;}
ul.recent-post-thumbs-style1 li {margin:0;padding:0;}
span.recent-post-title2 {font-size:20px;line-height:1.2em;}
span.recent-post_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.recent-post-style1 .widget-content,.recent-post-label .widget-content{padding:10px 20px}
.recent_right{width:100%;float:left;margin:0;padding:0}
ul.recent-post-thumbs-style12 li{border-bottom:0}
span.recent-post_summary,.recent_left{display:none}
span.recent-post-title{margin:0 0 5px}
ul.recent-post-thumbs-style1 li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.recent-post-title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#recent-post-style1-wrapper,#recent-post-label-wrapper{display:none}}
@media only screen and (max-width:320px){
.recent-post-style1 .widget-content,.recent-post-label .widget-content{padding:10px 20px}
.recent-post-style1 h2,.recent-post-label h2{padding:10px 20px 1px 20px}
.recent_right{width:100%;float:left;margin:0;padding:0}
ul.recent-post-thumbs-style1 li{margin:0 0 10px;padding:0 0 10px;}
span.recent-post-title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.recent-post-style1 .widget-content,.recent-post-label .widget-content{padding:10px}
.recent-post-style1 h2,.recent-post-label h2{padding:10px 10px 1px 10px}
.recent_right{width:100%;float:left;margin:0;padding:0}
ul.recent-post-thumbs-style1 li{margin:0 0 10px;padding:0 0 10px;}
span.recent-post-title2{font-size:18px;line-height:1.2em}}
Bước 3: Thêm đoạn Js sau trên </body>
<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="recent_left">'),document.write('<ul class="recent-post-thumbs-style1">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="recent_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="recent-post-title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="recent-post_meta">'),1==showpostdate&&(v=v+'<span class="recent-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="recent-post_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="recent-post_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="recent-post_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="recent_right">'),document.write('<ul class="recent-post-thumbs-style12">');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="recent_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="recent-post-title recent-post-title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="recent-post_meta recent-post_meta2">'),1==showpostdate2&&(v=v+'<span class="recent-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="recent-post_meta_comment recent-post_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="recent-post_meta_more recent-post_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=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58x5SnU1j4LNcTdomlxYX5b5k8BX-H-Foh81btDOPdeLNExrDfouywzzzyT-Y3Fyo0YRN9g3W4xlVmV0MA7MMKH-CajNacg1ms0CPmCfShlR6-biDhyWtghv75fun_Ski0Y02rmSYn67J/s1600/style1_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiV1X1rLSjzj5jjWQxSW8vsOcZbBvr8eeZvCO6-KfbzOpi-IMespc9MLv-tmLc60kUsPFJw01_VPvjQeu4PS3wnn9iHOC9L0YKevpVSe33Vig4FxckquKn4kAlegro2jmIrr7rjksd3UA7/s1600/style1_thumb_small.png";
</script>
Bước 4: Thêm đoạn code sau vào nói muốn hiển thị trong template (Không phải trong bố cục nhé) và lưu lại.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='recent-post-style1-wrapper'>
<b:section class='recent-post-style1' id='recent-post-style1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='recent-post-label-wrapper'>
<b:section class='recent-post-label' id='recent-post-label' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Blogger' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
Bước 5: Vào Bố cục > Tiện ích HTML69
Bước 6: Ghi tên nhãn vào và lưu lại (hình dưới).
Updating...
This comment has been removed by a blog administrator.
ReplyDelete