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 == "item"'>
<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>
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<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 != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=100"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>displayrelatedposts();</script>
</div>
<div style='clear:both;'></div>
</b:if>
<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 != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=100"' 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é!
Unknown
15 June, 2015 15:17
toms shoes
chanel online shop
chanel handbags
abercrombie outlet
tory burch outlet
oakley sunglasses outlet
kate spade outlet
tory burch shoes
kate spade uk
nike air max
gucci outlet
gucci outlet
ralph lauren outlet
michael kors handbags
hollister clothing store
air max 90
tory burch handbags
burberry handbags
coach outlet
cheap jordans
gucci uk
ray ban uk
prada outlet
cheap jerseys
soccer jerseys
true religion jeans
ray ban sunglasses
burberry outlet
ray bans
chanel outlet
coach outlet online
oakley sunglasses wholesale
christian louboutin outlet
tory burch outlet online
fitflops sale clearance