Blog DX

Gắn nhãn New/Old vào bài viết cho Blogger (Blogspot)

15 tháng 6, 2015
Bài viết này sẽ giới thiệu cho các bạn cách gắn nhãn New/Old nằm phía trên bên phải của bài đăng mới nhất và các bài đăng cũ.


Cách gắn nhãn New/Old vào bài đăng mới và cũ cho Blogger (Blogspot)

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn css này vào trước thẻ ]]></b:skin>
.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("http://1.bp.blogspot.com/-w-cH9_Xp_6o/UPxhlmAMpWI/AAAAAAAAIyk/ozIqx5lOk7g/s400/New.png") no-repeat scroll 0% 0% transparent;
}
.old1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("http://3.bp.blogspot.com/-lpcMFav3uls/UPxhmBrAmHI/AAAAAAAAIyw/-HrZloG5h_Q/s400/old.png") no-repeat scroll 0% 0% transparent;
}

Tiếp theo, chèn đoạn code sau vào trước thẻ </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>

Cuối cùng, Lưu Mẫu lại và truy cập blog để xem kết quả.

3 nhận xét:

  1. có thể tạo thêm bài viết nhãn : Picture với nhãn Video không vậy ad?

    Trả lờiXóa
    Trả lời
    1. Bài này không hướng dẫn cai đó, bạn có thể vào đây để xem cách làm: http://www.kenhcs.com/2015/05/hien-thi-anhicon-ngoai-trang-chu-theo-nhan.html

      Xóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa