Gắn Hình Ảnh Cho Bài Đăng Mới Nhất

™» CGC Blog «™ 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.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2bkXwEhFofnAuBOcCGJCCyUw-Es29xy6WZT909Mu3UkeL491wPIfbA9igCCzx2yS2ChvHd72ajUAVnEjeQlFYAT7T_DBZTvYn3vzGGjaKFouUSijP36u9LRxPEyf_-YAy8dC_zZWT9NP/s1600/new-red.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVEVBVDUmVBwCTDFlykYVBvTQd0xIIQKQ0xvgbv4NlYiimif5JWY3nQ9xm3uF6C4mJiu1IFqdhFakjhuIC0Ne3G7XXY1U3bNFp_NWxvuu_oQEBw3KnhfTt1WPbLsxqt4ROHG63Pghs4yB/s1600/new-yellow.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsowl0EaQc2sspOqjiWjAdaUHAljfrhwkn_7i8PnNg2bsFGQWO7ePIcaJJT3k9C6PGzN9HkVY10Fk-Qd1tphRugkdidz6MVmLvUtTWLzy0KfKzwnBtGVnNyoC0wT9zo6RyQHV8TulpezNI/s1600/new-green.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSB_nhj4sLYiUHLBdByJ1N8KASkrw1_jjw_Ha1XSgJyLr3RsI-ukF1vFZ-nP29W9s4zecLg6-7DfKFveor0NGdpmArLBXNMJjLLBSEpGUk0PEKkRHDAh4yHFpnj_fFihG9PMqwlTnFlB2/s1600/new-blue.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdqY_MSR1-aKNKi8JlQIoLDE-d1XzY23HRsBTzv1Faq4OYgBeamS7UbQS-eLQkAZd2bXL0igCQn-aOsnaKwXFJLz1_LnYYNvlHc104cVw8MprQE5_sXppbSzBnALY2HJcnnzU05zKHFBQ/s1600/new-blue-light.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGnzlygb1Zq-SYm0WI1HPHno-sYYJN5bcDqkwMRDR1gBSP_5xURYmdK1nJoIE23EJO_p87FmvzrjcY0xyHZ7S3gBIK4WE9aMNWbXjRivzk-qZIZUSPgweIQ2Pd3uO1meQupopYLd5yBmEP/s1600/new-black.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQZf4nd7-TZB0OTUJaZk48GDyIB_Nt9Ik-b6rdjMUk-P0FElcfp_zcc1Y3NGj7Q1NPb2Wz5FdyrVl1AQ8JgeiFa8dFT1NMJs7QqLoeHMoNakaJ3h0dl6hNB_HC3jZRerOCyrek5I811Ue/s1600/new-gray.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

Ảnh được hiển thị góc trên bên trái của bài đăng mới nhất. Bạn cần chỉnh lại giá trị của thuộc tính top và left ở bước 2 để hình ảnh được hiển thị phù hợp với template đang dùng. Nếu có thể, hãy design một hình ảnh cho riêng mình và thay thế cho hình ảnh của thủ thuật trên.
Thủ thuật này không dựa vào giá trị thời gian nên khi duyệt theo label sẽ không gắn hình ảnh cho bài đăng mới nhất, có vẻ còn gượng ép khi nói "tạo sự khác biệt cho bài đăng mới nhất"!

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

Nguồn : blog.duypham.info

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!