Gắn nhãn New cho Bài viết mới nhất trên Blogger

Label New for first post on Blogger

Đây là một thủ thuật nhỏ nhưng khá thú vị đang được áp dụng trên Iris Tips. Có bạn đã hỏi nên mình sẽ chia sẻ cho mọi người. Thủ thuật này sẽ tự động gắn nhãn New vào bài viết mới nhất trên blog của bạn.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.new {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZ5jL0KnaIe6Ygwa2UVIN26FC1qsHH_njilXm1VZRedFbHeeo3phsD5G1lVMupHFms44V1mv513qe3sND6ZChCAXYZ4CYx0Dt3Lwbx0VizWRAG4RIpwh8nR3I9ZfjOnSzKKV9aPs-ilRP/s1600/new.png") no-repeat scroll 0% 0% transparent;
}

Chỉnh sửa: Bạn có thể thay bằng hình ảnh khác nếu thích bằng cách thay đổi link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZ5jL0KnaIe6Ygwa2UVIN26FC1qsHH_njilXm1VZRedFbHeeo3phsD5G1lVMupHFms44V1mv513qe3sND6ZChCAXYZ4CYx0Dt3Lwbx0VizWRAG4RIpwh8nR3I9ZfjOnSzKKV9aPs-ilRP/s1600/new.png và thay đổi lại vị trí cho phù hợp với blog của bạn nhé.

jQuery

2Tìm đến thẻ </body> và dán đoạn script sau vào trước thẻ đó.

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.dropdown img.flag&quot;).addClass(&quot;flagvisibility&quot;);
$(&quot;.dropdown dt a&quot;).click(function() {
$(&quot;.dropdown dd ul&quot;).toggle();
});
$(document).bind(&#39;click&#39;, function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass(&quot;dropdown&quot;))
$(&quot;.dropdown dd ul&quot;).hide();
});
$(&#39;.blog-posts&#39;).find($(&#39;.post&#39;)).first().prepend(&quot;<span class='new'/>&quot;)
$(&quot;#flagSwitcher&quot;).click(function() {
$(&quot;.dropdown img.flag&quot;).toggleClass(&quot;flagvisibility&quot;);
});
});
</script>

Tùy chỉnh: Thủ thuật sẽ gắn nhãn ở hầu hết trang như homepage, index, item... Bạn có thể kết hợp với thẻ điều kiện if để chỉ xuất hiện ở những nơi bạn muốn.

Xem thêm: Tổng hợp các trường hợp sử dụng thẻ điều kiện b:if và b:else trong Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm