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.79 / 19 votes

Ads quantri@mocgin.com

Có thể bạn thích

Nhận tin mới qua Email

  • Cập nhật tin tức hoàn toàn miễn phí qua Email
  • Đảm bảo an toàn thông tin của bạn
  • Nhận quà hàng tháng - Tri ân độc giả

Gửi bình luận

  • Không sử dụng từ khóa trong khung Name
  • Chèn code theo mẫu <pre>Your Code</pre>

29 Comments

  1. Bùi Công Luận - 26 Bình luận 12/08/2016
    • Mộc -
      Admin
      13/08/2016
      • Bùi Công Luận - 26 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 - 20 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 - 12 Bình luận 26/08/2016
    • Thủ thuật Blogger - 1 Bình luận 27/08/2016
      • Phước Đt - 12 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 - 50 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