.

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

26/07/2011 | 56 nhận xét
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ảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

56 nhận xét

nội thất dth
4/8/11 16:01 xóa commnet

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

Reply
Fairstar
4/8/11 16:32 xóa commnet

@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

Reply
svc.club
3/11/11 13:15 xóa commnet

Bài này hay quá. Mình đã áp dụng được một cách rùi. :)

Reply
Fairstar
3/11/11 23:20 xóa commnet

@ svc.club: chúc mừng bạn :P!

Reply
baby
31/5/12 20:37 xóa commnet

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

Reply
Fairstar
1/6/12 09:51 xóa commnet

@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)

Reply
baby
1/6/12 11:31 xóa commnet

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

Reply
onlinestore1
16/7/12 14:15 xóa commnet

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.

Reply
onlinestore1
16/7/12 15:30 xóa commnet

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.

Reply
onlinestore1
16/7/12 15:41 xóa commnet

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.

Reply
onlinestore1
16/7/12 15:44 xóa commnet

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

Reply
onlinestore1
17/7/12 08:56 xóa commnet

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

Reply
Fairstar
19/7/12 07:45 xóa commnet

@onlinestore1 Bạn có thể download file js về Tại đây hoặc Tại đây và thay vào nha,

Reply
Anh Nghia
9/12/12 02:44 xóa commnet

gfffffffff

Reply
namkna
29/1/13 20:35 xóa commnet

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

Reply
namkna
29/1/13 20:39 xóa commnet

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>

Reply
Gentle Man
27/8/13 16:55 xóa commnet

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

Reply
Nam Ta
27/8/13 20:19 xóa commnet

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,

Reply
Johny LAi
11/9/13 00:01 xóa commnet

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

Reply
Nam Ta
11/9/13 07:01 xóa commnet

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

Reply
BĐS Quang Diệu
7/10/13 08:45 xóa commnet

Á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

Reply
Nam Ta
8/10/13 13:51 xóa commnet

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 đó.

Reply
Cùng Mua
10/10/13 10:37 xóa commnet
Nhận xét này đã bị tác giả xóa. Reply
tan pham
10/10/13 10:45 xóa commnet

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

Reply
Nam Ta
10/10/13 22:53 xóa commnet

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'/>

Reply
BĐS Quang Diệu
11/10/13 09:30 xóa commnet

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>

Reply
Nam Ta
12/10/13 09:30 xóa commnet

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,

Reply
BĐS Quang Diệu
13/10/13 00:03 xóa commnet

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

Reply
Nam Ta
13/10/13 15:57 xóa commnet

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

Reply
Nam Ta
22/10/13 22:13 xóa commnet

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"

Reply
Hồ Sĩ Hương
21/1/14 16:39 xóa commnet

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.

Reply
Nam Ta
21/1/14 16:50 xóa commnet

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.

Reply
Hồ Sĩ Hương
22/1/14 09:46 xóa commnet

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

Reply
Nam Ta
22/1/14 11:25 xóa commnet

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.

Reply
Hồ Sĩ Hương
22/1/14 13:47 xóa commnet
Nhận xét này đã bị tác giả xóa. Reply
Hồ Sĩ Hương
22/1/14 13:50 xóa commnet

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

Reply
Nam Ta
22/1/14 16:59 xóa commnet

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

Reply
Hồ Sĩ Hương
23/1/14 11:20 xóa commnet

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

Reply
Hồ Sĩ Hương
7/2/14 09:23 xóa commnet

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?

Reply
Nam Ta
7/2/14 16:57 xóa commnet

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

Reply
Thủ Thuật Hay
7/2/14 20:42 xóa commnet

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! :(

Reply
Nam Ta
10/2/14 14:16 xóa commnet

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.

Reply
Kelvin Nghĩa
15/3/14 21:04 xóa commnet

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

Reply
Trung Tue
25/4/14 21:40 xóa commnet

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?

Reply
Nam Ta
26/4/14 12:02 xóa commnet

bạn phải thay:

bodyText = document.getElementById("BlogList1");

thành:

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

Reply
Trung Tue
26/4/14 13:24 xóa commnet

Đã hoạt động tốt! Cảm ơn bác!

Reply
Huy Hoàng
13/6/14 00:05 xóa commnet

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

Reply
Nam Ta
14/6/14 17:16 xóa commnet

Bạn hãy đăng ký feed cho trang của bạn trước nha: XEM NGAY

Reply
Admin
2/8/14 21:05 xóa commnet

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

Reply
Nam Ta
3/8/14 10:01 xóa commnet

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.

Reply
Admin
3/8/14 21:58 xóa commnet

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

Reply
Nam Ta
3/8/14 22:46 xóa commnet

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

<div class='chuyen-muc'>

Reply
Admin
4/8/14 00:01 xóa commnet

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

Reply
Nam Ta
4/8/14 10:08 xóa commnet

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.

Reply
Admin BQT
31/8/14 23:53 xóa commnet

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...

Reply

Đăng nhận xét

Cám ơn đã đọc bài viết!
» Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục
» Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư
» Hãy viết bằng tiếng Việt có dấu để mọi người có thể đọc!
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Chèn link bằng thẻ: <a href="Link" rel="nofollow">Tên</a>
» Tạo chữ <b>đậm</b> <i>Ngiêng</i>
Cảm ơn bạn đã để lại nhận xét!

Mã Hóa Code