Tiện ích bài viết liên quan dạng sổ dọc

Cách tạo phần bài viết liên quan dạng menu sổ dọc xuống, hay còn gọi dạng dropdown. Thực ra đây cũng chỉ là bản cải tiến từ bản related post v2.0 của Anhvo mà thôi. Hiện tại mình đã test ở trang blog của mình, và thấy chạy cũng ổn. Nhưng không biết chạy trên blog khác thì như thế nào, việc này chắc để ai muốn test thủ thuật này kiểm tra thôi.
Hình ảnh minh họa :

Và sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đến đọan code này :

<div class='post-footer-line post-footer-line-3'>

5. Chèn đọan code bên dưới vào sau dòng code vừa tìm được:

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

<div class='relatedposts'>

<div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div>

<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>

<style type='text/css'>

#related-posts-block {
margin:10px 5px;
font-size:12px;
/*color:#3c3c3c;*/
text-transform:none;
}
#related-posts-block #related-posts-loading-text{
font-size:18px;
color:#FF0033;
text-align:center;
}
#related-posts-block #related-newest-href {
margin:10px 5px;
}

#related-posts-block #related-newest-href #related-newest-title {
font-size:14px;
margin:10px 5px
font-weight:bold;
padding-left:27px;
background:url(http://i342.photobucket.com/albums/o433/bkprobk/icon_prev.jpg) no-repeat bottom left;
}

#related-posts-block #related-older-href {
margin:10px 5px;
}

#related-posts-block #related-older-href #related-older-title {
font-size:14px;
margin:10px 5px
font-weight:bold;
padding-left:27px;
background:url(http://i342.photobucket.com/albums/o433/bkprobk/icon_next.jpg) no-repeat bottom left;
}

#related-newest-fd select {
max-width: 350px;
}
#related-older-fd select {
max-width: 350px;
}

</style>

<script type='text/javascript'>
function go1(){
location=document.newer.viewnewer.options[document.newer.viewnewer.selectedIndex].value
}
function go2(){
location=document.older.viewolder.options[document.older.viewolder.selectedIndex].value
}
</script>

<div id='related-posts-block'>
<div id='related-posts-loading-text'>
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>

<div id='related-newest-href'>
<div id='related-newest-title'/></div>
<input name='newer-xem' onClick='go1()' type='button' value='View'/>

<div id='related-older-href'>
<div id='related-older-title'/></div>
<input name='older-xem' onClick='go2()' type='button' value='View'/>
</div>

</div>
</b:if>
<!-- END related post-->

- Chú ý đọan code CSS này :

#related-newest-fd select {
max-width: 350px;
}
#related-older-fd select {
max-width: 350px;
}

- Trong trường hợp tiêu đề bài viết quá dài, nó sẽ làm thẻ select kéo dãn ra và vượt khỏi vùng hiển thị của blog. Chính vì thế dòng code trên để thiết lập độ rộng tối đa cho thẻ select

6. Tiếp tục chèn đọan code bên dưới vào trước dòng code </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var showdate = false;
var max_post = 12;
//]]>
</script>
<script src='http://nguyenminh.110mb.com/js/related-posts-dropdown.js' type='text/javascript'/>
</b:if>

- Dòng code này var showdate = false; là để thiết lập việc ẩn hiện ngày đăng bài viết, trong code mẫu là ẩn, nếu các bạn muốn hiện thì thay giá trị false thành true.
7. Save template.

Như vậy đã hòan thành, chúc các bạn thành công.