Home / Hướng Dẫn / Blogger / Tạo tin liên quan trong blogspot với ảnh thumnail

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

Để 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='http://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. Chúc các bạn thành công !

13 comments

  1. mình chèn như bạn mà ko thấy hiển thị gì cả

    • Tạp Chí Tin Học

      Bạn xem bài đăng của bạn phải chèn hình ảnh được upload lên blogger mới lấy được nha bạn!

  2. Mình làm như bạn hướng dẫn nhưng vẫn không hiển thị như của bạn .bạn xem hộ mình được không

    http://phunsonphuncat.blogspot.com/

  3. Mình cũng làm như bạn hướng dẫn mà không có được 🙁

    Bạn có thể xem giúp mình được không?

    Website: http://www.goldmarkcitygiagoc.com/

    Cám ơn bạn nhiều !

    • Tạp Chí Tin Học

      Mình thực hiện theo hướng dẫn bẫn bình thường bạn ạ. Bạn xem lại code có đúng không? Mình có vào trang web của bạn thấy hình ảnh trong bài viết của bạn cũng không hiển thị. Có thể hình ảnh của bạn chưa được upload vào blogger

  4. bạn ơi xem dùm mình sao mà blog mình chèn hoài ko ra: http://hocnauanonline.blogspot.com/ cám ơn nhiều

  5. Bạn xem lại giúp mình với nha, mình làm rồi mà k dc, choáng
    http://www.view5s.com/

    • Tạp Chí Tin Học

      Bạn tin tưởng mình thì đưa user và pass để mình vào trong admin chỉnh sữa code chứ bạn.

  6. em cũng làm như thế nhưng ko được bác à web của em http://www.supertechtoday.com bác giúp em được chứ

  7. Cám ơn anh đã chia sẻ kiến thức. Mình muốn bài viết liên quan hiển thị khi xem trên di động thì phải chỉnh như thế nào? hoặc có bài viết nào nói về vấn đề này thì admin chỉ với, thanks trước!

  8. Mình làm như bạn hướng dẫn nhưng vẫn không hiển thị như của bạn. bạn xem hộ mình được không

    http://huutaiuit.blogspot.com.

    Mình đã làm rất nhiều cách rồi mà vẫn không được

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.