Thêm Widget các bài viết theo Label cụ thể trong Blogger


23/3/17      
Hôm nay tôi sẽ hướng dẫn các bạn tạo một Widget trong Blogger hiển thị các bài viết trong một Label cụ thể. Nó sẽ giúp bạn thu hút người đọc về nội dung và thiết kế trong blog của bạn. Hình ở dưới là minh họa giao diện của Widget này:

Đầu tiên, bạn xác định Label nào bạn sẽ dùng để hiển thị. 
Tiếp theo, Bạn thao tác như sau:

1. Đăng nhập vào Blogger.com,
2. Vào dashboard >> layout >> page elements.
3. Bấm vào liên kế "Add a Gadget", chọn HTML/JavaScript.
4. Dán đoạn mã dưới đây vào ô nội dung, đổi phần in đậm bằng địa chỉ Blog của bạn:
<style>
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:72px; /* Thumbnail height */
width:72px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs { text-align: justify;
font: normal 18px Port Lligat Slab;
float: left;
width: 98%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
    text-decoration: none;
    color: black;}
#label_with_thumbs a:link {
    text-decoration: none;
    color: black;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_srWU_hVsuymHtG9mpiJHBfkvX3nxDuCzvFdivTgE-UpImQfnIHQ43utt_s-PezNXkocx6PN51r5ReMpT83iP8Rxtm264SlC0H0OMmB5QzVLgzGN8xL2RHfgVKka5P7buiqWVaetLJuM/s1600/picture_not_available.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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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(showpostsummary==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(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Articles2Read?published&alt=json-in-script&callback=labelthumbs"></script>

Trong đó: 
var numposts = - Thay thế số 5 là số bài viết bạn muốn hiển thị.
Articles2Read - Đổi thành tên Label bạn muốn sử dụng.

5. Lưu lại.

Xem lại blog của bạn để thấy kết quả. Nếu bạn thạo JavaScripts, bạn có thể thoải mái tùy chỉnh theo giao diện mà bạn mong muốn. 

Theo http://www.technogeekzone.com/2015/10/particular-label-posts-widget-for-blogger.html

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

Đăng nhận xét

Giới thiệu

Website hướng dẫn các thủ thuật, cách cài đặt, cấu hình các phần mềm. Các thông tin công nghệ và hướng dẫn lập trình...

facebook.com/dung.phamtrung.9

phamtrungdung@gmail.com

Copyright © 2016. Cách cài đặt. Ghi rõ nguồn khi lấy tin từ trang này