humghn.com
Chuỗi bài viết liên quan là những bài viết cùng chung nhãn label với bài viết mà độc giả đang đọc . Chuỗi bài viết dạng này thường gợi cho độc giả những bài mà độc giả có thể đang quan tâm . Việt đặt những bài viết như vậy sau mỗi bài viết sẽ giúp độc giả dễ dàng điều hướng tới những phần tiếp theo với nội dung . Ví dụ như họ đang đọc - Phần 1 thì ở cuối bài viết sẽ hiện lên Phần 2, Phần 3 ..v..v. của bài viết ,hoặc hiển thị những bài có nội dung tương tự như vậy . Việc sắp xếp bài viết liên quan một cách khoa học sẽ giúp cho lượt online của người đọc trên web/blog của bạn lâu hơn , từ đó độ uy tín của web cũng sẽ tăng theo .
Sau đây , chuyên mục sẽ hướng dẫn các bạn cách để tạo chuỗi bài viết liên quan có ảnh thumbnail hàng dọc
Bước 1 : Đăng nhập blogspot , sau đó chọn mẫu rồi chọn " Chỉnh sửa HTML "
Bước 2 : Dán đoạn mã sau lên trước thẻ ]]></b:skin>
#BloggerSpiceRP { background-color:#FFF; margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px #000000 }
#BloggerSpiceRP h4 { color:#fff; font-size:15px; margin:-10px -10px 10px; padding:5px 3px; text-align:center; font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px 0 0 #333; text-shadow:2px 0 0 #333; position:relative; background-color:#00B4FF }
#BloggerSpiceRP ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#BloggerSpiceRP ul { margin-top:10px }
#BloggerSpiceRP li { float:left; width:100%; margin:0 0 5px}
#BloggerSpiceRP .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#BloggerSpiceRP strong { font-weight:bold; font-size:15px; line-height:1.1em }
#BloggerSpiceRP p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpZE7x4ruxTKOPHwAnadCR5YLur0d0o-OJGO5F-9KvC-xfumheIOUjXUN7a0ONZSsNOn0FEyyrq61JXAcveNutZ30nZP5Ykfrj6lkBDPOP_aGy8Mn4OcfsTWV5pcH_cenuEvuPX6jMGzLJ/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }
Tùy chỉnh#00B4FF : Màu nền bài viết liên quan
Bước 3 : Dán đoạn mã sau lên trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Bước 4 : Tìm đến đoạn mã code tương tự như sau :<div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'>
Bước 5 : Dán đoạn mã code dưới đây vào sau đoạn mã màu xanh vừa tìm được
<b:if cond='data:blog.pageType == "item"'>
<div id='BloggerSpiceRP'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSiSinBuk3GxRpUMkN8tZEoxuIge2542XKuCT2z7zLOIT48gYuX029C4FjjfXbwp4rj0ypX1oO52Lh6pV89es1XpAZfou4bVyEfTpxmcnQ3aUJMVNJQtuXFdfDtNOuMFJb11iS3rTeH7f/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="BloggerSpiceRP"></div>');f.containerSelector="#BloggerSpiceRP"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#BloggerSpiceRP-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#BloggerSpiceRP"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="BloggerSpiceRP"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="BloggerSpiceRP-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#BloggerSpiceRP",maxPosts: 5,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
</b:if>
Tùy chỉnhmaxPosts: 5 - Lượng bài viết hiển thị tối đa trong mục bài viết liên quan
summary:150 - Số kí tự của bài viết liên quan sẽ hiển thị trong tiêu đề
Bước 6 : Lưu mẫu
Như vậy là chuyên mục đã giới thiệu đến các bạn cách để thêm mục " Bài viết liên quan " trên web/blog . Chúc các bạn thành công .
