Xin chào tất cả các bạn , với bài viết đầu tiên của Kênh Chia Sẻ thì mình sẽ chia sẻ với các bạn một thủ thuật Blogspot thú vị dùng để hiển thị bài viết mới nhất theo nhãn có hình ảnh . Đặc biệt 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...)
Widget bài viết mới nhất theo nhãn có hình ảnh cho Blogspot



Để có thể thêm Widget bài viết mới nhất theo nhãn có hình ảnh cho Blogger các bạn làm theo các bước sau:

Bước 1 : Đă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 2 : Các bạn chèn đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>
/* CSS Widget bài viết mới nhất theo nhãn có hình ảnh */
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 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&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script> 
Trong đó
+ 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&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>  
Thành 
<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;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.
* Chúc các cài đặt Widget bài viết mới nhất theo nhãn có hình ảnh bạn thành công
Nguồn : KenhChiaSe.Biz

Facebook Google twitter
Từ khóa:
Cùng Chuyên Mục
Blogger Comments
Facebook Comments

Tin Tức Online
Xem Thêm Tất Cả »
Góc Chia Sẻ
Xem Thêm Tất Cả »
Game - Ứng Dụng Hay Tháng 8
Xem Thêm Tất Cả »
Góc Thư Giản
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
Copyright © 2016 - All Rights Reserved
Template by Bùi Đạt - Powered by Blogger | SiteMap