Chèn box nhỏ hiển thị các bài liên quan vào ngay trên đầu bài viết

Đăng bởi Admin | 29/12/13 | 4 nhận xét

Bài viết sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc (giống như trang vietnamnet.vn). Để tránh trùng lặp với tiện ích các bài liên quan ở phía dưới của bài viết, thủ thuật này mình sẽ dùng tiện ích các bài ngẫu nhiên từ nhãn để truy xuất cho box này.

Thủ thuật này chỉ hiện thị tốt nhất cho các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.

Hình ảnh minh họa từ trang vietnamnet.vn

Và đây là hình ảnh mình thực hiện cho blog test

☼ Bắt đầu thực hiện thủ thuật:
1. Vào bố cục 
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/js/rp-posts.js' type='text/javascript'/>

<script type='text/javascript'>
var maxEntries = 4;
</script>

<style type='text/css'>
#rp-pre {
float:right;
width:150px;
padding-left:10px;
}

#rp-content {
border:1px solid #bbb;
background:#eee;
}

#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}

#rp-posts {
position:relative;
left:-20px;
}

#rp-posts a {
background: url(http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}
</style>

- Code : var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
- Trong hình minh họa, box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;

5. Tiếp tục di chuyển xuống phía dưới trong code template, tìm đoạn code bên dưới:

<data:post.body/>

6. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='rp-pre'>
<div id='rp-content'><div id='rp-title'>Bài liên quan</div>
<div id='rp-posts'/></div></div>

<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
</b:loop>

</b:if>

7. Save template.

☼ 1 lời khuyên nhỏ:
- Khi chèn box vào bài viết (nằm bên phải) ta sẽ thấy các chữ sẽ không đều(nếu ta chưa chỉnh), như hình minh họa bên dưới:

- Để khắc phục điều này bạn chỉ cần căn đều 2 bên cho khối văn bản này là được, và ta sẽ được kết quả như hình bên dưới:

Do thủ thuật này dùng tới file JS, và nó được chèn vào ngay đầu bài viết, nên phần nào cũng sẽ ảnh hưởng tới tốc độ load bài viết.

Chúc các bạn thành công.
                                                                       Theo: Fandung