Gắn hình ảnh cho bài đăng mới nhất


Có nhiều cách để tạo sự khác biệt cho bài đăng mới nhất. Trước đây mình đã hướng dẫn Tạo mầu nền riêng cho bài đăng mới nhất nhưng có vẻ nó khó thực hiện với những bạn chưa biết nhiều về Blogger template. Hôm nay mình sẽ hướng dẫn một cách khác để tạo sự khác biệt cho bài đăng mới nhất bằng cách sử dụng một hình ảnh hiển thị bên cạnh bài đăng này. Cách thực hiện khá đơn giản cũng gồm 2 bước.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#Blog1{position:relative}

Bước 2: Tìm thẻ <a expr:name='data:post.id'/> và thêm vào sau nó 1 trong những đoạn mã sau, mỗi đoạn mã ứng với 1 hình ảnh hiển thị bên cạnh bài đăng mới nhất.

new red
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh3.googleusercontent.com/_u7a1IFxc4WI/TaJhvmNqWVI/AAAAAAAAA-Y/-cHLApTx2wg/new-red.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new yellow
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh5.googleusercontent.com/_u7a1IFxc4WI/TaJh0l8w1pI/AAAAAAAAA-c/oVDNYeQR3rg/new-yellow.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new green
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh6.googleusercontent.com/_u7a1IFxc4WI/TaJhgPS31-I/AAAAAAAAA-U/BbCuMGYzk6s/new-green.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new blue
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh3.googleusercontent.com/_u7a1IFxc4WI/TaJhWM-8d7I/AAAAAAAAA-I/FLalrSbZ0bQ/new-blue.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new blue light
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh4.googleusercontent.com/_u7a1IFxc4WI/TaJhZIL9UfI/AAAAAAAAA-M/Gz6YQOw3WY0/new-blue-light.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new black
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh3.googleusercontent.com/_u7a1IFxc4WI/TaJhTPNAAQI/AAAAAAAAA-E/ppdayZj6oi0/new-black.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

new gray
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<img alt='new' src='http://lh3.googleusercontent.com/_u7a1IFxc4WI/TaJhcCpYJ0I/AAAAAAAAA-Q/CEaA-GKSyFI/new-gray.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
</b:if>
</b:if>

Đăng nhận xét

item