Xin chào các bạn hôm nay QuyKhanhIT xin hướng dẫn các bạn cách tạo một Widget bài viết mới nhất hiển thị theo Label có Thumbnails ảnh cho blogspot. Mục đích của việc này là giúp cho blog của bạn trở nên sinh động hơn và giúp cho để người đọc có thể đọc được nhiều bài viết hơn, giúp giữ chân người ghé thăm blog bạn lâu hơn.

Mô Tả Ảnh

Đây là các dạng ví dụ widget theo nhãn có ảnh mà các trang blog khác hay dùng
Kết quả hình ảnh cho hiển thị bài viết theo nhãn có thumbnail blogspot

Hình ảnh có liên quan

Kết quả hình ảnh cho hiển thị bài viết theo nhãn có thumbnail blogspot

Hình ảnh có liên quan

Hướng Dẫn Chi Tiết

1. Đầu tiên các bạn truy cập vào trang quản lí blogger, ==> Template (Mẫu) ==> Edit HTML (Chỉnh sửa HTML)

*Lưu ý: Nên backup template lại trước khi thực hiện tránh sự cố đáng tiếc

2.Sau đó bấm Ctrl + F tìm thẻ  ]]></b:skin> và thêm đoạn code dưới đây lên trên nó.
/* Recent posts by labels - quykhanhit.blogspot.com--------------------------------- */ img.label_thumb{float:left;margin-right:10px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-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 {float: left;width: 100%;min-height: 70px;margin: 0px 10px 2px 0px;padding: 0;}ul#label_with_thumbs li {padding:8px 0;min-height:65px;margin-bottom:0px;border-bottom: 1px dotted #999999;}
#label_with_thumbs li{list-style: none ;padding-left:0px !important;}
#label_with_thumbs a { text-transform: uppercase;}#label_with_thumbs strong {padding-left:0px; }

3.Tiếp theo bạn tìm đến thẻ đóng </head> và thêm đoạn code sau lên trên nó.
<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;}elseif("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>
4. Tiếp nữa bạn tìm đến thẻ đóng </body> và thêm đoạn code sau lên trên.
<script type='text/javascript'>               
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);         
</script>

5. Lưu template lại.
Vào bố cục ==> Thêm Tiện Ích ==> HTML/Javascript, pate đoạn code này vào.
<style type="text/css">
#thietkeblogger-rc {width:300px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.thietkeblogger-rc h2{background:#040404;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.thietkeblogger-rc ul{list-style:none;margin:0;padding:0}
.thietkeblogger-rc h2 a:link, .thietkeblogger-rc h2 a:visited {color:#fff}
</style>
<div id="thietkeblogger-rc" class="thietkeblogger-rc">
<h2><a href="https://quykhanhit.blogspot.com/search/label/Tên Lable?&amp;max-results=5">Tên Lable</a></h2>
<script type='text/javascript'>var numposts = 5;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/-/Tên Lable?published&alt=json-in-script&callback=labelthumbs"></script>
 Lưu ý: 
  • var numposts ← Số bài viết bạn muốn hiển thị
  • var showpostthumbnails ← Hiển thị hay không hiển thị ảnh (ở đây là true có nghĩa là có hiển thị)
  • var displaymore ← Có hiển thị read more link hay không
  • var displayseparator ← Hiện / ẩn dấu phân cách
  • var showcommentnum ← Hiện / ẩn các bình luận
  • var showpostdate ← Hiện/ ẩn ngày viết bài
  • var showpostsummary ← Hiện, không hiện tóm tắt bài viết
  • var numchars ← Tổng số từ mô tả
  • Tên Lable - Tên lable (nhãn) bạn muốn hiển thị
  • https://quykhanhit.blogspot.com - Địa chỉ blog của bạn
Chúc các bạn thành công!


NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP
PHÁT TRIỂN
WEBDESIGN - HOSTING - DOMAIN
Đánh giá:

0 comments :

Post a Comment

DỊCH VỤ

Liên hệ nhanh

DANH MỤC CHÍNH

Xã hội Thời sự kinh doanh Đời sống Công nghệ Quốc tế Website Cảm nang việc làm Thiên tai Phần mềm Sức khoẻ Lối sống Siêu bão Lễ hội Văn hoá Kiến thức Giáo dục 20/10 Doanh nghiệp Tình yêu - Giới tính Lễ Phật Đản Giao thông Pháp luật Thủ thuật Công dụng của đầu dừa Chuyện lạ Giải trí Thiết kế web Sản phẩm mới Y tế Công dụng Kinh tế Bảo mật Khuyến mãi - Giảm giá Võ Nguyên Giáp Ô tô 20/11 Giới tính Mưa lũ Ngày Nhà giáo Việt Nam Xe máy hosting Khoa học Sinh viên Du lịch Dịch vụ Người mẫu Seo web Facebook Hướng dẫn sử dụng Làm đẹp Thị trường Blogger Bất động sản Hack Hướng dẫn làm dầu dừa Khám phá Ngày của Mẹ Thời trang Video Dinh dưỡng Dầu dừa nguyên chất Ngày Phụ nữ Việt Nam NukeViet Triều cường máy chủ Chăm sóc tóc Dân chơi Google Khuyến mãi Kinh nghiệm Kinh nghiệp Lễ Vu Lan Tên miền Viễn Thông Hướng dẫn Kỹ năng bán hàng Nhân vật SEO Windows WordPress Themes Điện thoại Backlink CSS3 Cây lược vàng Dịch vụ vệ sinh HTML5 Hoa hau Hội thảo Mẹ và bé Mã màu Mỹ phẩm từ dầu dừa Themes Thể thao WordPress hà thủ ô Dầu dừa trắng da Giảm cân với dầu dừa Hoa hậu Hà Nội Hướng dẫn nâng cấp Khắc phục lỗi Mua dầu dừa ở đâu Nứt gót chân Template Thông tin về dầu dừa Tin tức Trị mụn trứng cá Tuyển dụng - Việc làm

Thống kê

Translate

Quan tâm nhiều

Theo thời gian

Contact Form

Name

Email *

Message *

Follow by Email