Tạo bài viết nổi bật với Jquery.

Tiếp tục lọat bài về jQuery, ở bài này Chip sẽ tiếp tục hướng dẫn các bạn các làm nổi bật bài viết đầu tiên của blog ở ngòai trang chủ. Với thủ thuật này trang chủ của bạn sẽ trở nên bắt mắt hơn.
Thủ thuật dùng jQuery để chọn bài viết đầu tiên, sau đó ta add thêm các thuộc tính css vào class, id đã chọn để tạo nên sự khác biệt.
Các bạn có thể xem demo mà mình đã test trên blogspot : DEMO

Còn đây là hình minh họa :

* Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước thẻ ]]></b:skin>

.post.first {

background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;

padding:10px;

border:1px solid #ddd;

}

Dòng màu vàng là màu nền.Bạn truy cập vào bảng mã màu trên Blog mình để lấy mã>

4. Tiếp tục chèn đọan code bên dưới vào trước thẻ đóng</head>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.post:first&quot;).addClass(&quot;first&quot;);

});

</script>

</b:if>

Ở đây chip có sử dụng điều kiện b:if để thủ thuật chỉ hiển thị ở ngòai trang chủ, nếu như không có lệnh này, thì khi mở ở trang bất kì nào như : bài viết, trang archive, label … thì bài viết đầu tiên đều được làm nổi bật.
5. Sau cùng là save template lại.

Nguồn mothuthuat.com