Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

09:50 ngày 1/2/12

Tiện ích bài viết liên quan (Related Posts) có ảnh thumbnail

Mình xin chia sẽ cùng các bạn cách để tạo tiện ích bài viết liên quan hiển thị cuối mỗi bài viết cho Blogspot.


                                                                         Hình ảnh minh họa 

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn tiếp mở rộng tiện ích (Expand Widget Templates)
5. Thêm code bên dưới vào sau thẻ <head>

<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: 13px; /* cở chữ của tiêu đề "Related Posts" */
font-weight: bold;
color: #000; /* màu chữ của tiêu đề "Related Posts" */
font-family: Georgia, Times, serif;
margin-bottom: 3px;
margin-top: 0px;
padding-top: 2px;
}
#related-posts a{
color:#000; /* màu chữ của tiêu đề bài viết*/
}
#related-posts a:hover{
color:#0000ff; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}
#related-posts a:hover {
background-color:#ffff99; /* màu nền khi rê chuột*/
}
</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSjofgNEbvCu38n2B8LgenRQSqfgdDso44fBYTgigYiOLNkS1n7bxeSW9WNkQeHiNzv7NN_Gt9jCq84UKzfV4_Mdgesfy9OIO2X0SI4__1CvQGl4Le4DBB2a3HWwFhkSDhgVym90qza6qY/&quot;;
var maxresults=5; // số bài viết hiển thị
var splittercolor=&quot;#d4eaf2&quot;; // màu của viền phân cách các bài viết
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://tanchau123.googlecode.com/files/relatedposts_thum_17102012.txt' type='text/javascript'/>

» Chỉnh code: Bạn dựa vào các hướng dẫn (dòng màu xanh) trong code để tùy chỉnh theo ý của bạn.

6. Tìm (Ctrl F) đến code bên dưới hoặc tương tự

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

7. Chèn code bên dưới vào ngay sau code vừa tìm được

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

8. Cuối cùng save template lại

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

Mới cập nhật

6 nhận xét

· Thêm biểu tượng cảm xúc

  1. Nặc danh14:53 16/10/12

    Anh ơi làm thế nào khi rê chuột vào tiêu đề bài viết thì nó hiển thị full tiêu đề hay không :((

    Trả lờiXóa
  2. @Phạm Tân Tân Do code này anh tham khảo bên traidatmui nên cần phải chỉnh sửa lại mới hiển thị được full tiêu đề khi rê chuột (anh sẽ update lại code sau). Em chèn thẻ này <data:post.snippet/> vào sau thẻ <data:post.url/> ở bước 7 nhé ! (cái này hiện full tiêu đề khi rê chuột vào ảnh).

    Trả lờiXóa
  3. Nặc danh07:53 17/10/12

    @Tanchau123 Nó củng vậy à có gì thay đổi đâu :((

    Trả lờiXóa
  4. @Phạm Tân Tân Anh vừa sửa lại rồi, em thay dòng http://tanchau123.googlecode.com/files/relatedposts_thum.txt thành http://tanchau123.googlecode.com/files/relatedposts_thum_17102012.txt sẽ không giới hạn về ký tự của tiêu đề bài viết.

    Trả lờiXóa
  5. Nặc danh08:25 18/10/12

    nó vẫn vậy :((

    Trả lờiXóa
  6. @Phạm Tân Tân Vậy do lỗi hiển thị Google rồi. Em download file txt về mày đi rồi up lên google (nhớ đặt lại tên khác relatedposts_thum.txt nhé).

    Trả lờiXóa