Tiện ích bài viết liên quan kèm ảnh minh họa cho Blogspot

Tiện ích bài viết liên quan kèm ảnh minh họa cho Blogspot

, Edit
Tiện ích bài viết liên quan kèm ảnh minh họa cho Blogspot. Để cho các bài viết liên quan đến bài chính xuất hiện dưới bài chính, thực hiện như sau.

Bước 1: Save lại code phòng trường hợp bạn điền sai

Bước 2: Vào mẫu tìm thẻ </head> và dán đoạn code sau ngay trưới nó

<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8juaYGXQu1rbqpNx2i9YUHQxlVDKUtq0sNjaXLN6e_7KRIRvnE_mpaA4mYLdTqUvb17pIVO2m0eEBO_7S1W9HH5CevJe-YPeS_g2d3rcj9aCFdhNjtugGrFvfd1gG1h9z4cEg7IsVFIXZ/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=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[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') 
thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8juaYGXQu1rbqpNx2i9YUHQxlVDKUtq0sNjaXLN6e_7KRIRvnE_mpaA4mYLdTqUvb17pIVO2m0eEBO_7S1W9HH5CevJe-YPeS_g2d3rcj9aCFdhNjtugGrFvfd1gG1h9z4cEg7IsVFIXZ/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>35) 
relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
 
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}}
 
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
 
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
Bước 3. Tìm kiếm thẻ <data:post.body/> (có thể bạn chỉ nên copy cụm data:post.body lúc tìm kiếm thôi). Có thể ra nhiều kết quả khác nhau, hãy THỬ HẾT TẤT CẢ, cái nào được thì lấy, cái nào không thì thôi. Trong trường hợp không tìm thấy hoặc thử rồi mà không được cái nào thì hãy tìm đến đoạn code

<div class='post-footer-line post-footer-line-1'></div>

Dán vào sau nó doạn code sau đây

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>
Bước 4: Save template lại và xong về cơ bản

Chỉnh sửa:
Ở bước 2, bạn có thể chỉnh sửa giao diện của tiện ích này ở những cái sau


  • #related-posts : cho bạn chỉnh sửa cái khung cơ bản nhất, bao gồm hiện hay không hiện lằng gạch border, khoảng cách từ tiện ích này tới các thành phần khác của bài viết,...
  • #related-posts h2 : cho bạn tuỳ chỉnh những cái liên quan đến chữ "Realated posts:" : bạn có thể thay đổi chữ này thành chữ tiếng Việt hay đại loại thế.
  • 650px : chiều rộng của tiện ích, hãy sửa lại sao cho phù hợp với chiều rộng trang của bạn.
  • 250px : chiều cao của tiện ích.
  • 35 : đây là số ký tự của phần tên bài đăng phía dưới hình minh hoạ được phép hiển thị, bạn có thể tăng lên nếu muốn hiển thị nhiều chữ hơn.
  • Đường dẫn no-image.img : cái này là hình ảnh mặc định nếu như bài đăng của bạn không có hình ảnh gì. Bạn có thể thay thế nó bằng hình của riêng bạn.
  • 200px, 120px : cái này là chiều cao và rộng của hình minh hoạ.
Trên là những hướng dẫn cơ bản, nếu bạn muốn thật sự hoàn hảo, hãy dùng Firebug để tự tuỳ chỉnh thêm, nếu có thắc mắc gì vui lòng comment bên dưới bài viết. Lưu ý, blog sẽ không giúp đỡ theo kiểu "sửa giao diện giùm".

Share on Google Plus

About Anh Bán Báo

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 nhận xét:

Post a Comment

Mời bạn nhận xét, vui lòng sử dụng tiếng Việt có dấu. Cảm ơn.

Subscribe to: Post Comments ( Atom )