Related Posts with Thumbnails


Bài viết liên quan (Related Posts) này gần giống của DuyPham nhưng có thêm phần trích dẫn Summary-text .

Cách thực hiện :

Chèn đoạn mã bên dưới ngay trước </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts {
}

#related_posts h4 {
border-top: 1px solid #888;
border-bottom: 1px solid #888;
color: #333;
font-size: 18px;
letter-spacing: 0;
line-height: 20px;
margin: 0 0 5px;
padding: 5px 10px;
background:#DDD;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 1.4em;
}

#relpost_img_sum:hover {
background: #f7f7f7;
}

#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#relpost_img_sum li {
border: 1px solid #ddd;
background:#eee;
margin: 0 0 5px;
padding: 5px;
height: 65px;
list-style: none;
}

#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
}

#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #000;
}

#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 7;
var numchars = 100;
var morelink = "xem tiếp";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Tìm đến đoạn sau :
<div class='post-footer'/>

Và chèn đoạn mã bên duới ngay sau nó :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>  
    <CENTER><h4>BÀI VIẾT CÙNG CHỦ ĐỀ</h4>  </CENTER>
    <b:loop values='data:post.labels' var='label'>  
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>  
    </b:loop>  
    <ul id='relpost_img_sum'>  
    <script type='text/javascript'>relatpost();</script>  
    </ul>  
    </div>  
<div style='clear:both'/>
</b:if>

Tuỳ chỉnh CSS cho phù hợp với blog .
var relmaxposts = 7; => số bài hiển thị
var numchars = 100; => số ký tự hiển thị phần trích dẫn .
Từ khoá:
Blogger 3/18/2012

8 Bình Luận

  1. Sự trở lại của bác VLEX :55)

    Trả lờiXóa
  2. @Đing Kiu Truê Anh đã trở lại và ăn hại hơn xưa :(

    Trả lờiXóa
  3. @Nguyễn Hải ™Hình ảnh đại diện chỉ hiển thị khi bạn nhập từ máy tính và upload vào blog, bài copy sẽ không hiện

    Trả lờiXóa
  4. @Nguyễn Hải ™ Related Posts chỉ hiển thị ảnh từ Picasa nhé !

    Trả lờiXóa
  5. Đã hiểu rùi, giống như cái tiện ích Popular post bên Noct

    Trả lờiXóa
  6. Nặc danh5/04/2012

    Bỏ phần mô tả tốc độ load sẽ nhanh hơn đó.

    Trả lờiXóa
  7. Cách trình bày Code của bác mất thẫm mỹ quá :D

    Trả lờiXóa

Hãy để lại comment, góp ý để blog hoàn thiện hơn

Vui lòng gõ có dấu khi sử dụng tiếng việt

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước

Sử dụng ngôn ngữ có văn hóa khi bình luận

Thiết kế web với Blogger - Blogspot

Thiết kế Responsive, SEO Friendly Blogger Templates, Bố cục gọn gàng, dễ dàng chỉnh sửa.

Thủ thuật Blogspot - Blogger

Free template blogger, Chia sẻ thủ thuật Blogger - Seo Templates, Tutorial CSS3 - HTML5 Blogger

Dịch vụ Blogspot

Tối ưu hóa SEO, tùy biến Template blogspot thân thiện với các công cụ tìm kiếm phổ biến