Tạo bài viết mới gắn nhãn chi tiết cho blogspot

Click ngay

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'>
<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 &gt; 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 &gt; h2{display:none}
#feat-sec .ty-show,#feat-sec .ty-show &gt; h2{display:block!important}
#feat-sec .widget &gt; 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:&#39;&#39;;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:&#39;\f007&#39;;font-family:fontawesome;margin-right:5px}
.ty-meta .item-date:before{content:&#39;\f017&#39;;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'>&lt;script src=&#39;/feeds/posts/default/-/Blogspot?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs&#39;&gt;&lt;/script&gt;</div></div>
<div id='xemthemnao'>
<span class='more-tabs'><a href='/search/label/Blogspot?&amp;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 = 'http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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>
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)
<script src='//code.jquery.com/jquery.min.js'></script>

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 12 nhận xét:

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.