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 == "true"'>
<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/AVvXsEhErnQVo510nL-3NlmOn_7cqBo8iebKmk8ioXdpPusNOWz05tpu9wKtJH7x5Re012IK_EG-ybWcMLBboshXqBq8f5hemfbk12E-xnl3Efy1XRWObmfo9YRgGc0hFY7u2Qm9_RCiCBnVdPCr/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 !
No comments