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

Cài đặt ảnh đầu tiên hoặc ảnh đầu tiên phía trên tiêu đề bài đăng đang là xu hướng hiện nay, các bài đăng có ảnh bìa trông gọn gàng và đẹp mắt. Có nhiều cách hướng dẫn để áp dụng vào blog của bạn và bài viết này chỉ là một trong những cách đó...

Bước 1: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: Tìm  <b:if cond='data:post.link'>  , và thêm lên trên nó đoạn code bên dưới:

<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>

*Lưu ý: 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ước 3: Tìm thẻ  </body>  và thêm trên nó đoạn code sau:

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

Xem bài viết gốc tại đây