Home » Thủ thuật blog
[ Yêu cầu ] : Chèn 1 box nhỏ hiển thị các bài liên quan vào ngay trên đầu bài viết
Theo yêu cầu của bạn Đăng Hiển (danghienit.blogspot.com)

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.

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 == "item"'>
<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='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=getRandomPosts&max-results=999"' 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.

- Thêm nút theo dõi (Follow) cho blogspot
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
Comments[ 0 ]
Đăng nhận xét