[Blogspot] Thêm icon cho bài đăng mới nhất

Trang chủ là nơi hiển thị tóm tắt các bài đăng mới kèm thumbnail cũng như 1 phần nội dung của bài đó. Các bài đăng đều được hiển thị như nhau nên hôm nay mình sẽ hướng dẫn các bạn 1 thủ thuật giúp đính thêm 1 icon nhỏ nhỏ nhằm phân biệt bài đăng mới nhất với các bài còn lại nhé.

Thêm icon cho bài đăng mới nhất

Cách thực hiện:

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Thêm dòng CSS này trước thẻ ]]></b:skin>

#Blog1{position:relative}

Trong đó, #Blog1 là ID của widget bài đăng trong chỉnh sửa bố cục.

Bước 3: Tìm <a expr:name='data:post.id'/> và chèn đoạn code dưới đây sau thẻ đó. (có thể sẽ có nhiều hơn thẻ đang tìm kia nên bạn phải thay lần lượt từng thẻ một đến khi nào được mới thôi)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='//i.imgur.com/ssxbVGC.png' style='display:block;position:absolute;top:-6px;right:-6px;border:0 none;height:80px;width:80px'/>
 </b:if>
</b:if>

--- Mỗi template cấu trúc mỗi khác nên bạn phải tùy chỉnh 2 thông số top và right sao cho phù hợp nhé.

--- Bạn có thể thay link ảnh //i.imgur.com/ssxbVGC.png bằng 1 ảnh khác bạn thích. Tham khảo tại đây.

Bước 4: Lưu template lại.

Vậy là xong rồi đó. Đơn giản và ngắn gọn vậy thôi.
Chúc các bạn thành công :)
Source code: Duy Pham

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!