Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện

Chắn hẳn bạn từng biết qua tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin. Tính năng của tiện ích này là hiển thị các bài viết liên quan đến một chủ đề với ảnh đại diện và tiêu đề bài viết. Tuy nhiên có một điểm mà mình cho rằng sẽ gây khó chịu cho những blogger khó tính nhất, đó là liên kết Linkwithin hiển thị ngay trên tiện ích. Đây được xem là một kiểu quảng cáo.

Bài viết này giới thiệu về tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện (Random Related Posts with Thumbnail) hiển thị 4 bài viết ngẫu nhiên liên quan đến một nhãn cho bài viết, gồm ảnh đại diện, tiêu đề bài viết và phần tóm tắt bài viết. Điểm đặc biệt của tiện ích này là: nếu bài viết không có ảnh đại diện thì sẽ hiển thị ảnh đại diện mặc định, nếu bài viết không có ảnh đại diện mà thuộc các nhãn như Blogger, CSS, HTML, JavaScript, Jquery, Facebook, Twitter thì sẽ hiển thị ảnh đại diện mặc định được gán sẵn cho các nhãn đó.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Thêm đoạn code dưới đây vào trước thẻ </head>.

/* Random Related Posts with Thumbnails Widget by Huynh Nhat Ha */
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#rdrelatedposts {}
#rdrelatedposts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
.relaposts {float:left;height:200px;margin:0 5px;overflow:hidden;padding:5px;text-align:center;width:130px;}
.relaposts:hover {background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');}
.relaposts a {color:#a52a2a !important;display:inline;font-family:Arial;font-size:12px;line-height:1;}
.relaposts img {-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 20px #444 inset;-webkit-box-shadow:0 0 20px #444 inset;box-shadow:0 0 20px #444 inset;height:72px;padding:5px;width:72px;}
.relaposts h6 {display:table-cell;height: 5em;margin:5px 0 0;overflow:hidden;padding-bottom:2px;vertical-align:middle;width:130px;}
.relaposts p {border-bottom:1px dotted #555;border-top:1px dotted #555;color:#AAA;font-size:11px;height:4em;line-height:1;margin:5px 0 0;overflow:hidden;padding:5px 0;text-align:justify;}
</style>
<script src='http://hacodeproject.googlecode.com/files/randomrelaposts.js' type='text/javascript'/>
</b:if>

Nếu bạn rành về CSS thì có thể điều chỉnh một số thuộc tính CSS trong đoạn code ở trên. Chú ý đoạn code trên dùng cho Template có phần post-body với chiều rộng là 600px, tùy thuộc vào bề rộng của phần post-body trong Template của bạn mà chỉnh tham số width:130px trong dòng code được đánh dấu màu đỏ cho phù hợp.

Bạn nên tải về file randomrelaposts.js để upload lên host sử dụng cho blog của bạn để tránh hạn chế băng thông do dùng chung file.


Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> rồi đặt trước nó với toàn bộ đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rdrelatedposts'>
<h2>Bài viết liên quan</h2>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=100&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>displayrelatedposts();</script>
</div>
<div style='clear:both;'></div>
</b:if>

Bước 3. Bước sau cùng nhưng không kém phần quan trọng là Lưu Template.Chúc bạn thành công nhé!