• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề

35
26/01/2011

Mấy bữa nay cận Tết Tân Mão rồi nên rất bận rộn. Mặc dù vậy mình vẫn dành thời gian để chia sẻ thủ thuật và giải đáp yêu cầu của bạn đọc. Quả thật có rất nhiều ý tưởng muốn hiện thực hóa nhưng thời gian thì thấm thoát thoi đưa. Nhân tiện nhắc đến vài bữa trước bạn Minh Quân cứ nằng nặc yêu cầu mình viết bài về thủ thuật tạo tiện ích Bài viết liên quan mới hơn và cũ hơn cùng chủ đề. Mình đồng ý dành thời gian viết bài. Nhưng cũng biết lúc trước blogger Anh Võ (vietguideweb.com) đã từng phát triển tiện ích dạng này và có nhiều trang giới thiệu lại thủ thuật này, tuy nhiên thành công không như mong đợi đối với blogspot tiếng Việt khi các bài viết được gán nhãn bằng tiếng Việt sẽ không hoạt động được.

Nếu áp dụng lại thủ thuật của Anh Võ cho blog của mình cũng như nhiều blog khác thì chẳng nhẽ phải chỉnh lại tên các nhãn sang tiếng Anh hoặc tiếng Việt không dấu hay sao. Mình cũng nghĩ nát óc vẫn chưa chỉnh được code của Anh Võ để tiện ích hoạt động tốt hơn. Chợt nhớ có một bữa ghé thăm trang www.vietutd.blogspot.com có giới thiệu tiện ích Next Posts and Previous Posts. Mình tò mò thử nghiệm xem và nhận thấy tiện ích này hiển thị tốt với nhãn tiếng Việt. Thế là hình thành ngay ý tưởng điều chỉnh tiện ích này để biến nó thành tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề (Newer and Older Related Posts) mà bạn thường thấy ở trang VnExpress.net.

Bạn có thể xem Demo.

Và dưới đây là hình minh họa.



Còn chờ gì nữa nào, chúng ta cùng cài đặt tiện ích này.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Nếu bạn đã từng cài đặt các tiện ích Bài viết liên quan kiểu khác thì nên tháo ra khỏi Template.

Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<!--Related Posts Styled by Huynh Nhat Ha Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts a{color:blue}
#related-posts a:hover{color:brown}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0;text-decoration:none;font-size:12px;text-color:#000}
#related-posts ul li{display:block;/*background:url(&quot;http://img840.imageshack.us/img840/2004/rssqn.png&quot;) no-repeat 0 0;*/background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-left:21px;line-height:1.5em;border-bottom:1px dotted #ccc}
</style>
</b:if>
<!--Related Posts Styled by Huynh Nhat Ha End-->

Bước 2. Tìm một trong các dòng dưới đây:

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

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

<div class='post-footer'>

Đặt trước nó bằng đoạn code bên dưới.

<!-- Related Posts Code Styled by Huynh Nhat Ha Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='javascript'>
// <![CDATA[
var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
var nexttitle = 'Bài viết mới hơn';
var maxprev = 8; // Chỉnh số 8 chỉ số bài viết cũ hơn tối đa
var prevtitle = 'Bài viết cũ hơn';
// ]]>
</script>
<script src='http://hacodeproject.googlecode.com/files/newer-older-related-posts.js' type='text/javascript'/>
<div id='related-posts'>
<div id='next-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (nextlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substring(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
nextlabel +=1;
}
</script>
</b:loop>
<div id='prev-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (prevlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substr(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
prevlabel ++;
}
</script>
</b:loop>
</div>
</b:if>
<!-- Related Posts Code Styled by Huynh Nhat Ha End-->

Lưu Template là OK. Trong lúc gấp gáp để giải đáp cho bạn Minh Quân nóng lòng chờ đợi tiện ích này cho nên sẽ không tránh thiếu sót, hy vọng có thời gian mình sẽ phát triển thêm tiện ích này.

:55)

{35 bình luậnAdd yours ?}

10:08:00, 26 thg 1, 2011

Vậy tớ muốn đổi cái Icon http://i1126.photobucket.com/albums/l608/quanlive009/older-posts.png trước bài viết thì làm sao với lại hướng dẫn tớ làm sao để cho cái bài viết mới đó khi mình viết bài mới ra nó sẽ ghi là không có bài viết mới nhất

Reply
10:52:00, 26 thg 1, 2011

Thay icon thì thay thế dòng http://img208.imageshack.us/img208/9070/weedbullet.gif. Nếu muốn dòng thông báo "Không có bài viết mới hơn" thì xài lại bản của Anh Võ nha, mà thay tên nhãn thành k dấu nhé. Còn bản này chắc k gắn lệnh đó được. :51) . Cậu tự thêm nhé, hi hi :60)

Reply
11:22:00, 26 thg 1, 2011

Sặc tớ còn không biết bản của Anh võ nữa mà thêm

Reply
12:26:00, 26 thg 1, 2011

@Minh Quân Bản của Anh Võ ở trang này giới thiệu lại nè.:(

Reply
16:52:00, 26 thg 1, 2011

@Minh Quân Đến Tết này thì blog tớ thành được 4 tháng. Minh Quân đang dẫn đầu về số comments trên blog tớ nên kỷ niệm 4 tháng thành lập blog, tớ sẽ add trang của cậu vào danh sách VIP trên slide banner ở đầu sidebar. Cậu chuẩn bị một banner 225x50 rồi gửi qua tớ nhé, hoặc upload lên đâu đó để lấy link nhé.

Reply
18:24:00, 26 thg 1, 2011

Bạn ơi vẫn chưa giúp mình được à? Mình vẫn đang đợi bài viết của bạn đấy! rất cám ơn bạn

Reply
20:19:00, 26 thg 1, 2011

@BB Giải đáp cho blog của bạn mang tính cá nhân quá, phải từ từ thôi, k gấp được, với lại có thể sẽ k thành công, bạn k nên kỳ vọng quá:P

Reply
20:34:00, 26 thg 1, 2011

oh tớ không ngờ là trùm comments blog này đã quá

Reply
21:12:00, 26 thg 1, 2011

@Minh Quân Có công thì được thưởng và tôn vinh thôi, đó là lẽ thường tình mà. Cậu design 225x50 banner đi nhé :68)

Reply
13:15:00, 2 thg 2, 2011

bạn chia chúng ra làm 2 cột như này được không
http://forum.vietyo.com/topic/1-pic-duy-nhat-ve-hoang-thuy-linh-102675.html

Reply
22:22:00, 11 thg 3, 2011

ban lam on cho hoi ,theme cua minh ko co nhung dong tren ,minh phai lam sao day?

Reply
23:29:00, 23 thg 3, 2011

blog minh` ko thay nhung dong o buoc 2 ban xem giup :D

Reply
12:25:00, 31 thg 3, 2011

nếu muốn như thứ tự thế này thì làm thế nào hả anh.
http://gi173.photobucket.com/groups/w74/NAENK9CJ4O/untitled-1.jpg

Reply
23:59:00, 28 thg 4, 2011

CẢM ƠN BẠN NHIỀU NHA,MÒ MẪM MÃI...HÔM NAY MỚI THÀNH CÔNG.CHÚC BẠN LUÔN VUI VẺ,CÓ NHIỀU BÀI HAY+HỮU ÍCH

Reply
10:49:00, 16 thg 5, 2011

anh ơi ! nền của Blog em là nền màu đen ! khi thêm code này vào thì nó cũng màu đen nên ko xem rỏ chữ ! ai có thể chỉnh css cho chữ màu trắng ko

Reply
07:57:00, 7 thg 8, 2011

Hi,
Tiện ích này không có ảnh đại diện, muốn thêm ảnh đại diện vào thì làm thế nào Nhật Hà ơi.

Reply
18:52:00, 9 thg 8, 2011

Cuối cùng thì cũng mò về cái này sau khi tưởng như đã an lòng với:http://www.thuthuatblogger.info/2010/10/tien-ich-bai-viet-cung-chu-e-lien-quan.html
Hơi nặng tí nhưng cái này nó lấy được mấy bài cũ hơn rất OK

Reply
19:07:00, 7 thg 9, 2011

Blog em có dùng thủ thuật này mà cứ load đến phần bài viết liên quan là nó khựng lại, không biết anh vào có bị vậy không? Vì có sử dụng file js trong đó!

Reply
19:17:00, 7 thg 9, 2011

@Linh Dung Blog anh cũng áp dụng thủ thuật này bình thường mà :51)

Reply
19:38:00, 7 thg 9, 2011

Chắc do mạng yếu đó Linh Dung, a vẫn vào trang e bình thường, chạy vèo vèo có seo đeo. :51)

Reply
19:41:00, 7 thg 9, 2011

To Petit: Bình mới nhập quốc tịch Pháp? Thay đổi quốc tịch liên tục à nha, từ Hàn Quốc (Lee Peace) sang Âu châu rồi.

Reply
19:45:00, 7 thg 9, 2011

Hihi vậy thì em yên tâm rồi, thực ra em có "khai triển" cái file js này ra rồi cho vào temp luôn chứ không để link js, vì dung lượng cũng khá nhỏ!

Reply
20:03:00, 7 thg 9, 2011

Hì, lúc comment quên đổi tài khoản đó anh :51)

Reply
10:43:00, 8 thg 9, 2011

To chuyen sang dung cai cua Duy Pham,nhung web sao lai cham hon,khong hieu nua ma cai cua DP code ngan hon.Pac Ha ui,kiu

Reply
10:56:00, 8 thg 9, 2011

Cơ sở nào để nhận định nặng hơn, phải có bằng chứng chứ tớ vẫn thấy nó bình thường mà.

Reply
11:02:00, 8 thg 9, 2011

Tai vi minh sau khi cai dat mang di "so gang" voi cai blog khac thay no chay cham hon cai cu.

Reply
20:40:00, 17 thg 9, 2011

Chiều giờ vọc temp Simplex, chèn khá nhiều tiện ích nhưng không đc. Đến giờ mới phát hiện 1 điều hết sức đơn giản.
Footer-1, Footer-2..không sử dụng đc, phải sử dụng thẻ ở VỊ TRÍ THỨ 2 !

Reply
16:56:00, 24 thg 9, 2011

Mình làm mà chẳng được, vẫn không hiện bạn xem giúp xemtruyen.net

Reply
18:37:00, 24 thg 9, 2011

@Admin Cái này chỉ là copy và paste rất đơn giản thôi mà, bạn thực hiện nó bảo lỗi như thế nào vậy, nói rõ để mọi người còn giúp đỡ bạn chứ!

Reply
14:02:00, 5 thg 10, 2011

Cho tôi hỏi, tại sao tôi không tại được Tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề như trong baig cỉ dẫn. Cám ơn.

Reply
16:50:00, 5 thg 10, 2011

@KhopKhun Linh Dung đã trả lời trước giúp bạn rồi đó.

Reply
13:51:00, 31 thg 10, 2011

Anh ơi sao em dùng temp nào cũng không có 1 trong những code ỏ bước 2 nhỉ, có thể thêm chúng vào được không.

Reply
11:36:00, 7 thg 12, 2011

Bác Hà, cái này khi chèn vô Blog lại uqt61 hiện cái này : --> trên top, làm sao xóa được nó đây

Reply
19:38:00, 30 thg 12, 2011

Muốn có thêm cả ngày giờ, ngày viết bài ở đằng sau thì làm thế nào anh hà ạ!

Reply
19:11:00, 7 thg 2, 2012

@Bùi Quang Truyện

cùng câu hỏi với bạn này.

Muốn có thêm cả ngày giờ, ngày viết bài ở đằng sau thì làm thế nào ? Mong admin reply sớm.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn