Hướng dẫn thêm bài viết liên quan ẩn hiện cho Blogspot

- Hôm nay mình giới thiệu với bạn 1 thủ thuật cho Blogspot rất hay. Các bạn vào xem bài viết thấy nó trượt ra. Trông rất đẹp mắt . Hôm nay mình sẽ hướng dẫn các bạn thêm nó vào trong blog. ( Không chỉ hiện 2 hay 3 bài thôi đâu. bạn có thể thay đổi số lượn bài viết và thay đổi thuộc tính của nó để theo ý của bạn. Mình sẽ hướng dẫn chi tiết cho các bạn )

- Bước 1 : Các bạn vào mẫu - Chỉnh sửa HTML 



Tìm thẻ đóng </b:skin> bằng cách nhấn Ctrl F nhập ]]>< . Enter là xong. 
Dán đoạn Code sau lên trên thẻ đóng đó. 

/* Widget Rekomendasi */#chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}.chslidingbox-title{background:#27AE60;color:#fff;display:block;height:45px;line-height:45px;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:20px}a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:12px}.chslidingbox-container >div{border:none;margin:3px 0;padding:3px 0}.chslidingbox-container >div >span{font-size:14px}.show{bottom:120px}.hide{bottom:-145px}.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 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:2px 10px 0 0}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}a.related-post-item-title{color:#30373B;transition:all .4s ease-out}a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

- Chú ý đoạn màu đỏ nhé, mình sẽ nói thêm sau : 
- Bước 2 : Bạn tìm đến thẻ  <data:post.body/>  .Thẻ này trong mẫu nhiều lắm. nên các bạn thử từng cái nha. Hoặc có thể tìm thẻ đóng </b:includable>  . của tiện ích BLog1.
Dán đoạn code sau lên trước thẻ đóng  </b:includable>   hoặc sau thẻ <data:post.body/> 

<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;'>Bạn Nên Xem</span>        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h1&gt;&lt;/h1&gt;&quot;,numPosts: 2,summaryLength: 0,titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,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)+"&hellip;":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)+"&hellip;":"";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>

- Nhấn lưu lại ( bạn thay đổi màu xanh theo ý bạn.)

Các thay số bài hiển thị : Các bạn chú ý đoạn màu đỏ mà mình nói ở trên . và đoan ở dưới 
numPosts: 2  Số bài hiển thị 
height:185px; Độ cao tương ứng vớ số bài hiển thị - Bạn thay thông số để phù hợp nhé. 

Đã xong !! Thật tuyệt phải không ?? 
Nếu thấy hay thì thường xuyên ủng hộ Star Trường nhé 
Chúc bạn thành công