Chào tất cả các bạn, theo yêu cầu của một số bạn nên bài viết này mình sẽ viết bài hướng dẫn tạo bài viết mới gắn nhãn chi tiết dành cho blogspot luôn cho máu nhé
HƯỚNG DẪN CÁCH LÀM:
- Các bước thực hiện:Bước 1: Tìm thẻ </body> và thêm toàn bộ đoạn code bên dưới lên trên nó
<b:if cond='data:blog.url == data:blog.homepageUrl'>Bước 2: Tiếp đến tìm thẻ </head> và thêm đoạn bên dưới lên trên nó (bước này dành cho ai chưa thêm thư viện jquery)
<style>
#HTML111{background:#fff;border:1px solid #e5e5e5;padding:10px;box-sizing:border-box;margin:0 0 15px}
#label_with_thumbs .widget-thumb{position:relative;width:100%;height:160px;overflow:hidden;display:block;vertical-align:middle;margin:0 0 10px}
#label_with_thumbs li:nth-child(1) .widget-thumb{width:100%;float:left}
#label_with_thumbs .widget-thumb .label_thumb{position:relative;width:100%;height:100%;display:block;border-radius:3px}
#label_with_thumbs li:nth-child(1) .label_thumb{width:100%}
#label_with_thumbs li:nth-child(1) .widget-con{float:none;position:static;width:auto;padding:0 1px;background:none;box-sizing:border-box;text-align:left}
#label_with_thumbs .widget-con{overflow:hidden}
#label_with_thumbs{position:relative;overflow:hidden;margin:0 0 15px;padding:0}
#label_with_thumbs li:nth-child(1){float:left;border:none}
#label_with_thumbs li{width:33.33333333%;float:left;overflow:hidden;padding:5px;box-sizing:border-box}
#label_with_thumbs li:nth-child(1) .widget-sum{display:none;font-size:13px;line-height:1.5em;font-weight:400;margin:7px 0 3px;color:#777;text-align:justify}
#label_with_thumbs li:nth-child(1) .post-tag{display:inline-block}
#label_with_thumbs li .widget-sum{display:none}
#label_with_thumbs li:nth-child(3),#label_with_thumbs li:nth-child(5){margin-right:0}
#label_with_thumbs .recent-title{font-weight:500;font-size:15px;line-height:normal;margin:0;padding:0}
#label_with_thumbs .recent-title a{color:#333;transition:color .3s;font-weight:400}
#label_with_thumbs .recent-title a:hover{color:#604c8d}
.widget-meta{color:#aaa;font-size:11px;font-weight:400;display:none}
.featuresliderpost .widget > h2{font-size:17px;font-weight:400;text-transform:uppercase;color:#222;padding:10px;line-height:normal;border-radius:0;margin:-15px -10px 10px;box-shadow:0 1px 5px #e5e5e5;border-bottom:1px solid #e5e5e5}
#feat-sec .widget,#feat-sec .widget > h2{display:none}
#feat-sec .ty-show,#feat-sec .ty-show > h2{display:block!important}
#feat-sec .widget > h2{font-size:14px;font-weight:400;text-transform:uppercase;color:#aaa;padding:0 0 5px}
ul.featured-posts{position:relative;overflow:hidden;margin:0 -7.5px 20px;padding:0 0 20px;border-bottom:1px solid #eee}
.featured-posts .ty-entry{position:relative;float:left}
ul.featured-posts li{position:relative;float:left;width:35%;overflow:hidden;list-style:none;box-sizing:border-box;padding:0 7.5px}
ul.featured-posts li.first-item{width:65%;padding-right:12.5px}
ul.featured-posts li.last-item{margin-top:15px}
.featured-posts .ty-inner{position:relative;overflow:hidden;display:block}
.featured-posts .ty-image{position:relative;overflow:hidden;display:block;width:100%;height:140px;margin:0 0 10px;border-radius:3px}
.featured-posts .first-item .ty-image{height:300px}
.featured-posts .ty-image img{width:100%;height:100%}
.featured-posts .ty-image:after{content:'';display:block;position:absolute;width:100%;height:100%;z-index:10;top:0;left:0;background:rgba(30,30,30,0);transition:background .3s}
.featured-posts .ty-image:hover:after{background:rgba(30,30,30,0.1)}
.featured-posts .ty-title{font-size:16px;font-weight:400;line-height:1.4em}
.featured-posts .first-item .ty-title{font-size:23px}
.featured-posts .ty-title a{color:#333;transition:color .3s}
.featured-posts .ty-title a:hover{color:#27db80}
.featured-posts .ty-meta{margin-top:5px}
.featured-posts .first-item .ty-meta{font-size:12px;margin:8px 0}
.featured-posts .ty-meta span{margin-right:10px}
.featured-posts .ty-snip{position:relative;display:block;font-size:13px;color:#777;line-height:1.5em;margin:0 0 15px;padding-right:10px}
.ty-meta{display:none;color:#aaa;font-size:11px;text-transform:uppercase}
.ty-meta .item-author:before{content:'\f007';font-family:fontawesome;margin-right:5px}
.ty-meta .item-date:before{content:'\f017';font-family:fontawesome;margin-right:5px}
.featured-slider-wrap{margin:0;padding:0;display:block;border-radius:0}
#xemthemnao{border-top:1px solid #e5e5e5;line-height:normal;margin:0 -10px;padding:8px}
span.more-tabs a{padding:5px;border:1px solid #e5e5e5;transition:.3s;font-size:13px;color:#222;margin:3px;display:inline-block;font-weight:400}
span.more-tabs a:hover{color:#fff;background:#604c8d;border:1px solid #604c8d}
@media screen and (max-width: 680px) {
#label_with_thumbs li{width:50%}
.custom-widget li{width:50%}
}
@media screen and (max-width: 400px) {
#label_with_thumbs li,.custom-widget li{width:100%}
}
</style>
<div class='featured-slider-wrap'>
<div class='row'>
<b:section class='featuresliderpost' id='Featured Post Widget' maxwidget='1' showaddelement='no'>
<b:widget id='HTML111' locked='true' title='Blogspot' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<div class='widget-content'><div class='recent-post-cont'><script src='/feeds/posts/default/-/Blogspot?orderby=published&alt=json-in-script&callback=labelthumbs'></script></div></div>
<div id='xemthemnao'>
<span class='more-tabs'><a href='/search/label/Blogspot?&max-results=6'>Xem thêm thủ thuật Blogspot <i class='fa fa-arrow-right'/></a></span>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!-- Post Label -->
<script type='text/javascript'>
//<![CDATA[
var numposts = 6;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
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/AVvXsEjGBbOTJFLhxZSfSBogkyazXaQiJJS9yVp-X20J4mnMlxPuGo3vRpiQ3ncyKgnH4izcOmaMJoBvfCinaL5EwCTvAG_gSwP3NShOWzl7ZtSi4x9VE0ZX6FZdFPP67UxE39EQD8S1GdazMzc/s1600-r/nth.png'
}
var tag = entry.category[0].term;
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] = "January";
monthnames[2] = "February";
monthnames[3] = "March";
monthnames[4] = "April";
monthnames[5] = "May";
monthnames[6] = "June";
monthnames[7] = "July";
monthnames[8] = "August";
monthnames[9] = "September";
monthnames[10] = "October";
monthnames[11] = "November";
monthnames[12] = "December";
document.write('<li class="clearfix">');
if (showpostthumbnails == true) document.write('<div class="widget-thumb"><a class="label_thumb" href="' + posturl + '" target ="_top" style="background:url(' + thumburl.replace('/s72-c/', '/s1600/') + ') no-repeat center center;background-size: cover"></a></div>');
document.write('<div class="widget-con"><h3 class="recent-title"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></h3><div class="widget-sum">');
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><div class="widget-meta"><span class="widget-date">');
if (showpostdate == true) {
towrite = towrite + ' <i class="fa fa-clock-o"></i> ' + monthnames[parseInt(cdmonth, 10)] + ' ' + cdday + ' , ' + cdyear;
flag = 1
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' </span><span class="widget-cmm"> '
}
if (commenttext == '1 Comments') commenttext = '<i class="fa fa-comments"> 1</i>';
if (commenttext == '0 Comments') commenttext = '<i class="fa fa-comments"></i> 0';
commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
towrite = towrite + commenttext + ' </span></div> ';
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('</div></li>');
if (displayseparator == true) if (i != (numposts - 1)) document.write('')
}
document.write('</ul>')
};
//]]>
</script>
<div style='clear: both;'/>
</b:if>
<script src='//code.jquery.com/jquery.min.js'></script>
