Tiện ích bài viết liên quan-related posts có rất nhiều hình thức khác nhau với sự tùy biến của css và javascript nhưng mục đích cuối cùng vẫn là tạo một widget đẹp mắt tăng độ hấp dẫn của trang blog/web,giúp người đọc dễ dàng tìm thấy những bài viết có cùng chủ đề mà có thể người ta thích đồng nghĩa với việc tăng cường các backlink nội bộ và cải thiện bounce rate.
Bài này hướng dẫn cài đặt tiện ích bài viết liên quan với đoạn trích và nút read more
Các bước tiến hành như sau:
Bước 1
Các bạn vào chỉnh sửa mẫu và dán đoạn css sau vào trên thẻ ]]></b:skin>
.related-post{margin:15px 0 0;padding:10px}
.related-post h4{font-size:18px;margin:0 0 .5em}
.related-post-style-2{margin:0 !important;padding:0 !important;list-style:none}
.related-post-style-2 li{margin:0;padding:0}
.related-post-style-2 li{padding:5px 0 !important;border-top:1px solid #eee;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;background:#fff;border:1px solid #e5e5e5;padding:0;float:left;margin:2px 8px 0 0}
.related-post-style-2 .related-post-item-title{font:bold 14px Arial,sans-serif}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden;font-size:11px}
.related-post-style-2 .related-post-item-more{}
@media screen and (max-width:800px){#related-post{max-width:100%;width:100%;float:none}}
Bước 2Tìm tới thẻ <div class='post-footer'> và dán ngay sau nó đoạn code bên dưới:
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Posts :</h4>",
numPosts: 5,
summaryLength: 208,
titleLength: "auto",
thumbnailSize: 45,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAD0UlEQVR4nOz6/0f7/////59vCapUIlFVVVURqiJVVVFAQagkEJQgSKhIEIhIKgRKRAHMzGzMDIzBtm3YbDM227Zh27YZ23ZzvmRTqtp17bLtul3PXFzNuF7Op/PpfL7sdD5f9i+RSCSghKy8lMAiVA5wsQeAY5hjuMgCwKU0l9JcSr8FwGw2g8vlIs9cWkdHB1kNDQ0ZUcG4hoPBIFxcXIBGo8kr94ODg3B4eAhVVVWM3GAM+OzsLOesfhVZDDj6gsFnYowAy+XyX8HW1NTA+fk5+Hw+ODk5oZoF6Av6ND4+nvY2jACnw2xLSws0NjaSlQtDn6gBzgkCyntwwqPYA8AxzDFcZAHIWUp3d3fD4uIi9Pf3Q11dHVRWVhLV5na7QaVSgUgkAofDQT2/qAOuqKiA7e1tmJubg7KyslTBxONxIlJwdXV1wdLSEvD5fHh9faVaVFQB19fXw/HxMbS1tZFtDAYDyGQyUCqVYLfbobW1FUZHR2FmZgaam5thbW2NCJfr62uIRqNUXKMK+ODggICNxWIgEAjg4eHhw3Ymk4ks/G53dxcmJiZgcnISIpEI3N7esg9wb28vSd27uzuQSqXf+o+1fHl5CZubm7C6ugrz8/Og1WpBIpFkHTT1GkZx/xPY9/b8/AzDw8PQ2dkJKysr7APs9/vh6ekJmNjLywvpc7EUsLax5rNpVBnGntXpdDLaQqFQgNFohJ6eHhgaGmIX4EwHBXiCI2BM7WwbVYb1en1Gr7fZbORZXV2dbbx0hQemZiaWVFwoWlgFeGBgALAmmVpyWhIOh7ONly7D7e3tGQFuamoiz0AgkG2C6QJGmZiJJRmmMR2lCnhkZIQ4z6QLQuGBnRUaam5WMYxD8q2tLSIb07WNjQ3SVVmt1rQVGpOYUGUY340jVGwN03F+fX09xS6Px6PiGlXA2AmheNjb2yP3QY+Pj19uhz8/Ozs7MD09TT5jcMRiMfsAYyofHR2RUxebgb6+vlQ/jOIC9fLY2BjMzs5C8oDDZuP+/p4Ku9QnHnhYnZ6ekonH1NQUAYwrOfF4PwHBFlEoFJKOiaZlPaUtFgvRwl6vl7wa75iurq4IGOxzcaZVW1tL0hi7KY/HA2q1msy0kpKSVYBRLOzv739yWafTkZVvo35KF9r7GQHGk7bQjMnNIeNDC2/dUUzgAVMIhv4wJYERYASLt+648g0ageIoiKkxrmHc6ObmhgzYQqFQXpjGP7QsLCxktHVGhxYyvby8nBewf92znJVe/8FnDnCxB4BjmGO4yALApTSX0lxKszsAJVfD/wMAAP//ErxYm/Pk150AAAAASUVORK5CYII=",
containerId: "related-post",
newTabLink: false,
moreText: "Read More...",
widgetStyle: 2,
callBack: function() {}
};
</script>
<div style='clear:both'/>
</b:if>
Bước 3Bạn dán đoạn code bên dưới vào trước thẻ </body> để hoàn thành cài đặt tiện ích bài viết liên quan với đoạn trích và nút read more cho blogspot.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"",widgetStyle:1,numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
numPosts: 5, là số bài viết liên quan được hiển thị.Chúc thành công!