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

Đư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ả.