Tiện ích bài viết liên quan hỗ trợ ảnh thumbnails cho Blogger Related Posts for BLogSpot

admin Mar 28, 2011 4

Tiện ích “Bài viết liên quan” có thumbnail – hình đại diện thu nhỏ phía dưới mỗi bài viết sẽ gây được sự chú ý của người đọc, kích thích người đọc truy cập vào bài viết liên quan giúp tăng lượng traffic tới blog của bạn.[ad]
Hình minh họa tiện ích “Bài viết liên quan” có hình đại diện thu nhỏ

related-posts

Nếu thấy phù hợp với blog thì thực hiện tạo tiện ích này theo hướng dẫn sau.

< 1 > . Truy cập vào Blogger  >  Layout  >  Edit HTML

Click vào ô chọn “Expand Widget Templates”

< 2 > . Tìm (Ctrl-F) đoạn code:

</head>

thay thế nó bằng đoạn code sau:

<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=”text/css”>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type=’text/javascript’>
var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
</script>
<script src=’http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>
</head>

< 3 > . Tìm đoạn code:

<div class=’post-footer-line post-footer-line-1′> 

có thể trong một số mẫu Template blogger có dạng:

<p class=’post-footer-line post-footer-line-1′> 

nếu không thấy một trong hai đoạn code trên, bạn tìm:

<data:post.dody/> 

và dán dưới chúng đoạn code sau:

<!– Related Posts with Thumbnails Code Start–>
<!– remove –><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><div style=’clear:both’/>
<!– remove –></b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>
<a href=’http://vntim.blogspot.com/2010/05/bai-viet-lien-quan-ho-tro-anh-thumbnail.html’ style=’display:none;’>Related Posts with thumbnails for blogger</a><a href=’http://www.vntim.tk/’ style=’display:none;’>blogger gadgets</a>
</b:if></b:if>
<!– Related Posts with Thumbnails Code End—> 

< 4 > . Chỉnh sửa tiện ích cho phù hợp với Blog (chỉnh các thông số màu đỏ)

– Chỉnh sửa số bài hiển thị trong tiện ích:

var maxresults=5;

– Chỉnh sửa tiêu đề của tiện ích:

var relatedpoststitle=”Related Posts”; 

– Chỉnh sửa hình đại diện mặc định cho các bài không có hình ảnh:

var defaultnoimage=http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png; 

Thay đổi màu sắc của dòng kẻ phân chia bài:

var splittercolor=”#d4eaf2″; 

– Để hiển thị tiện ích ở tất cả các trang, kể cả trang chủ Homepage: bạn chỉ cần bỏ hai dòng bắt đầu bằng <!– remove –> ở bước < 2 > và < 3 > đó là:

<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’> 

<!– remove –></b:if>

4 Comments »

  1. jones Mar 29, 2011 at 9:24 am - Reply
  2. CHARITYVinson Apr 13, 2011 at 2:57 am - Reply

    It’s well known that cash can make us free. But how to act when somebody doesn’t have money? The one way is to try to get the loan or just commercial loan.

  3. khánh Nov 5, 2011 at 4:28 pm - Reply

    bạn ơi cho mình hỏi , sao khi mình làm xong , nhưng lưu nó lại ko cho vậy thanks

    • admin Jun 7, 2012 at 8:13 pm - Reply

      tại bạn sai cấu trúc html ở đâu đó

Đăng Bình Luận »