Đưa ảnh đầu tiên lên trên tiêu đề bài viết Blogspot

May 22, 2018 May 22, 2018

Đưa hình ảnh đầu tiên lên trên tiêu đề bài viết giúp thay đổi cách tiếp cận bài viết đối với độc giả, giống như hình ảnh nổi bật mà một số trang Wordpress hay áp dụng.

Hướng dẫn đưa ảnh đầu tiên lên trên tiêu đề bài viết Blogspot

Đăng nhập trang quản trị Blogger, chọn Template > Edit Template và thêm các bước:

Bước 1: CSS code

Thêm CSS trước ]]></b:skin> hoặc </style>:
.firstimage{
  background:#fff;
  padding-bottom:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover
}

Bước 2: HTML code

Dùng tổ hợp phím Ctrl+F để tìm <b:if cond='data:post.link'>, và thêm lên trên nó đoạn code bên dưới (lưu ý là trong Template có thể có nhiều code giống nhau này, bạn phải thử từng cái xem có đúng không):
<b:if cond='data:view.isPost'>
 <div class='coverImage'>
<b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/><b:else/><img class='firstimage' expr:alt='data:post.title' src='URL_DEFAULT_NOIMAGE'/></b:if></div>
</b:if>

Bước 3: Script

Để ẩn hình ảnh trùng lặp trong bài viết ta thêm đoạn code bên dưới lên trên thẻ </body>:
<b:if cond='data:view.isPost'> 
<script type="text/javascript">
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>
</b:if>

Lưu Template và xem kết quả.
Tags: #feature post , #ảnh đầu tiên,
Click to show more

0 comments for Đưa ảnh đầu tiên lên trên tiêu đề bài viết Blogspot

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article