Tạo bài viết liên quan có hình ảnh và Responsive cho blogspot

Chào các bạn, hôm nay mình sẽ hướng dẫn cho các bạn cách tạo bài viết liên quan có hình ảnh và Responsive cho blogspot.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào chỉnh sửa HTML và thêm đoạn code này lên phần post-footer

<div id='related-posts'>
               <b:if cond='data:post.labels'>
                  <b:loop values='data:post.labels' var='label'>
                     <b:if cond='data:label.isLast == &quot;true&quot;'>
                        <data:label.name/>
                     </b:if>
                  </b:loop>
               </b:if>
            </div>

Bước 2: Thêm đoạn script này lên thẻ </body>

<script type='text/javascript'>
//<![CDATA[
// Related Posts
$(document).ready(function(){function relatedPost(g,e,r){$.ajax({url:"/feeds/posts/default/-/"+e+"?alt=json-in-script&max-results="+r,type:"get",dataType:"jsonp",success:function(t){for(var u="",h='<div class="related">',x=0;x<t.feed.entry.length;x++){for(var z=0;z<t.feed.entry[x].link.length;z++){if("alternate"==t.feed.entry[x].link[z].rel){u=t.feed.entry[x].link[z].href;break}}
var p=t.feed.entry[x].title.$t;var c=t.feed.entry[x].content.$t;var y=$('<div>').html(c);if(c.indexOf("https://www.youtube.com/embed/")>-1||c.indexOf("https://www.youtube.com/embed/")>-1){var d=t.feed.entry[x].media$thumbnail.url,m=d.replace('/default.jpg','/mqdefault.jpg'),k=m;}else if(c.indexOf("<img")>-1){var s=y.find('img:first').attr('src'),v=s.replace('s72-c','s600');var k=v;}else{var k='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxl2TKIRF1m4holAAgVBrhLpp9BXK7B16i2orDrEUwgwiFXXGdZh7SyCmoFL-ukW0RFtjEl8OEUi-ZusBbHypuRhpiKEMyjHCfvE_7yqNdtQ24vZt62BucxqgqE5wOYV0WoBCE_N8Imzx/s1600/noImage.png';}
h+='<li><div class="related-thumb"><a class="related-img" href="'+u+'" style="background:url('+k+') no-repeat center center;background-size: cover"/></div><h3 class="related-title"><a href="'+u+'">'+p+'</a></h3></li>'}
h+='</div>',g.html(h);}})}
$("#related-posts").each(function(){var g=$(this),e=g.text(),r=6;relatedPost(g,e,r);});});
//]]>
</script>

Bước 3: Cuối cũng bạn tìm ]]></b:skin> và thêm đoạn css này lên trên nó

/* Related Post */
#related-posts{overflow:hidden;margin:0 0 10px;padding:10px 0 0}
.related li{width:32.276%;display:inline-block;height:auto;float:left;margin-right:9px;margin-bottom:9px;overflow:hidden;position:relative}
.related li h3{margin:0!important;border:0!important;padding:0!important}
.related-thumb{width:100%;height:130px;overflow:hidden;border-radius:2px}
.related li .related-img{width:100%;height:130px;display:block;position:relative;transition:all .3s ease-out}
.related-title{position:absolute;bottom:10px;left:10px;right:10px;padding:0;margin:0;line-height:1.2em;z-index:2}
.related-title a{font-size:14px;line-height:1.4em;padding:0;font-weight:400;color:#fff;display:block;text-shadow:0 .5px .5px rgba(34,34,34,0.3)}
.related-title a:hover,.related-title a:active{color:#fff}
.related li:nth-of-type(3),.related li:nth-of-type(6),.related li:nth-of-type(9){margin-right:0}
.related .related-thumb .related-img:after{background:rgba(0,0,0,0.12);content:"";bottom:0;left:0;top:0;right:0;margin:auto;position:absolute;transition:all .5s}
.related .related-thumb:hover .related-img:after{background:rgba(0,0,0,0.38)}
.related-overlay{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background-color:rgba(40,35,40,0.05)}
.related-line,.related-line-c{position:relative;margin:10px auto 0}
.related-info-th{z-index:2;position:relative;margin-bottom:20px;color:#888;background:#fff;display:inline-block;padding:3px 10px;margin:1px 0;font-size:10px;font-weight:400;text-transform:uppercase;border:1px solid rgba(0,0,0,0.08);border-radius:99em}
.related-line-c{text-align:center;margin-bottom:6px}
.related-line:before,.related-line-c:before{z-index:1;content:"";width:100%;height:1px;background:rgba(0,0,0,0.08);position:absolute;top:50%;left:0;margin-top:-1px}
h3.related-title:before,.jeg_popup_content .post-title:before{display:none}
/* Responsive */
@media screen and (max-width:769px) {
.related li{width:100%;margin:0 0 10px 0}
}

Mách bạn:

• Nếu muốn thay đổi số bài viết liên quan thì tìm r=6 và thay thành số bv bạn muốn hiện nhé

Chúc bạn thành công !