Tạo tin liên quan trong blogspot với ảnh thumnail

16/09/2012

Để blog của bạn trở nên sinh động và dễ dàng giới thiệu những bài viết hay đến cho nhiều người thì tin liên quan là thứ không thể thiếu cho blog của bạn, có rất nhiều cách để làm điều đó, hôm nay mình xin giới thiệu cách tạo tin liên quan với hình ảnh thumnail của bài viết hiện tại, các tin liên quan này sẽ hiển thị ở dưới cùng bài viết và được chọn cùng danh mục , label và tag của bài viết đó. Như hình mình họa dưới đây:

Tạo tin liên quan trong blogspot với ảnh thumnail
Các bạn chỉ cần làm theo các bước sau đây :
Bước 1 : Đăng nhập vào Blogger : Dashboard >>Design >>Edit HTML;
Bước 2 : Click chọn ” Expand widgets template “.
Bước 3 : Tìm đoạn code

</head>

Sau đó copy và paste đoạn code sau ngay trên thẻ </head>

<!--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://4.bp.blogspot.com/-sCQy7v-L2bo/T3OYPnm7LuI/AAAAAAAABl4/cbteumcrZSU/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Đoạn code trên sẽ hiển thị mặc định là 5 tin liên quan, nếu bạn muốn hiển thị nhiều hay ít hơn thì có thể điều chỉnh ở dòng var maxresults=5;

Bước 5 : Bây giờ các bạn nhấn Ctrl + F và  tìm đoạn code sau :

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

Nếu các bạn không tìm thấy thì tìm đoạn này :

<p class='post-footer-line post-footer-line-1'>

Hoặc :

<data:post.body/>

Bước 6 : Copy và paste đoạn code bên dưới ngay dưới những đoạn code mà chúng ta tìm thấy ở bước 5

<!-- 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=5&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://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Chú ý :  Thay đổi giá trị 5 từ max-results=5 với số bài viết mà bạn muốn hiển thị

Bước 7  : nhất nút Save để kết thúc.
Như vậy là bạn đã có thể tạo bài liên quan với ảnh thumnail rồi, nếu bạn có gặp bất cứ khó khăn gì trong bài viết này thì có thể để lại lời nhắn, mình sẽ giúp các bạn.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • hvpro

    bạn ơi mình lam nhu bạn mà có thấy tin có chay được đâu bạn thấy trắng tinh àh, bạn có thể chỉ rõ hơn không mình mún tao 5 tin tự động chạy giống như
    cảm ơn bạn

    • Chào bạn, bài này mình đã kiểm nghiệm và có nhiều blog đã thực hiện và làm được như trang http://www.keosocola.com, bạn thử lại ở bước 5, khi tìm dòng ” post-footer-line post-footer-line-1 ” bạn nên đặt đoạn code ngay ở lần đầu bạn tìm thấy nó, nếu vẫn chưa được thì cứ thử lại ở lần tìm kiếm thứ 2, 3.. Chúc bạn thành công !

  • hvpro

    ah mình hiểu rùi, mình tưởng đoạn code trên lấy 5 tin mới nhất trên blog để chạy chứ, khi người đọc chỉ cần click chuột vào để đọc nhưng không phải, Bạn có đoạn code nào như vậy k cho mình xin đi như trang
    http://www.pcworld.com.vn/trangchu.html?p=1 này nè

  • hvpro

    Bạn có thể hướng dẫn mình chỗ code sữa lại tiêu đề với chứ tiêu đề mình chữ hiện xấu wa bạn xem http://hvpro.blogspot.com/
    Tiêu đề:

    “Ông vua rác” và ý tưởng từng bị cười nhạo là điên rồ

    chữ lớn nhỏ lung tung hết

  • Bạn vào chỉnh sửa HTML, tìm dòng “font-family:’Oswald’,sans-serif;” thay bằng ” font-family:Arial, Helvetica, sans-serif; ” là được. Với lại sau này mình sẽ mở mục Hỏi – Đáp, còn comment chỉ dành cho trả lời bài viết thôi nha bạn. những câu hỏi không liên quan đến bài viết bạn nên đặt ở đó. Chúc bạn thành công !

  • đình quân

    bạn ơi,mình làm giống như bạn nói nhưng k dc bạn à,khi mình mở một bài viết thì k có bài viết nào liên quan hiện ra cả

    • Bạn nên đọc kỹ và làm lại thật cẩn thận thử xem sao, mình đã làm và thành công đó bạn

  • Guest

    số bài đăng chỉ có thể max là 5 thôi ư mình ko thể đưa lên nhiều hơn nữa, vì sao thế bạn?

  • leedongchul

    Cảm ơn ad vì bài viết khá hay…đính chính lại 1 chút…việc tìm các đoạn code như trên có thể các 1 số template ko có…vì vậy các bạn tìm từ khóa “related-posts” …dựa vào từ khóa này để xóa hết phần tin liên quan cũ của template để tránh xung đột…sau đó chèn đoạn mã trên thẻ còn cái đoạn mã sau …thì chèn vào đúng nơi mà template đó người ta gọi hàm…cụ thể là bạn tìm từ khóa “related-posts” được đoạn nào có thì bạn thay thế code ở bước 6 vào vị trí của đoạn code bắt đầu từ ….