Thủ thuật bài viết mới nhất theo nhãn cho Blogspot ~ Ngoc Anh

Thủ thuật bài viết mới nhất theo nhãn cho Blogspot không thể thiếu được cho một trang blog/web cá nhân hay chuyên nghiệp , nó làm cho blog c...

Blogspot+ Thu-thuat-blog

Thủ thuật bài viết mới nhất theo nhãn cho Blogspot không thể thiếu được cho một trang blog/web cá nhân hay chuyên nghiệp , nó làm cho blog của các bạn thêm phần thú vị dùng để hiển thị bài viết mới nhất theo nhãn có hình ảnh .

Thủ thuật bài viết mới nhất theo nhãn cho Blogspot

Widget bài viết mới nhất theo nhãn

Các bạn có thể đặt widget này trong bất cứ chỗ nào trong bố cục (layout ) của Blogger ( VD : trong bài viết, ở trang chủ , trang search label...)
Bước 1 : Các bạn chèn đoạn CSS sau vào trước thẻ ]]></b:skin>

/* CSS Widget-bai-viet-moi */
img.tagpost_thumb{float:left;border:1px solid #ddd;margin-right:8px;height:60px;width:60px;padding:2px;transition:all .6s}
img.tagpost_thumb:hover{border-color:#aaa;}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li{padding:5px 0;min-height:73px}
#tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{margin-top:-5px!important}
#tagpost-left .widget,#tagpost-right .widget,#tagpost-bottom .widget{position:relative;display:block;border:1px solid #ccc;float:left;padding:1.5%}
#tagpost-left h2,#tagpost-right h2,#tagpost-bottom h2{background:#333;color:#fff;font-family:inherit;font-weight:bold;font-size:15px;letter-spacing:.5px;position:relative;display:block;margin:0 0 10px 0;padding:15px}
#tagpost-left .widget{margin-right:5px}
#tagpost-bottom .widget{margin-top:10px}
#tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{list-style:none;margin:0;padding:0}
#tagpost-left .widget ul li,#tagpost-right .widget ul li,#tagpost-bottom .widget ul li{display:block;font-size:12px;font-family:inherit;border-bottom:1px solid #ddd;margin:10px 0;padding:0;transition:all .6s}
#tagpost-left .widget ul li:hover,#tagpost-right .widget ul li:hover,#tagpost-bottom .widget ul li:hover{border-bottom-color:#bbb;}
#tagpost-left .widget li:last-child,#tagpost-right .widget li:last-child,#tagpost-bottom .widget li:last-child{border-bottom:none;margin:10px 0 0 0}
#tagpost-left .widget ul li a,#tagpost-right .widget ul li a,#tagpost-bottom .widget ul li a{font-size:13px;color:#333;font-weight:bold}
#tagpost-left .widget ul li a:hover,#tagpost-right .widget ul li a:hover,#tagpost-bottom .widget ul li a:hover{color:#444;text-decoration:underline;}
#tagpost-left .widget,#tagpost-right .widget{width:48%;margin:10px 5px}
#tagpost-bottom .widget{width:98.4%}

Bước 2 : Đăng nhập vào Blogger => Mẫu => Chỉnh sửa HTML và thêm đoạn code bên dưới vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(tagpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]>
</script>

Bước 3: Lưu mẫu lại sau đó vào Bố cục ( Layout ) thêm tiện ích HTML/Javascript tại nơi bạn cần hiển thị và chèn đoạn code bên dưới vào:

<script type='text/javascript'> var numposts = 5; // Số bài viết cần hiển thị var tagpostthumbnails = true; // Cho phép hiển thị hình ảnh var tagpostmore = false; var tagpostseparator = true; var tagpostcommentnum = true; // hiển thị comment var tagpostdate = true; // cho phép hiển thị thời gian var tagpostsummary = false; // Cho phép hiển thị mô tả bài viết var numchars = 50; // Số lượng ký tự trong chương trình mô tả </script> <script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=tagpostthumbs"></script>

Note :

+ numposts : Số bài viết cần hiển thị , các bạn có thể tùy chỉnh cho phù hợp. + tagpostthumbnails : Thay bằng "false" để không cho phép hiển thị hình ảnh + tagpostcommentnum : Thay bằng "false" để tắt hiển thị comment + tagpostdate : Thay bằng "true" để hiển thị mô tả bài viết + numchars : Số ký tự mô tả bài viết + Label : Tên nhãn cần hiển thị. Ngoài ra các bạn có thể thay đoạn mã

<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=tagpostthumbs"></script>

Thành

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=tagpostthumbs"></script>

để có thể hiển thị bài viết mới nhất của Blogger không cần đặt nhãn.
Đây có thể nói là một thủ thuật rất hay phải không nào các bạn , chúng ta bắt tay vào công việc đi nào Chúc các bạn có những tiện ích đẹp cho blog của các bạn.