Recent Post Có Thumbnail Cho Blogspot

Thứ Năm, 2 tháng 6, 2016

Đang đọc
Recent Post Có Thumbnail Cho Blogspot
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Recent Post Có Thumbnail Cho Blogspot




Đầu Tới Blogger> Mẫu > Chỉnh sửa HTML > Sau đó, thêm mã bên dưới vào <b:skin> 

/* Recent Post Widget */
ul.rp_thumbs{margin:0}ul.rp_thumbs li{font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:0;padding-bottom:46%;overflow:hidden}ul.rp_thumbs .rp_thumb img{height:auto;width:100%;transition:transform 1.6s;transform:scale(1.0)}ul.rp_thumbs .rp_thumb:hover img{transform:scale(1.10)}ul.rp_thumbs2{font-size:13px}ul.rp_thumbs2 li{padding:0;min-height:66px;font-size:11px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}ul.rp_thumbs2 .rp_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}ul.rp_thumbs2 li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}ul.rp_thumbs2 .rp_thumb2 img{height:60px;width:60px}.sidebar ul.rp_thumbs li:before,.sidebar ul.rp_thumbs2 li:before,#bottombar ul.rp_thumbs li:before,#bottombar ul.rp_thumbs2 li:before{display:none}span.rp_title{font:normal normal 18px Roboto Condensed,Helvetica,Arial,sans-serif;display:block;margin:0 0 5px;line-height:1.4em}span.rp_title2{font-size:14px}span.rp_summary{display:block;margin:6px 0 0}span.rp_meta{background:transparent;display:block;font-size:11px;font-weight:700;color:#8D8D8D;text-transform:uppercase}span.rp_meta a{color:#8D8D8D!important;display:inline-block}span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more{display:inline-block;margin-right:8px}span.rp_meta_date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}span.rp_meta_comment:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}span.rp_meta_more:before{content:"\f0a9";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover{color:#0072C6}

Bước kế tiếp thêm mã Javascript vào trước 

<script src='http://yourjavascript.com/34215101653/label-thumbnail.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.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=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);document.write('<ul class="rp_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="rp_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="rp_title"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";if(document.write('<span class="rp_meta">'),1==showpostdate&&(g=g+'<span class="rp_meta_date">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore&&(g=g+'<span class="rp_meta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write('<span class="rp_summary">'),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var k=/<\S[^>]*>/g;if(v=v.replace(k,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var y=v.lastIndexOf(" ");v=v.substring(0,y),document.write(v+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+r+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="rp_title rp_title2"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";document.write('<span class="rp_meta rp_meta2">'),1==showpostdate2&&(g=g+'<span class="rp_meta_date rp_meta_date2">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment rp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore2&&(g=g+'<span class="rp_meta_more rp_meta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write("</li>")}document.write("</ul>")}
//Recent Comments
var numComments=numComments||5,characters=characters||40;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<strong><a href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a></strong>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" - ";commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
//Recent Comments Settings
var numComments  = 5;
var characters  = 60;
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQK7l_zx5IhwXUoeW4cKwd0YJKanArR6G1X0NW08K8Yvxte_v8SDb9j2Qt9Iyzj2au2v8qRU9De0xihfXfsEB-JiSAveVDSQjKhGLWyvk_bEDPQFSaIrDMlM_ZNTM6Yzkri2yv_ftmzjb/w300-c-h140/no-image.png'
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_K6vo5du13LD-u3f7kRY2PzOgWYUC0wIC0ietFAbMRpFz95E75_1jkH3Makf0zeJYqwS9l7CuHbdf3fEor8k0ZiiPkDJF-kWCNAJ-p17wJ9B2gIxCgRLr_0KZwFPb2h7-NRAgrMQ8F9fu/s60-c/no-image.png'
</script>

Lưu Template Lại

Bước Cuối Chọn Layout> Thêm widget> Chọn HTML / Javascript và sau đó nhập mã dưới đây 
<script>
   document.write('<div class="recent-post-title"><h2><a href="/search/label/Label?max-results=10">Label 1</a></h2></div>');
   document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
   </script>
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh

0 nhận xét:

Ads by Google