Các dạng “Bài viết liên quan” đẹp cho Blogger

Vào Thứ Ba, tháng 7 26, 2011 Question | Subscribe | Member | Comments | Library

Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
Một phương pháp tương đối dễ dàng để tăng số lượng Page Views trên blog của bạn là thêm một danh sách các bài liên quan bên dưới mỗi bài viết. Điều này cung cấp cho độc giả nhiều thông tin liên quan hơn đến chủ đề mà họ đang theo dõi.

Đây là một tiện ích được sử dụng rất phổ biến, và nó cũng có rất nhiều “biến thể”. Hôm nay Namkna sẽ giới thiệu đến các bạn một số style được sử dụng phổ biến nhất trên các trang Web/Blog trong cũng như ngoài nước, nhằm cung cấp cho các bạn có nhiều lựa chọn hơn trong việc áp dụng vào Blog của mình.

A. Style 1 : Related Posts Widget for Blogger v1 ( BloggerPlugins )

Ảnh Demo cho thủ thuật các bạn có thể xem ở hình ảnh ngay bên dưới:
Related Posts Widget for Blogger v1 ( BloggerPlugins ) - Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
1. Vào Mẫu (Template) => bấm chọn vào mục Chỉnh sửa HTML (Edit HTML)
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>.
<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;     
padding-left:5px;     
}     
#related-posts .widget{     
padding-left:6px;     
margin-bottom:10px;     
}     
#related-posts .widget h2, #related-posts h2{     
font-size: 1.6em;     
font-weight: bold;     
color: black;     
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;     
margin-bottom: 0.75em;     
margin-top: 0em;     
padding-top: 0em;     
}     
#related-posts a{     
color:blue;     
}     
#related-posts a:hover{     
color:blue;     
}     
#related-posts ul{     
list-style-type:none;     
margin:0 0 0px 0;     
padding:0px;     
text-decoration:bold;     
font-size:15px;     
text-color:#000000     
}     
#related-posts ul li{     
background:transparent
 
url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png)
 no-repeat ;     
display:block;     
list-style-type:none;     
margin-bottom: 13px;     
padding-left: 30px;     
padding-top:0px;}     
</style>     
<script type='text/javascript'>     
var relatedpoststitle="Related Posts";     
</script>     
<script src='http://dl.dropbox.com/u/66256041/lien-quan/namkna-blogspot/related-posts-for-blogger.js' type='text/javascript'/>     
</b:if>
Lưu ý: bạn nên download File Js về TẠI ĐÂY và upload lên . Nếu chưa có host riêng thì các bạn có thể xem bài viết Tại đây

3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<div class='post-footer-line post-footer-line-1'>
hoặc
<p class='post-footer-line post-footer-line-1'>
và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<b:loop values='data:post.labels' var='label'>     
<b:if cond='data:label.isLast != &quot;true&quot;'>     
</b:if>     
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<script
 expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name
 + 
&quot;?alt=json-in-script&amp;callback=related_results_labels&quot;'
 type='text/javascript'/></b:if></b:loop><a 
href='http://namkna.blogspot.com/2011/07/tien-ich-bai-viet-lien-quan-cho-blogger.html'><img
 style="border: 0" alt="Related Posts Widget for Blogger" 
src="http://image.bloggerplugins.org/blogger-widgets.png" 
/></a>     
<script type='text/javascript'>     
var maxresults=5;        removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);     
</script>     
</div>     
</b:if>
với var maxresults=5; là số bài viết sẽ hiển thị trong widget ( mặc định là 5 )

B. Style 2 : Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins )
Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins ) - Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
Nhìn vào đây nhiều bạn bảo mình đã giới thiệu rồi, nhưng nếu các bạn để ý kỹ bài mình giới thiệu lần trước Code khác với lần này. nếu muốn các bạn có thể xem bài đó TẠI ĐÂY
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích

2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>
<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;     
padding-left:5px;     
}     
#related-posts h2{     
font-size: 1.6em;     
font-weight: bold;     
color: black;     
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;     
margin-bottom: 0.75em;     
margin-top: 0em;     
padding-top: 0em;     
}     
#related-posts a{     
color:black;     
}     
#related-posts a:hover{     
color:black;     
}     
#related-posts  a:hover {     
background-color:#d4eaf2;     
}     
</style>     
<script type='text/javascript'>     
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";     
var maxresults=5;     
var splittercolor="#d4eaf2";     
var relatedpoststitle="Related Posts";     
</script>     
<script
 
src='http://dl.dropbox.com/u/66256041/lien-quan/namkna-blogspot/related_posts_with_thumbnails_min.js'
 type='text/javascript'/>     
</b:if>
3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<div class='post-footer-line post-footer-line-1'>
hoặc
<p class='post-footer-line post-footer-line-1'>
và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<b:loop values='data:post.labels' var='label'>     
<b:if cond='data:label.isLast != &quot;true&quot;'>     
</b:if>     
<script
 expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name
 + 
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;'
 type='text/javascript'/></b:loop>     
<script type='text/javascript'>     
removeRelatedDuplicates_thumbs();     
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);     
</script>     
</div><div style='clear:both'/>     
</b:if>     
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>     
<a href='http://namkna.blogspot.com/2011/07/tien-ich-bai-viet-lien-quan-cho-blogger.html'><img
 style="border: 0" alt="Related Posts Widget For Blogger with 
Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" 
/></a><a href='http://namkna.blogspot.com/'
 ><img style="border: 0" alt="Kiến thức – Thủ thuật – Giải pháp 
công nghệ" src="http://image.bloggerplugins.org/blogger-templates.png" 
/></a>     
</b:if></b:if>
lưu ý: Các bạn nên Download file JS về máy TẠI ĐÂY sau đó UPload lên Host riêng
4. Thay thế code màu đỏ theo ý bạn

5. Save Template.

C. Style 3 : Related Posts by Categories ( Jackbook )
Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins ) - Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích

2. Tìm trong Template của bạn đoạn code sau :
<data:post.body/>
hoặc
<p><data:post.body/></p>
và ngay sau nó chèn đoạn code bên dưới :
<b:if cond='data:blog.pageType == "item"'>    
    <div class='similiar'>     
        <div class='widget-content'>     
        <h3>Related Posts by Categories</h3>     
        <div id='data2007'/><br/><br/>     
            <script type='text/javascript'>     
            var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;     
            var maxNumberOfPostsPerLabel = 4;     
            var maxNumberOfLabels = 10;     
            maxNumberOfPostsPerLabel = 10;     
            maxNumberOfLabels = 3;     
            function listEntries10(json) {     
              var ul = document.createElement(&#39;ul&#39;);     
              var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?     
                             json.feed.entry.length : maxNumberOfPostsPerLabel;     
              for (var i = 0; i &lt; maxPosts; i++) {     
                var entry = json.feed.entry[i];     
                var alturl;     
                for (var k = 0; k &lt; entry.link.length; k++) {     
                  if (entry.link[k].rel == &#39;alternate&#39;) {     
                    alturl = entry.link[k].href;     
                    break;     
                  }     
                }     
                var li = document.createElement(&#39;li&#39;);     
                var a = document.createElement(&#39;a&#39;);     
                a.href = alturl;     
                if(a.href!=location.href) {     
                    var txt = document.createTextNode(entry.title.$t);    
                    a.appendChild(txt);     
                    li.appendChild(a);     
                    ul.appendChild(li);    
                }     
              }     
              for (var l = 0; l &lt; json.feed.link.length; l++) {     
                if (json.feed.link[l].rel == &#39;alternate&#39;) {     
                  var raw = json.feed.link[l].href;     
                  var label = raw.substr(homeUrl3.length+13);     
                  var k;     
                  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);     
                  var txt = document.createTextNode(label);     
                  var h = document.createElement(&#39;b&#39;);     
                  h.appendChild(txt);     
                  var div1 = document.createElement(&#39;div&#39;);     
                   div1.appendChild(h);     
                  div1.appendChild(ul);     
                  document.getElementById(&#39;data2007&#39;).appendChild(div1);     
                }     
              }     
            }     
            function search10(query, label) {     
            var script = document.createElement(&#39;script&#39;);     
            script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;     
             + label +     
            &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);     
            script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);     
            document.documentElement.firstChild.appendChild(script);     
            }     
            var labelArray = new Array();     
            var numLabel = 0;     
            <b:loop values='data:posts' var='post'>     
              <b:loop values='data:post.labels' var='label'>     
                textLabel = &quot;<data:label.name/>&quot;;     
                var test = 0;     
                for (var i = 0; i &lt; labelArray.length; i++)     
                if (labelArray[i] == textLabel) test = 1;     
                if (test == 0) {     
                   labelArray.push(textLabel);     
                   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?     
                          labelArray.length : maxNumberOfLabels;     
                   if (numLabel &lt; maxLabels) {     
                      search10(homeUrl3, textLabel);     
                      numLabel++;     
                   }     
                }     
              </b:loop>     
            </b:loop>     
            </script>     
        </div>     
    </div>     
</b:if>
3. Thay đổi code màu đỏ theo ý bạn, trong đó :

  • maxNumberOfPostsPerLabel : số bài viết  tối đa được hiển thị theo mỗi Label
  • maxNumberOfLabels : số Label được hiển thị

D. Style 4 : Related Posts v2.0 by Anhvo
Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins ) - Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Tìm trong Template đoạn code tương tự như sau :
<div class='post-footer-line post-footer-line-3'/>
hoặc
<div class='post-footer-line post-footer-line-2'/>
hoặc
<div class='post-footer-line post-footer-line-1'/>
và chèn bên dưới nó đoạn code này :
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<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 0 -20px;     
font-size:12px;     
color:#999999;     
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 ul{     
list-style-image:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYg4JsTdI/AAAAAAAAEu4/qKWg2IDbuxo/arrow.gif);     
}     
#related-posts-block #related-newest-href #related-newest-title {     
font-size:16px;     
margin:10px 5px     
}     
#related-posts-block #related-newest-href a{     
font-size:12px;     
font-family:Arial, Helvetica, sans-serif;     
color:#000000;     
}     
#related-posts-block #related-older-href {     
margin:10px 5px;     
}     
#related-posts-block #related-older-href ul{     
list-style-image:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYg4JsTdI/AAAAAAAAEu4/qKWg2IDbuxo/arrow.gif);     
}     
#related-posts-block #related-older-href #related-older-title {     
font-size:16px;     
margin:10px 5px     
}     
#related-posts-block #related-older-href a{     
font-size:12px;     
font-family:Arial, Helvetica, sans-serif;     
color:#000000;     
}     
</style>     
<div id='related-posts-block'>     
<div
 id='related-posts-loading-text'>Loading related posts... <img 
align='absmiddle' 
src='https://lh5.googleusercontent.com/_PAuO_he0N0k/TYQYgqqO3gI/AAAAAAAAEu0/mhdfPX_a784/25.gif'/></div>     
<div id='related-newest-href'><div id='related-newest-title'/></div>     
<div id='related-older-href'><div id='related-older-title'/></div>     
</div>     
</b:if>
3. Chèn đoạn code bên dưới lên trước thẻ đóng </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<script type='text/javascript'>     
//<![CDATA[     
var showdate = false;     
var max_post = 12;     
//]]>     
</script>     
<script type='text/javascript'>     
//<![CDATA[     
// Related posts script for Blogger     
// version 2.0     
// (C) Anhvo     
// Homepage: vietwebguide.com     
// Please dont remove this copyright when using or redistributing this code     
function format(ptime){     
    return ptime.substr(0,19);     
}     
function formatdate(d){     
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];     
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];     
    var m = parseInt(d.substring(5,7),10);     
    for(var j=0; j<month.length;j++){     
        if(m==month[j]){     
            m = month2[j]; break;     
        }     
    }     
    return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);     
}     
function getRelatedNewestLinks(json){     
    var entry = json.feed.entry;     
    if(entry){     
        for(var k=0;k<entry.length;k++){     
            var li = document.createElement("li");     
            if(showdate){     
               
 li.innerHTML = "<a 
href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + '
 - <i>' + formatdate(entry[k].published.$t) +'</i>';     
            }     
            else {     
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";     
            }     
            if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){     
                document.getElementById("related-newest-href-ul1").appendChild(li);     
               
 document.getElementById("related-newest-title").innerHTML = "<img 
src='https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYgvMFFLI/AAAAAAAAEuw/I2qzJMD2tHA/1.jpg' width='347' height='21'>"     
            }     
        }     
    } else {     
        document.getElementById("related-older-title").innerHTML = "Không có bài nào mới hơn cùng chủ đề";     
    }     
}     
function getRelatedOlderLinks(json){     
    var entry = json.feed.entry;     
    if(entry){     
        for(var k=0;k<entry.length;k++){     
            var li = document.createElement("li");     
            if(showdate){     
               
 li.innerHTML = "<a 
href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + '
 - <i>' + formatdate(entry[k].published.$t) + '</i>';     
            }     
            else {     
                li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";     
            }     
            if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){     
                document.getElementById("related-older-href-ul2").appendChild(li);     
               
 document.getElementById("related-older-title").innerHTML = "<img 
src='https://lh5.googleusercontent.com/_PAuO_he0N0k/TYQYgkneo2I/AAAAAAAAEus/ji_rqUm2S7E/2-1.jpg' width='347' height='21'>"     
            }     
        }     
    } else {     
        document.getElementById("related-older-title").innerHTML = "Không có bài nào cũ hơn cùng chủ đề";     
    }     
        document.getElementById("related-posts-loading-text").style.display = "none";     
}     
function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){     
    var script = document.createElement("script");     
   
 script.src = 
"/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;
     
    script.type = "text/javascript";     
    document.getElementsByTagName("head")[0].appendChild(script);     
}     
function checkRelaxLinks(cid,clink){     
    var check = false;     
    var u = document.getElementById(cid);     
    var a = u.getElementsByTagName("a");     
    for(var i=0;i<a.length;i++){     
        if(a[i].href==clink){     
            check = true;     
            break;     
        }     
    }     
    var url = location.href.split(".html")[0]+".html";     
    if(clink==url) check = true;     
    return check;     
}     
function createRP(){     
    var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');     
    var max_ = Math.round(max_post/postLabel.length);     
    var ul1 = document.createElement('ul');     
    ul1.id = 'related-newest-href-ul1';     
    document.getElementById('related-newest-href').appendChild(ul1);     
    for(var i=0; i<postLabel.length;i++){     
         createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);     
    }     
    var ul2 = document.createElement('ul');     
    ul2.id = 'related-older-href-ul2';     
    document.getElementById('related-older-href').appendChild(ul2);     
    for(var j=0; j<postLabel.length;j++){     
         createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);     
    }     
}     
createRP();     
//]]>     
</script>     
</b:if>
Trong đoạn code trên :
  • var showdate = false; : nếu muốn hiện thị ngày đăng thì thay false thành true
  • var max_post = 12; : số bài viết tối đa hiển thị là 12 bài.

* Update : giới thiệu đến các bạn một style khác do Fandung bên phandung.blogspot.com phát triển với hiệu ứng hiển thị mô tả khi rê chuột.
Lưu ý: Các bạn nên download các file ảnh về TẠI ĐÂY và upload lên host riêng của bạn

E. Style 5 : Related Posts with Description Effect
Related Posts with Description Effect - Tiện ích “Bài viết liên quan” cho Blogger by: http://namkna.blogspot.com/
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<style type='text/css'>    
.mota-desc{     
position: relative;     
z-index: 0;     
text-decoration:none;     
}     
.mota-desc:hover{     
background-color: transparent;     
z-index: 50;     
}     
.mota-desc span{     
position: absolute;     
background-color: #ffffff;     
padding: 5px;     
left: -1000px;     
border: 1px solid #666;     
visibility: hidden;     
color: black;     
text-decoration: none;     
}     
.mota-desc span img{     
border-width: 0;     
padding: 2px;     
}     
.mota-desc:hover span{     
padding:5px;     
visibility: visible;     
top: 20px;     
left:70px;     
width:250px;     
background:#ddd;     
text-align: justify;     
}     
#related-posts {     
padding-top:40px;     
}     
#related-posts a {     
text-decoration : none;     
}     
#related-posts a:hover {     
text-decoration : none;     
}     
</style>     
<script language='JavaScript'>     
imgr = new Array();     
imgr[0] = &quot;http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif&quot;;    
showRandomImg = true;     
imgwidth = 60;     
imgheight = 60;     
fntsize = 12;     
acolor = &quot;#555&quot;;     
aBold = true;     
motacolor = &quot;#f00&quot;;     
text = &quot;Nhận xét&quot;;     
showPostDate = true;     
summaryPost = 150;     
summaryFontsize = 12;     
summaryColor = &quot;#000&quot;;     
icon2 = &quot; &#187; &quot;;     
numposts = 5;     
home_page = &quot;http://namkna.blogspot.com/&quot;;    
</script>     
<script type='text/javascript'>     
//<![CDATA[     
function removeHtmlTag(strx,chop){     
    var s = strx.split("<");     
    for(var i=0;i<s.length;i++){     
        if(s[i].indexOf(">")!=-1){     
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);     
        }     
    }     
    s =  s.join("");     
    s = s.substring(0,chop-1);     
    return s;     
}     
function showrelatedposts(json) {     
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;     
    img  = new Array();     
      for (var i = 0; i < numposts; i++) {     
        var entry = json.feed.entry[i];     
        var posttitle = entry.title.$t;     
        var pcm;     
        var posturl;     
        if (i == json.feed.entry.length) break;     
        for (var k = 0; k < entry.link.length; k++) {     
              if (entry.link[k].rel == 'alternate') {     
                posturl = entry.link[k].href;     
                break;     
              }     
        }     
        for (var k = 0; k < entry.link.length; k++) {     
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {     
                pcm = entry.link[k].title.split(" ")[0];     
                break;     
              }     
        }     
        if ("content" in entry) {     
              var postcontent = entry.content.$t;}     
        else     
        if ("summary" in entry) {     
              var postcontent = entry.summary.$t;}     
        else var postcontent = "";     
        postdate = entry.published.$t;     
    if(j>imgr.length-1) j=0;     
    img[i] = imgr[j];     
   
 s = postcontent    ; a = s.indexOf("<img"); b = 
s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
     
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;     
    cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';     
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];     
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];     
    var day = postdate.split("-")[2].substring(0,2);     
    var m = postdate.split("-")[1];     
    var y = postdate.split("-")[0];     
    for(var u2=0;u2<month.length;u2++){     
        if(parseInt(m)==month[u2]) {     
            m = month2[u2] ; break;     
        }     
    }     
   
 var daystr = (showPostDate) ? '<i><font color="'+acolor+'">
 - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";     
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;     
   
 var trtd = '<img 
src="http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"/>
 <a class="mota-desc" href="'+posturl+'" style="color:'+acolor+'; 
font-size:'+fntsize+'px;">'+posttitle+'<span><div 
style="color:'+motacolor+';">'+posttitle+' </div>'+cmtext+ ' ' +
 daystr + ' <br/><img src="'+img[i]+'" style="float:left; 
border: #ccc 1px solid; padding:2px; margin-right:4px;" 
width="'+imgwidth+'" 
height="'+imgheight+'"/>'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</span></a>
 <br/>';     
    document.write(trtd);     
    j++;     
}     
}     
//]]>     
</script>
Trong đoạn code trên :

  • imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả
  • fntsize = 12; : size chữ của tiêu đề bài viết
  • acolor = "#555"; : màu của tiêu đề bài viết
  • motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
  • summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
  • summaryFontsize = 12; : size chữ của phần mô tả
  • summaryColor = "#000"; : màu chữ của phần mô tả
  • numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 3.
  • home_page = "http://namkna.blogspot.com/"; : thay bằng địa chỉ URL của blog bạn

3. Tìm trong template dòng code sau :
<data:post.body/>
và ngay sau nó chèn đoạn code bên dưới :
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>     
<b:loop values='data:post.labels' var='label'><b>Nhãn : </b><font color='#FF0000'><data:label.name/></font><br/>     
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;'
 type='text/javascript'/>     
</b:if>     
</b:loop>     
</div>     
</b:if>
Chúc các bạn thành công !

Có 60 nhận xét & bạn hãy gửi ý kiến của mình!

  1. mình thử style 4 vào nhưng blog mình không có gì thay đổi bạn ơi. help me

    Trả lờiXóa
  2. @nội thất dth: Style 4 chỉ chậy tốt đối với các nhãn , chủ đề bằng tiếng anh thôi bạn ạ. Một số Nhãn, Laber bằng tiếng việt nó không đọc và hiểu được đâu. Nếu bạn sử dụng nhãn tiếng việt thì nên dùng Style 1 hoặc Style3

    Trả lờiXóa
  3. Bài này hay quá. Mình đã áp dụng được một cách rùi. :)

    Trả lờiXóa
  4. Sao mình không áp dụng được nam ơi, không báo lỗi gì cả chỉ là không hiển thị bài viết liên quan

    Trả lờiXóa
  5. @baby Thế có nghĩa là đoạn code ở bước 3 bạn đặt chưa đúng vị trí rồi :3) :3) :3)

    Trả lờiXóa
  6. Mình đã làm đi làm lại mà vẫn hông được Nam ơi.
    Mình gữi template cho Nam xem thử mình nha.
    À mà mình cũng đã thử áp dụng bài viết liên quan theo dạng http://www.linkwithin.com/learn mà vẫn không hiển thị. Lạ thật sao lần nào ds template cũng gặp mấy cái lỗi ngỡ ngẩn thế không biết.
    Đây là link download template nha. Nam xem hộ mình cái.
    link download: http://www.mediafire.com/?od9nhb30e477nla
    ---------------------
    Nếu được thì Nam thêm style B. Style 2 : Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins ) nha.
    Khi nào xong thì gữi lại template qua email: ciabmt@yahoo.com

    Trả lờiXóa
  7. Sao mình áp dụng style 2 cũng không thành công Nam ơi?
    Làm y trang chứ không sai? vì nó cũng không báo lỗi gì hết.
    Khổ thật, Nam giúp mình với.

    Trả lờiXóa
  8. Ah mình biết rồi (nhờ đọc bên BloggerPlugins) lý do của mình nó không hiển thị là hình ảnh của mình không upload trực tiếp từ blogger mà mình upload lên nhưng chỉ lấy đường dẫn nên nó không hiển thị. Vì đặc thù của bài viết trên site này là hình ảnh được lấy bằng link hình, dù là link trên bloogger cũng không hiển thị'
    Không biết có phải vậy không Nam? Vậy có cách nào sửa được không vậy?
    nam xem giúp mình với nhé. Cám ơn nhiều.

    Trả lờiXóa
  9. Mình biết rồi (Nhờ đọc qua BloggerPlugins), những ảnh trong site của mình chỉ lấy đường link chứ không up trực tiếp nên nó không hiển thị. Vậy có cách nào khắc phục không Nam? nam giúp mình với.

    Trả lờiXóa
  10. Nhưng mà link đó cũng lấy từ blog của chính mình mới ác chứ, khổ thật.

    Trả lờiXóa
  11. @KN 40A
    Có down được đâu bạn.
    Chỉ thay js đó thôi hả, file này có thay đổi gì chưa?

    Trả lờiXóa
  12. @onlinestore1 Bạn có thể download file js về Tại đây hoặc Tại đây và thay vào nha,

    Trả lờiXóa
  13. Style 1 đã bị die file js các bạn tải về na.
    File đó đây: http://namkna-demo.blogspot.com/2013/01/relatedpostsminjs.html

    Bạn mở notepad và copy vào http://namkna.blogspot.com/2012/08/cach-tai-file-javarscript-js-css.html

    Trả lờiXóa
    Trả lời
    1. Hoặc thay:
      <script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
      Thành:

      <script type='text/javascript'>
      //<![CDATA[
      var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
      //]]>
      </script>

      Xóa
  14. Chào bạn
    Mình đã thử Type 2 vào blog của mình nhưng khi add xong không có gì thay đổi cả. Bạn giúp mình với. Thank you

    Trả lờiXóa
    Trả lời
    1. Mình vừa vào blog nhatkydautu của bạn và thấy rằng bạn đang áp dụng style 2 của mình nó hiển thị tốt mà, Bạn cem lại cuối mỗi bài viết của bạn nha,

      Xóa
  15. "Tick chọn Mở rộng mẫu tiện ích" là sao Bác nhỉ? :)

    Trả lờiXóa
    Trả lời
    1. Ak với blogger hiện nay thì bạn dùng không cần tích dấu đó vì nó đã bị bỏ đi hãy: Blogger thay đổi giao diện Edit HTML

      Xóa
  16. Áp dụng style 3 . Nhưng trước các nhãn thêm cho chữ "bel" . Làm sao để xóa được bạn ? ví dụ : XEM 1 Bài Viết

    Trả lờiXóa
  17. Bạn tìm đoạn code giữa 2 thẻ <div id="namkna-related-1"> và </div> Sau đó xóa đoạn có dạng bel/ nó nằm ngay sau thẻ h4 đó.

    Trả lờiXóa
    Trả lời
    1. Cả tiếng đồng hồ mà chưa nhìn ra đoạn code . hì. giúp mình với . Chắc phải sửa bạn ah.

      <script type="text/javascript">
      homeUrl3 = "68nhadat.com";
      maxNumberOfPostsPerLabel = 5;
      maxNumberOfLabels = 5;
      function listEntries10(json) {
      var ul = document.createElement('ul');
      var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
      json.feed.entry.length : maxNumberOfPostsPerLabel;
      for (var i = 0; i < maxPosts; i++) {
      var entry = json.feed.entry[i];
      var alturl;
      for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
      alturl = entry.link[k].href;
      break;
      }
      }
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.href = alturl;
      var txt = document.createTextNode(entry.title.$t);
      a.appendChild(txt);
      li.appendChild(a);
      ul.appendChild(li);
      }
      for (var l = 0; l < json.feed.link.length; l++) {
      if (json.feed.link[l].rel == 'alternate') {
      var raw = json.feed.link[l].href;
      var label = raw.substr(homeUrl3.length+21);
      label = decodeURIComponent(label);
      var txt = document.createTextNode(label);
      var h = document.createElement('h4');
      h.appendChild(txt);
      var div1 = document.createElement('div');
      div1.appendChild(h);
      div1.appendChild(ul);
      document.getElementById('namkna-related-1').appendChild(div1);
      }
      }
      }
      function search10(query, label) {
      var script = document.createElement('script');
      script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');
      script.setAttribute('type', 'text/javascript');
      document.documentElement.firstChild.appendChild(script);
      }
      var labelArray = new Array();
      var numLabel = 0;


      textLabel = "";
      var test = 0;
      for (var i = 0; i < labelArray.length; i++)
      if (labelArray[i] == textLabel) test = 1;
      if (test == 0) {
      labelArray.push(textLabel);
      var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
      labelArray.length : maxNumberOfLabels;
      if (numLabel < maxLabels) {
      search10(homeUrl3, textLabel);
      numLabel++;
      }
      }


      </script>

      Xóa
    2. Bạn gửi template đó vào nick tin nhắn trong face: Namkna để mình kiểm tra lại toàn bộ code nha bạn,

      Xóa
    3. Mình gửi rồi đó, làm ơn check giùm mình nhé . cám ơn bạn nhiều !

      Xóa
    4. Mình chưa nhận được đâu bạn ak:
      https://www.facebook.com/namkna?ref=tn_tnmn

      Xóa
  18. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  19. cho mình hỏi style số 4 có cần chỉnh sữa gì nữa hok, mình làm đúng bước nhưng ko hiện ra, có thể kiếm tra hoặc hướng dẫn giùm mình

    Trả lờiXóa
    Trả lời
    1. Không bạn ak bạn chỉ cần chú ý các đoạn code bên dưới mỗi đoạn đều có 2 lần lặp lại bạn phải chèn đúng vị trí nó mới hiển thị, Như hiện tại là bạn đã chèn nhầm vị trí rồi bạn ak.

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

      hoặc

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

      hoặc

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

      Xóa
    2. Ngoài ra bạn cần phải kích hoạt chức năng của feed như bài này nha: Sửa lỗi "The feed does not have subscriptions by email enabled"

      Xóa
  20. bạn ơi minh là cái style 5 nhưng chả thấy gì cả bạn ah. giúp mình với.

    Trả lờiXóa
    Trả lời
    1. 1- Bạn lưu ý giúp mình là nó chỉ hoạt động với nhãn tiếng anh thôi na bạn.
      2- Một blog thường có từ 2 đến 5 đoạn <data:post.body/> Bạn hãy dán nó ở đoạn thích hợp nha.

      Thêm nưa hãy đăng ký và cài đặt Feedburner Atom cho Blogspot của bạn trước khi áp dụng thủ thuật này na.

      Xóa
  21. cảm ơn bạn, mình làm lại cái style 3 rồi và dán đúng thẻ <data:post.body/> rồi nhưng nó chỉ hiển thị code màu đỏ mà mình đã thay đổi thôi không thấy hiển thị các bài viết mà chỉ hiển thị 1 khung trắng thôi bạn ah, giúp mình với

    Trả lờiXóa
    Trả lời
    1. Bạn có thể gửi mẫu vào mail tavannam01@gmail.com mình sẽ chỉnh sửa và thêm nó giúp bạn. Nhớ ghi rõ yêu cầu của bạn trên bài viết này nha.

      Xóa
    2. mình gữi rồi đó bạn, thanks bạn nhiều

      Xóa
    3. oke lát check mail mình sẽ thêm ngay cho bạn.

      Xóa
    4. sao vẫn chưa dk vậy bạn, giúp mình với...

      Xóa
    5. bạn ơi lại phải nhờ bạn nữa rồi mình vẫn chưa làm được bài viết liên quan, hay minh cung cấp pass cho bạn, bạn sửa giùm mình được không?

      Xóa
    6. Oke bạn gửi vào mail cho mình và ghi rõ yêu cầu nha bạn.

      Xóa
    7. Sao anh không add site em vào Liên Kết Bạn Bè thế ? Em gửi mail cho anh lâu rồi ấy! :(

      Xóa
    8. Em hãy add trang của anh và sau đó cung cấp link blog + tiêu đề + mô tả của blog em ở đây để anh add nha.

      Xóa
  22. Bạn ơi giúp mình với mình có đoạn mã bài viết liên quan nhưng nó hiển thị theo bài viết mới nhất mình tạo blog xem phim và thử đoạn mã của bạn và nhiều cách nhưng không được đoạn mã đó nè:

    document.write("<script src=\"/feeds/posts/default?max-results="+20+"&orderby=published&alt=json-in-script&callback=xphim03\"><\/script>");

    Mình đã thử nhiều cách nhưng không được mình muốn hỏi có cách nào để cho nó hiện nhãn liên quan chứ không phải bài viết mới nhất mình thử cách này thì nó vẫn được

    document.write("<script src=\"/feeds/posts/default/-/Phim Lẻ?max-results="+10+"&orderby=published&alt=json-in-script&callback=xphim02\"><\/script>");

    nhưng nếu vậy thì nó chỉ hiện nhãn phim lẻ thui bạn có cách nào để nó tự động đổi bài viết liên quan khi nó ở nhãn khác không giống như kiểu dưới này nè còn nếu thay đổi theo cách khác thì blog phim nó sẽ không hiện như kiểu blog phim nữa


    document.write("<script src=\"/feeds/posts/default/-/Mặc định bài viết liên quan?max-results="+10+"&orderby=published&alt=json-in-script&callback=xphim02\"><\/script>");


    bạn giúp mình nhé.tks

    Trả lờiXóa
  23. Mình thử dùng cái "Style 2 : Related Posts Widget for Blogger with Thumbnails" nhưng chất lượng ảnh Thumbnails tệ quá, tăng lớn hơn thì càng tệ!
    Sau 1 hồi lục lọi trên blog của bạn có thủ thuật ở trang này:
    http://namkna.blogspot.com/2013/10/Cach-tang-chat-luong-anh-thu-nho-thumbnail-cho-blogger.html
    Mình làm rồi nhưng chẳng có tác dùng gì cả!

    Vậy có cách nào khác tăng chất lượng ảnh Thumbnails trong "Style 2 : Related Posts Widget for Blogger with Thumbnails" không bác Nam Ta ơi?

    Trả lờiXóa
    Trả lời
    1. bạn phải thay:

      bodyText = document.getElementById("BlogList1");

      thành:

      bodyText = document.getElementById("related-posts");

      Xóa
    2. Đã hoạt động tốt! Cảm ơn bác!

      Xóa
  24. Thích cái mẫu 5 mà thêm vào nó không chạy ,ức quá -_-

    Trả lờiXóa
    Trả lời
    1. Bạn hãy đăng ký feed cho trang của bạn trước nha: XEM NGAY

      Xóa
  25. Anh Nam Ta giup em thêm bài viết liên quan style 4 vào blog cho em với? Blog em không có các code như

    class='post-footer-line post-footer-line-3'/>
    hoặc
    class='post-footer-line post-footer-line-2'/>
    hoặc
    class='post-footer-line post-footer-line-1'/>

    Em không biết cách nào để thêm bài viết liên quan mới cũ vào được. Cám ơn anh

    Trả lờiXóa
    Trả lời
    1. Em có quá nhiều trang , hãy để lại link trang e cần áp dụng thủ thuật này lại đây anh sẽ chỉ vị trí cần thiết cho.

      Xóa
    2. Xin lỗi a, e cứ nghĩ để lại trang rồi :3.
      http://luyendoc.blogspot.com/
      Mong anh giúp đỡ!

      Xóa
    3. Trang đó em có thể đặt trước đoạn này nha.

      <div class='chuyen-muc'>

      Xóa
    4. Sao không được anh nhỉ? K thấy nó hoạt động
      http://luyendoc.blogspot.com/2014/07/childrens-questions.html

      Xóa
    5. Em thử lại khi đặt trước doạn: <div id="fb-root"> hoặc sau đoạn <data:post.body/>, nếu vẫn không được gửi mail vào tavannam01@gmail.com anh chỉnh cho nha.

      Xóa
  26. em chào anh ạ! Ad giúp em với nhá!
    Em tìm đoạn này trên template <div class='post-footer-line post-footer-line-1'> không có nên em chèn bừa sau đoạn ở trong tempale , cũng hiện nên nhưng chỉ hiện lên khi e xem bằng điện thoại thôi anh ạ! Còn xem ở máy tính lại không thấy nó hiện nữa^^^
    Anh có cách nào giúp em không, em thay đủ mọi chỗ mà ko có hiện luôn...

    Trả lờiXóa
    Trả lời
    1. Với trang blogbanvatoi thì em chèn sau đoạn"

      <data:post.body/>

      Xóa
    2. vẫn không thấy được anh ạ! Em thử sau tất cả các mã đó nhưng nó chỉ hiển thị khi em xem bằng điện thoại, mà tempale của em, em tắt điện thoại rồi mà ^^

      Xóa
    3. Có rất nhiều đoạn mà anh nói em chèn đúng vị trí nó sẽ hiên thị ngay. Nếu vẫn không được thì gửi mẫu vào tavannam01@gmail.com anh thêm trực tiếp luôn cho nha. (nhớ ghi rõ yêu cầu và mẫu cần thêm nha e)/

      Xóa
    4. dạ em cám ơn anh nhiều, em chèn được rồi ạ! :)

      Xóa