Hướng dẫn làm nổi bật bài viết đầu tiên cho blogspot

Trong bài viết này mình xin hướng dẫn các bạn tạo bài viết đầu tiên nổi bật so với các bài viết, ưu điểm giúp cho người đọc tạo điểm nhấn, lạ. và có thể thiết kế riêng theo sở thích của mỗi người cho blog của mình.

Để áp dụng thủ thuật này đòi hỏi bạn phải có kiến thức về CSS cũng như có thể làm đẹp được bài viết đầu. thiết kế đáp ứng khi hiển thị trên thiết bị di động, sáng tạo riêng.

Nào chúng ta bắt đầu thực hiện thôi, trước khi thực hiện bạn nên backup template của bạn, nếu trong trường hợp lỗi bạn có thể backup lại mẫu dễ dàng.

Hướng dẫn thực hiện:

Bạn cần tìm đến thẻ sau trong mẫu của bạn

<b:include data='post' name='post'/>

Và thay đoạn đó thành

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='first-post'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Vậy là đã xong đoạn thiết lập riêng đoạn HTML cho bài viết đầu tiên, tiếp theo chúng ta cần trang trí cho bài viết này nhé.

Mình sẽ lấy một ví dụ về CSS cho hình ảnh, nếu trong mẫu của bạn đoạn CSS để định dạng hình ảnh thế này

.post img {
float:left;
margin-right:15px;
}

Bạn chỉ cần thêm thuộc tính .first-post mà mình bôi đỏ ở đoạn HTML vào đoạn CSS trên nó sẽ thành thế này

.first-post .post img {
float:right;
margin-left:15px;
}

Mình đã chỉnh sửa thuộc tính của hình ảnh trong bài viết đầu tiên khác so với các hình ảnh ở bài tiếp theo đó. Đối với các thuộc tính khác tùy theo mẫu của bạn mà có thể chỉnh sửa thêm cho đẹp, nên ngay từ đầu mình đã đề cập bạn cần phải có kiến thức về CSS nhất định.

Tổng kết

Vậy là đã xong, trong bài viết này mình đã cung cấp tới các bạn một thủ thuật nhỏ giúp blog của bạn trở nên nổi bật hơn. Nếu bạn có khó khăn trong quá trình thực hiện hãy để lại bình luận phía dưới mình sẽ giải đáp và hỗ trợ!

Download Here