Lấy ảnh đầu tiên trong bài viết làm Featured Post cho Blogspot

Lấy ảnh đầu tiên trong bài viết làm Featured Post cho Blogspot.

Nếu như bạn là một người đã từng sử dụng qua mã nguồn mở WordPress thì chắc hẳn bạn cũng đã nhận thấy đa số các Theme WordPress đều có một Featured Post trong mỗi bài viết.

Và hôm nay, Mộc xin được chia sẻ tới các bạn một thủ thuật nho nhỏ để tạo Featured Post cho bài viết trong Blogspot. Và hiện tại, mình cũng đang áp dụng thủ thuật này cho Template MocNa của mình! Bạn có thể xem chi tiết Template qua bài viết sau:

[Giới thiệu] MocNa – Responsive Landing Template

Cách tạo Featured Post cho Blogspot

OK, để không làm mất thời gian của các bạn nữa, bây giờ mình xin được chia sẻ luôn nhé!

Xem thêm: Lấy ảnh đầu tiên trong bài làm Featured Post cho WordPress

Bước 1: Các bạn truy cập vào phần chỉnh sửa Template ( Chỉnh sửa HTML ).

Bước 2: Copy đoạn code dưới đây và dán vào vị trí mà bạn muốn hiển thị. Bạn có thể chèn dưới thẻ này chẳng hạn: <a expr:name='data:post.id'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='post-thumbnail-by-doiguocmoc'>
        <div class='post-thumbnail-phu'>
        </div>
    </div>
    <script>
        document.getElementsByClassName(&#39;post-thumbnail-by-doiguocmoc&#39;)[0].style.backgroundImage = &quot;url(&#39;<data:blog.postImageUrl/>&#39;)&quot; ;
    </script>
</b:if>

Lưu ý: Nếu như Template của bạn đã có sẵn thư viện jQuery rồi thì bạn có thể bỏ dòng dưới đây trong đoạn code trên nhé!

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Bước 3: Đây sẽ là bước làm đẹp cho Featured Post. Ở đây chúng ta sẽ dùng CSS nhé! Các bạn có thể tự viết CSS cho nó, hoặc sử dụng đoạn CSS mà mình đang áp dụng cho MocNa – Responsive Landing Template.

.post-thumbnail-by-doiguocmoc {
  width:100%;
  float:left;
  background-size:cover;
  height:300px;
  transition:0.6s;
}

.post-thumbnail-by-doiguocmoc:hover {
  height:500px;
}

.post-thumbnail-phu {
  background:rgba(0,0,0,0.5);
  width:100%;
  float:left;
  height:100%;
  transition:0.6s;
}

.post-thumbnail-phu:hover {
  background:rgba(0,0,0,0);
}

Bước 4: Lưu Template và ra xem kết quả nhé!

Nếu có chỗ nào không hiểu thì để lại Comment mình sẽ giải đáp nhé!

Lấy ảnh đầu tiên trong bài viết làm Featured Post cho Blogspot
4.8 / 20 votes

Cùng chuyên mục:

Add Comment

31 Comments

  1. Bùi Công Luận
    28 Bình luận
    12/08/2016
    • Mộc
      Admin
      13/08/2016
      • Bùi Công Luận
        28 Bình luận
        13/08/2016
        • Mộc
          Admin
          13/08/2016
  2. Chiến Võ
    3 Bình luận
    14/08/2016
    • Mộc
      Admin
      14/08/2016
    • Phan Quang Hùng
      10 Bình luận
      18/08/2016
  3. Chiến Võ
    3 Bình luận
    14/08/2016
    • Mộc
      Admin
      15/08/2016
  4. Chiến Võ
    3 Bình luận
    15/08/2016
    • Mộc
      Admin
      15/08/2016
  5. Hòa
    21 Bình luận
    16/08/2016
  6. sonct
    7 Bình luận
    22/08/2016
    • Mộc
      Admin
      22/08/2016
      • sonct
        7 Bình luận
        22/08/2016
  7. Thắng Đẹp Trai
    7 Bình luận
    26/08/2016
  8. Phước Đt
    14 Bình luận
    26/08/2016
    • Thủ thuật Blogger
      1 Bình luận
      27/08/2016
      • Phước Đt
        14 Bình luận
        27/08/2016
    • Mộc
      Admin
      27/08/2016
  9. Sửa Máy Tính Tại Nhà Bình Dương
    11 Bình luận
    02/09/2016
  10. Du học Mỹ
    1 Bình luận
    12/09/2016
  11. Làm đẹp
    1 Bình luận
    23/09/2016
  12. Đặng Việt Thạo
    55 Bình luận
    13/12/2016
    • Mộc
      Admin
      13/12/2016
  13. Webb
    3 Bình luận
    16/12/2016
    • Mộc
      Admin
      16/12/2016
      • Webb
        3 Bình luận
        16/12/2016
        • Mộc
          Admin
          17/12/2016
  14. Nguyen Anh Tuan
    1 Bình luận
    11/05/2017