Chúc bạn một ngày tốt lành

Thứ Năm, ngày 27 tháng 5 năm 2010

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

VnTim™ 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.

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.

Bước 1. Truy cập vào Blogger  >  Layout  >  Edit HTML

- Click vào ô chọn "Expand Widget Templates"

Bước 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>

Bước 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—>

Bước 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>

Chúc các bạn cài đặt thành công và có blog đẹp nhé.

14 Comments:

Hạc Giấy said...

Phức tạp quá

minhphuc said...

1 cách khác là vào trang http://www.linkwithin.com/learn điền email, url của blog, chọn Platform là Blogger, sau đó nhấn vào nút Get Widget. Ở trang tiếp theo nhấn vào Install Widget để cài đặt trên blog của bạn.

ChơiBlog.TK said...

mình muốn nhận bài viết mới từ blog bạn qua email có được không ?

Blogger said...

Bài viết hay và rất có ích , thanks bạn đã share !

EA said...

Bài viết hay lăm
các bạn cần lưu ý. trong đoạn code trên bị lỗi chổ này
nhé

Bố Tướng said...

sao đi blog nào cũng lỗi code này ko dùng đc.

chán

Admin said...

rất hay thanks bạn nhé demo http://www.xemtruyen.net

www.cado188bet.com said...

sao blog của mình hok dc nhỉ.hix..chán.

ChoiBlogs.blogspot.com said...

sao mình tuỳ chỉnh var maxresults=5; lên 6 hay 7 hay 8 không được nhỉ ?
chỉnh hạ xuống 1 2 3 4 thì ok :) chả hiểu ...

Phần mềm kế toán said...

Có cách nào làm đơn giản hơn không?

Nặc danh said...

Không gian đẹp Tan gai
Những câu nói hay về tình yêu
Hiep dam Chuyện tình yêu

Online Phim Lẻ said...

Mình đã áp dụng cho trang thiet ke nha pho dep và đã thành công, thank bạn.

Trung Tâm Thành Công said...



Càm ơn nhiều vì bài viết rất hay và có ích! Học lái xe ở đâu chất lượng | Học lái xe chất lượng | Học lái xe HCm

Trường Nguyễn Xuân said...

Cảm ơn bài viết nhiều. Rất hay và có ích
Phần mềm quản trị sản xuất | Phần mềm quản lý tài chính kế toán

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam