Tạo Widgets Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp

LongAnIT 11/19/2018
Tạo Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp
Tạo Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp
Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách Tạo Widgets Recent bài viết theo nhãn ngoài trang chủ với 3 cột sử dụng cách gọi thư viện bootstrap.

Để thực hiện bạn vui lòng add thư viện bootstrap vào blogger. Bạn có thể xem bài hướng dẫn cách thêm thư viện bootstrap vào blogger tại đây.

Bước 1:  Tạo Widget với Bootstrap. Thường thì code này sẽ nằm trên cùng và nằm ngay dưới header
Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML

<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
 <b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
</div>
</div>
 </div>
Bước 2: Thêm thẻ điều kiện vào chỉ cho phép hiển thị tại trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- Nội dung chỉ hiển thị trên trang chủ -->
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
 <b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot2'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot3'></b:section>
</div>
</div>
 </div>
</b:if> 
Bố Cục bài đăng
Cột bài đăng sẽ hiển thị như hình bên dưới sau khi bạn chuyển sang phần Bố Cục
Bước 3: Ngay cột 1 của bố cục bài đăng click vào thêm tiện ích - HTML/Jsvascript


Thêm tiện ích - HTML/Jsvascript cho Widget
 Thêm tiện ích - HTML/Jsvascript cho Widget

Copy đoạn code bên dưới dán vào
<style>
/* Recent posts by labels widget by longanit.com*/
#cot1, #cot2, #cot3, #cot4{background:white;border-bottom: 5px solid #337ab7;margin-bottom:10px;border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-right: 5px solid #f1f1f1}
img.label_thumb{border-radius:100%;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;float: left;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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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 = false;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Ebook?published&alt=json-in-script&callback=labelthumbs"></script>

Bước 4: Cột 2 của bố cục bài đăng click vào thêm tiện ích - HTML/Jsvascript copy đoạn code bên dưới dán vào
<script type="text/javascript" src="/feeds/posts/default/-/Ebook?published&alt=json-in-script&callback=labelthumbs"></script>
Bước 5: Tương tự như bước 4, ở cột 3 bạn cũng sử dụng code như trên và tiến hành thay đổi nhãn cho phù hợp nhé.

Chú ý: Thay nhãn Ebook thành nhãn mà bạn muốn hiển thị. Bạn có thể chỉnh sửa thêm một số tính nằng tại code bên trên như

  • var numposts = 5; ( Số bài viết hiển thị )
  • var showpostthumbnails = true; ( Hiển thị hình ảnh Thumb set False để không hiển thị )
  • var displaymore = false; ( Hiển thị Read more )
  • var displayseparator = true;
  • var showcommentnum = false;  ( Hiển thị comment )
  • var showpostdate = false; ( Hiển thị ngày đăng )
  • var showpostsummary = false;  ( Hiển thị ký tự bài viết )
  • var numchars = 200 (Số ký tự bài đăng mặc định là 200 )

No comments:

Post a Comment

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây