"Tiện ích bài viết liên quan có mô tả"

(Traidatmui.com) – Tạo một tiên ích các bài có liên quan (Related posts) là một thủ thuật khá hay và rất tiện ích cho các bài viết. Khi bạn xem một bài viết nào đó thì thủ thuật này sẽ hiển thị thêm một số bài viết khác liên quan đến chủ đề đó, sẽ giúp đọc giả xem bài nhanh chóng và dễ dàng hơn. Nó vừa tiện cho độc giả trong việc tìm kiếm vừa trang trí cho blog thêm xinh động đẹp mắt. Để có được tiện ích này mình xinh giới thiệu cách để thực hiện một cách nhanh gọn và dễ dàng:

☼ Bây giờ ta bắt đầu thủ thuật:

1.Đầu tiên đăng nhập blog
2.Vào bố cục
3.Vào chỉnh sửa code HTML(chọn mở rộng tiện ích)
4.Chép tất cả đoạn code bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
.mota-desc{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-desc:hover{
background-color: transparent;
z-index: 50;
}

.mota-desc span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-desc span img{
border-width: 0;
padding: 2px;
}

.mota-desc:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:70px;
width:250px;
background:#ddd;
text-align: justify;
}

#related-posts {
padding-top:40px;
}

#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
</style>


<script language='JavaScript'>
imgr = new Array();

imgr[0] = "http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif";


showRandomImg = true;

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#555";
aBold = true;
motacolor = "#f00";

text = "Nhân xét";

showPostDate = true;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;

home_page = "http://traidatmui.com/";

</script>

<script src='http://data-traidatmui.appspot.com/scripts/related_post.js' type='text/javascript'/>

☼ Lưu ý:
+ imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả .
+ fntsize = 12; : size chữ của tiêu đề bài viết
+ acolor = "#555"; : màu của tiêu đề bài viết
+ motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
+ summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
+ summaryFontsize = 12; : size chữ của phần mô tả
+ summaryColor = "#000"; : màu chữ của phần mô tả
+ numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 6.
+ home_page = "http://traidatmui.com/"; : thay bằng địa chỉ URL của blog bạn

5.Tiếp tục xuống dưới, tìm đoạn code sau :

<data:post.body/>

6.Thêm vào sau nó đoạn code bên dưới:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Bài liên quan : </b></font><br/>
<b:loop values='data:post.labels' var='label'><b>Nhãn : </b><font color='#FF0000'><data:label.name/></font><br/>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;' type='text/javascript'/>

</b:if>
</b:loop>

</div>

</b:if>

7.Save lại là xong

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