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://2.bp.blogspot.com/-4lZ7DCckjkg/WtaPclghMGI/AAAAAAAAN00/4Cais5iSDRwwUyU6jEc7qlCojlg1izsVgCLcBGAs/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 !

5
4
3
2
1

3 nhận xét:

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019