Bài viết theo label (nhãn) blogspot. Việc trích xuất bài viết theo nhãn trong blogspot là việc rất quan trọng có thể tùy biến là cho trang blog của các bạn nhìn chuyên nghiệp và đẹp hơn. Trong bài này Hợp chia sẻ thủ thuật lấy bài viết theo label bao gồm tên, ảnh thu nhỏ và đoạn trích ngắn.
 |
Bài viết mới nhất theo nhãn blogspot có ảnh thu nhỏ
|
1. Mục đích của thủ thuật bài viết theo label blogspot.
- Tuỳ biến đa dạng bài viết label tại trang chủ blogspot
- Bài viết theo label bên sidebar widget cũng rất dễ dàng.
- Trích xuất các bài viết mới nhất theo NHÃN blogspot bất kỳ.
2. Các bước cho thủ thuật bài viết theo label blogspot.
Để tiến hành thành công các bạn cần làm đúng và đủ 3 bước sau:
Bước 1. Nhúng code chức năng post label blogspot và phần head.
Các bạn copy đoạn code bên dưới chèn vào phía trên thẻ đóng </head>. Đoạn code này có tác dụng trích xuất bài viết theo label dạng javascript, đến bay giờ Hợp vẫn đang dùng bình thường, chưa có lỗi gì các bạn cứ an tâm sử dụng.
<!--Baiviet theo label-->
<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/AVvXsEiYEllqcZ8-jK3jMGXRPbbUxIWZl56ek3zCBxaAcQ1LPnOeBIHQOdc0WXRdVZG-KBEt1BkhqhScEe-bQs7Xrz9J8RvYDqbsF070eJW6leVwKgTFidi1bE_hJ1Kj5QYm7o5ZgGpGU1uealA/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><!--/ketthuc baiviet label-->
Lưu ý: Tuỳ template mà chèn cho đúng, tránh xung đột code làm hỏng giao diện, tốt nhất là lưu dự phòng trước nhé.
Bước 2: Tìm vị trí chèn đoạn code bài viết label blogspot vào.
Các bạn tìm vị trí thích hợp trên blogspot, thông thường là ở trang chủ hoặc widget sidebar, nơi nào bạn muốn thì chèn vào. Ví dụ blog của HỢP chèn vào widget Html/javascript bên sidebar trái đó.
Chèn code sau vào:
Lưu ý:
<script type='text/javascript'>
var numposts = 24;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/VNTONGHOPLABEL?published&alt=json-in-script&callback=labelthumbs"></script>
Lưu ý:
- Thay VNTONGHOPLABEL bằng tên Nhãn của bạn, có phân biệt in hoa thường, cấu trúc nhãn bằng tiếng việt chẳng hạn như nhãn "Cười chút coi" thì phải viết là "
Cười%20chút%20coi" thì nó mới hoạt động, các bạn tuy chỉnh lại cho đúng.
- var numposts = 24 /là số bài viết tuỳ chỉnh vô tư.
- var showpostthumbnails = true; /hiện ảnh thu nhỏ true là hiện, false là ko hiện.
- var showpostsummary = true; / hiện đoạn trích ngắn true là hiện, false là ẩn đi.
- Còn mấy cái ngày tháng... các bạn tự tìm hiểu thêm nhé.
Bước 3: Tuỳ chỉnh css cho bài viết theo label blogspot.
Việc tuỳ chỉnh css này hoàn toàn theo cá nhân của các bạn, thích sao tuỳ chỉnh vậy cho đẹp và hợp với template của các bạn. Ở đây Hợp chỉ chèn css mẫu đơn giản các bạn tuỳ biến thêm cho đẹp nhé.
Chèn code sau vào trước thẻ
]]></b:skin> nhé./* css Bai viet theo labels --------------------------------- */ img.label_thumb{ float:none; margin:0px !important; height:190px; /* Thumbnail height */ width:100%; /* Thumbnail width */ overflow: hidden; } img.label_thumb:hover { border-bottom:3px solid #0101DF; } #label_with_thumbs { margin: 0px; Padding:0px; font-style: italic; font-size:80%; text-align: justify; overflow: hidden; Color:#3F3D3D; } ul#label_with_thumbs li { List-style:none; overflow: hidden; display:inline-table; Padding: 10px; width: 48%; Margin:1%; } #label_with_thumbs li{ list-style: none ; Margin:0px; padding:0px !important; text-align:center; } #label_with_thumbs a {color: #0B0B3B} #label_with_thumbs a:hover {color: #ff0000} #label_with_thumbs strong {padding-left:0px; text-align:center; font-size:110%; font-style: normal;} /*-----ketthuc----*/
Lưu ý: chèn sao cho phù hợp với template, và tuỳ chỉnh thêm.
Nhớ tuỳ chỉnh phần giao diện hiển thị theo các khung trình duyệt khác nhau.
Tóm lại: Hợp vừa giới thiệu thủ thuật bài viết theo label blogspot. Khá đầy đủ các thành phần, dễ tuỳ biến. các bạn làm theo đúng hướng dẫn thì sẽ ok nếu ko thì bình luận bên dưới để mình sửa lại cho. Cảm ơn.
