Làm nổi bật bài viết đầu tiên cho blogspot

Bài viết liên quan:

Làm nổi bật bài viết đầu tiên cho blogspot giúp bạn tạo được sự chú ý của người đọc khi truy cập vào blog của bạn, nó vừa có sự ảnh hưởng vừa tạo được sự riêng biệt cho template. Để áp dụng thủ thuật này đòi hỏi bạn phải có chút kiến thức về css để tùy biến hiệu ứng cũng như cách hiển thị cho bài viết đầu tiên.

Lợi ích

- Làm nổi bật bài viết đầu tiên cho blog của bạn.
- Thu hút sự chú ý của người xem.
- Tạo điểm nhấn cho blog.
- Phong cách độc đáo, riêng biệt theo sở thích của mình.

Xem thêm:Sửa lỗi ảnh blogspot không hiển thị như thế nào?

Khó khăn

- Phải có chút kiến thức về css.
- Phải thêm css cho bài viết đầu tiên khi sử dụng thiết bị di động.
- Phải sáng tạo để tạo sự khác biệt

Cách thực hiện

Đầu tiên bạn tìm đến thẻ <b:include data='post' name='post'/> và thay nó bằng

<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>
Sau đó các bạn tìm đến ]]></b:skin> và thêm class first-post vào trên nó (Xem VÍ DỤ để hiểu rõ hơn)

Ở đây đòi bạn phải có sự sáng tạo để bài viết đầu tiên trong blog của bạn trở nên đẹp và độc đáo hơn. Bạn có thể thêm id hoặc class để có thể tùy biến css cho nó.

Xem thêm: Làm đẹp phần Bố cục (Layout) cho Blogspot

Ví dụ

Để các bạn có thể hiểu rõ hơn về thủ thuật này mình sẽ lấy một ví dụ đơn giản như sau:
- Ban đầu thuộc tính của hình ảnh của các bài viết trên blog bạn có css:

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

Tức là hình ảnh sẽ thu về bên trái và cách bên phải 15px.
Tiếp theo ta thêm css cho class first-post như sau:

.first-post .post img {
float:right;
margin-left:15px;
}
Tức là hình ảnh của bài viết đầu tiên sẽ thu về bên phải và cách bên trái 15px, còn các bài viết khác vẫn thu về bên trái.

Hi vọng thủ thuật blogspot này giúp ích được cho các bạn. Nếu có thắc mắc hay câu hỏi gì thì các bạn có thể để lại bình luận để mình giải đáp.

Chúc các bạn thành công !

2 comments

:v
;3
:)
:D
:P
:*
:`
:♥
:O
-_-
:"(
:H
:(
:Z
:T
:<