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

29 Th12

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 :

lastest post - mothuthuat.com

* 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ã>

<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.


Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: