Hướng dẫn tạo bài viết theo nhãn ngoài trang chủ blogspot
Hôm nay Hay Lắm Đấy sẽ hướng dẫn tạo bài viết theo 1 nhãn ra ngoài trang chủ blogspot .
Cách thực hiện 1. Thêm tất cả javascript bên dưới vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="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.replace('s72-c', 's1600');}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/AVvXsEhNONxzs4qZSzdB_jLyP-iueNj3o5rt4DlvXzXg1yBZyLd6i4Us2Tzoc-p_YQ1gne7YJjEuY8nfqtRCRikxrNqKg9pR6733sPwl3rQ-2SNfe0CjuN4wp4THHrHLgcEZoVOgF5_v2xLhWG_h/';}
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(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><div class="post-chuyenmuc-info">');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('</div>');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>
2.Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin> trong mẫu của bạn.
/*** Bài Viết Theo Chuyên Mục ***/
img.label_thumb{ float: left; width: 160px;height: 120px;margin-right: 8px;border-radius: 13px;}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
float: left;
overflow: hidden;
width: 50%;
padding: 8px;border: #27AE60 solid 0.5px;overflow: hidden;box-shadow: 0 0 20px #d5d4d4 inset;height: 140px; *
}
.label_with_thumbs a {color: green;font-weight: bold;}
.label_with_thumbs strong { font-size: 15px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;}
.post-chuyenmuc-info {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;}
@media screen and (max-width:1024px) {ul.label_with_thumbs li{float:left;width:100%;}}
/*** Bài Viết Theo Chuyên Mục ***/3. Thêm đoạn code dưới vào chỗ muốn hiển thị :
Bạn có thể thêm trong phần Bố Cục .
<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Tâm%20Sự?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<div style='clear: both;'></div>
- var numposts = 6; là số bài viết cần hiển thị (các bạn có thể thay đổi tuỳ thích)
- Thay Tâm%20Sự thành Nhãn của bạn muốn hiển thị .
Lưu ý template phải có thư viện jquery.<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Chúc Các Bạn Thành Công !
Xêm Thêm :
Thủ Thuật Blogspot ,
Cùng Chuyên Mục