Gắn nhãn New/Old cho bài đăng

Nặc danh Thứ Bảy, tháng 3 29, 2014

Bài viết này mình sẽ hướng dẫn các bạn thủ thuật gắn nhãn New (cho bài đăng mới) và Old (cho bài đăng cũ) ở góc trên bên phải bài đăng (từ MBT). Giúp độc giả có thể phân biệt và nhận biết đâu là bài đăng mới đâu là bài đăng cũ trong blogspot.

Gắn nhãn phan biệt bài đăng mới và bài đăng cũ cho blogspot (New/Old)

(Ảnh minh họa thủ thuật)

Các bạn có thể xem demo của thủ thuật này ở trang web bên dưới: (Chú ý góc trên phía bên phải của bài viết)

» VIEW DEMO

» Cách gán nhãn phân biệt bài đăng mới và bài đăng cũ cho blogspot.

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML), chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>:

.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVecSPAlGba5bGXedSAZf36st0Vxs3Se1UCOQrn1qXfgWBPGW9D2ILw3hCFlAFjmko3Gkd6RaCer4a9DiNCnI_XslCxGjuFH_9OU7vLAZG1AJ0Dfgc4psTBzXxxq2gOYzvGButdhYL4R8r/s400/New.png") no-repeat scroll 0% 0% transparent;
}
.old1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcEdxVQCyMlbmJtUR-x4fu5XAz5gEHO0vcPpU5KDb5lOcDXv1XmYaipWqzeTL4-Muz2TSNk9Pkosr5haDw1O1hGHyvIuXtqlmtSfHx6myXITRWneDmzxa4CXczrd_gLH4Dj5BwzYDyfZFe/s400/old.png") no-repeat scroll 0% 0% transparent;
}

Bước 2: Chèn đoạn code sau vào sau thẻ <head> hoặc trước thẻ đóng </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
$('.blog-posts').find($('.post')).slice(1).prepend("<span class='old1'></span>")
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(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='new1'></span>")
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>

- Nếu trong mẫu của bạn có thư viện Jquery rồi thì hãy xóa đoạn màu xanh đi nha.

Bước 3. Lưu mẫu của bạn lại và quay trở lại trang blog của bạn để xem thủ thuật này hoạt động như thế nào nha. Nếu gặp bất cứ khó khăn nào khi áp dụng hãy để lại comment của bạn ở dưới bài viết này để nhận được sự hỗ trợ của mình nha.

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