Để 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

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 == "tem"'>
<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;
    margin-bottom: 0.75em;
}

Đ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/><br>

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 == "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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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 !

  • Blogger
  • April 9, 2014
  • 0 comment
  • 234 views

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang