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

POSTED ON 12/08/2016 

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:

http://doiguocmoc.com/template-cua-moc/gioi-thieu-mocna-responsive-landing-template.html

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

Mocgin.com