[Blogspot] Related Posts xuất hiện khi cuộn trang đẹp cho blog

Related Posts (hay còn gọi là bài viết liên quan) trong cùng 1 nhãn (label), từ đó người đọc sẽ dễ dàng theo dõi được nhiều bài hơn mà không phải đi đâu tìm kiếm; cũng có thể được coi là một gợi ý cho họ thôi ý mà :)

Nhưng thường thì Related Posts người tạo template hay chỉnh sửa thì hầu như đặt ở dưới mỗi bài viết.
Tuy vậy, hôm nay mình sẽ share cho các bạn một mẫu mới, các bài viết liên quan chủ đề đó sẽ hiện khi ta cuộn chuột (scroll bar) xuống gần phía cuối mỗi bài viết. Giờ thì bắt đầu nhé!
Cách thực hiện: Bước 1: Truy cập quản trị Blogspot.
Bước 2: Chủ đề - Chỉnh sửa HTML.
Bước 3: Copy và paste đoạn CSS dưới lên trước thẻ ]]></b:skin>

#chslidingbox{background:#fff;width:100%;max-width:330px;height:auto;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:rgba(0,0,0,0.15) 0 1px 1px 1px;transition:all .4s ease-out} .chslidingbox-title{background:#0093da;color:#fff;display:block;height:40px;line-height:40px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px} .chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:100%} a#chslidingbox-close,a#chslidingbox-close{margin-right:15px} .chslidingbox-title >span >h2{font-size:20px!important;font-weight:400!important} .chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:0} .chslidingbox-container >div{border:none;margin:0;padding:0} .chslidingbox-container >div >span{font-size:14px} .show{bottom:68px} .hide{bottom:-302px} .related-post{font-size:70%} .related-post h4{font-size:150%;margin:0 0 .5em} .related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none} .related-post-style-2 li{padding:0 10px 10px;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;border:0;padding:0;float:left;margin:0 10px 0 0} .related-post-style-2 .related-post-item-title{font-weight:400;font-size:15px;line-height:normal} a.related-post-item-title{color:#30373B;transition:all .4s ease-out} a:hover.related-post-item-title{color:#0093da;text-decoration:none} .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

Bước 4: Tìm thẻ  <data:post.body/> và paste đoạn code dưới lên trước nó.

<b:if cond='data:blog.pageType == "item"'> <div class='show' id='chslidingbox'> <div class='chslidingbox-title chslidingbox-www'> <span style='float:left;margin:0 15px;'>Xem thêm:</span> <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'><i class='fa fa-window-close'/></a></span> <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'><i class='fa fa-window-maximize'/></a></span> <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'><i class='fa fa-window-restore'/></a></span> </div> <div class='chslidingbox-container'> <div class='related-post' id='sliding-tab'/> <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: "<h1> </h1> ",numPosts: 5,summaryLength: 0, titleLength: "auto",thumbnailSize: 45,noImage: "https://2.bp.blogspot.com/-BdZahr9Qwy4/WNXhN6hOUxI/AAAAAAAAAJk/_7cC82z3NfEVQ-drE0LqiJCgl-1OgkbnwCLcB/s1600/Logo-Bac-Si-Windows.png",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}}; </script> <script type='text/javascript'> //<![CDATA[ /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4> Artikel Terkait:</h4> ",widgetStyle:1,homePage:"http://www.arlinadzgn.com",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> <script type='text/javascript'> //<![CDATA[ $(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})}); //]]> </script> </div> </div> </b:if>

Note: Trong 1 template thì sẽ có nhiều thẻ trên, vì vậy mà các bạn phải thay lần lượt cho đến khi nào được thì mới thôi. Nếu như ở template mình đang dùng thì phải thay code đến thẻ  <data:post.body/> thứ 3 mới được :(

Bước 5: Lưu template lại và chiêm ngưỡng thành quả :)

- Nếu cảm thấy bài viết hay, có ích thì hãy share ủng hộ mình nhé ^^

Code by: bacsiwindows.com

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!