Gắn nhãn New cho Bài viết mới nhất trên Blogger ~ blog chia sẻ kiến thức lập trình

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.

Thêm CSS:
Bước 1 : Vào Mẫu >> Chỉnh Sửa Html Coppy đoạn css phía dưới dán 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/AVvXsEjQO8BG8_FtpJSvEmDuApmU9DzFprtXGX3oPhTj7PgO52XqiDr16RiNhj_slK_yZAMmkt5InSHMBxlfMb7CkLklg5rL4vVSUOORrDhOOsJoefY2MxusPVIx2fPGyizR_q5wbmscbVX8sspy/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/AVvXsEjQO8BG8_FtpJSvEmDuApmU9DzFprtXGX3oPhTj7PgO52XqiDr16RiNhj_slK_yZAMmkt5InSHMBxlfMb7CkLklg5rL4vVSUOORrDhOOsJoefY2MxusPVIx2fPGyizR_q5wbmscbVX8sspy/s1600/new.png và thay đổi lại vị trí cho phù hợp với blog của bạn nhé.

Thêm JQuery
Bước 2 : Tìm đến thẻ </body> và dán đoạn script sau vào Trước thẻ đó.

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

Chú ý: 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.

Theo Iris-Tips.