Bài Viết Liên Quan Với Favicon Cho Blogspot

Lợi ích đem lại từ tiện ích bài viết liên quan thì ai cũng đã biết. Bài viết liên quan giúp cho người xem dễ dàng xem được những bài cùng chuyên mục khi đọc hết 1 bài viết, điều đó giữ chân khách ở lại lâu hơn khi xem trang của các bạn.

Tăng số lượng page views và giảm thời gian thoát trên blog bạn.

Bài viết liên quan hay Related posts thì các blog hướng dẫn cũng đã nhiều với các kiểu dáng cũng khác nhau rất đa dạng và phong phú.

Ở bài này xin giới thiệu một dạng bài viết liên quan cũng na ná các bài đã hướng dẫn chỉ hơi khác tẹo là icon đi kèm tiêu đề bài liên quan chính là favicon của blogspot.

Demo xem ảnh:

làm thế nào để áp dụng vào blogspot

Bước 1:
Các bạn đăng nhập blog vào chỉnh sửa mẫu tìm tới thẻ </head> và dán trước nó đoạn code dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
        #related-posts{width:100%;font-size:12px tahoma;margin:0;color:#f90}
        #related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0;}
        .related-h2{font-size:20px;
          font-weight:bold;color:#005595}
        #related-posts a{text-decoration:none;}
        #related-posts a:hover{text-decoration:none;}
        #related-posts ul{border:medium none;margin:16px;padding:0;}
        #related-posts ul li{display:block;background:url(/favicon.ico) no-repeat;
          padding:0 0 1px 21px;margin-bottom:0;line-height:1.6em;
          border-bottom:1px dotted #cccccc;}
        #related-posts ul li a{background:#fff;display:block;}
        #related-posts ul li a:hover{background:#E9F5FB;}
        @media screen and (max-width:800px){#related-posts{max-width:100%;width:100%;float:none}}
      </style>
      <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() {
          var r = Math.floor((relatedTitles.length - 1) * Math.random());
          var i = 0;
          document.write('<ul>');
          while (i < relatedTitles.length && i < 20) {
            document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
            if (r < relatedTitles.length - 1) {
              r++;
            } else {
              r = 0;
            }
            i++;
          }
          document.write('</ul>');
          document.write('</font>');
        }
        //]]>
      </script>
    </b:if>

Bước 2:
Tiếp theo tìm tới thẻ <div class='post-footer'> và dán vào sau nó đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <div id='related-posts'>
                        <span class='related-h2'>
                          Related Posts : </span>
                         <b:loop values='data:post.labels' var='label'>
                          <data:label.name/>
                         <b:if cond='data:label.isLast != &quot;true&quot;'>
                           ,
                         <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
                          </b:if>
                          </b:loop>
                          <script type='text/javascript'>
                            removeRelatedDuplicates(); printRelatedLabels();
                          </script>
                        </div>
                      </b:if>

Lưu mẫu
Ở code này maxresults là số bài viết liên quan được hiển thị, mình đặt là 10
Chúc thành công!