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

Tài liệu
Tạo bài viết liên quan có hình ảnh và Responsive cho blogspot
Chuyên mục
Người đăng
Đăng vào
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 !

Hiện có bình luận

Thông báo
Dịch vụ tăng tương tác bán hàng trên Instagram, tăng auto like bài viết, hình ảnh video, tăng lượt theo dõi (follower) nick Instagram. Xem ngay »
Xong