Home » Thủ thuật blog
Jquery Slider Tin Tức - News Slider
Thứ Năm, 29 tháng 12, 2011
Hẳn nhiều bạn cần slide này... mình đã phát triển phiên bản thumbail cho site phim. Nhưng gà CSS quá nên đắp chiếu, lấy silder của trang tin tức này cho các bạn dùng.
Nói về jquery thì mình cũng chả rành lắm, đến từ jquery viết còn hay nhầm thì các bạn chắc cũng đoán được. Phần slider rip của gostep.info, các bạn có thể vào đó xem.
Xem DEMO
Mình cũng hơi buồn ngủ, các bạn setup luôn nhé.
CSS (Cái này cũng gà lắm, mọi người tự căn chỉnh nhé !)
<style>
ul#ticker {
font: "Helvetica,Arial";
height: 26px;
overflow: hidden;
text-align: right;
color: red;
font-size: 12px;
line-height: 28px;
background: #444;
}
ul#ticker strong,ul#ticker strong a {
color: green;
font-size: 10px;
padding-right: 5px;
text-transform: uppercase;
}
#ticker a {
text-decoration: none;
}
ul#ticker a {
color: white;
text-decoration: none;
}
ul, li {
list-style: none outside none;
}
ul#ticker .meta-comments a,.meta-sep,.meta-date{
color: #777777;
}
</style>
ul#ticker {
font: "Helvetica,Arial";
height: 26px;
overflow: hidden;
text-align: right;
color: red;
font-size: 12px;
line-height: 28px;
background: #444;
}
ul#ticker strong,ul#ticker strong a {
color: green;
font-size: 10px;
padding-right: 5px;
text-transform: uppercase;
}
#ticker a {
text-decoration: none;
}
ul#ticker a {
color: white;
text-decoration: none;
}
ul, li {
list-style: none outside none;
}
ul#ticker .meta-comments a,.meta-sep,.meta-date{
color: #777777;
}
</style>
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://anhnc.googlecode.com/svn/trunk/p/news.js"></script>
<script src="/feeds/posts/default?max-results=12&orderby=published&alt=json-in-script&callback=news"></script>
Phần numberposts (12) có thể unlimit nhé ;))
Chúc các bạn thành công !
<script src="http://anhnc.googlecode.com/svn/trunk/p/news.js"></script>
<script src="/feeds/posts/default?max-results=12&orderby=published&alt=json-in-script&callback=news"></script>
Phần numberposts (12) có thể unlimit nhé ;))
Chúc các bạn thành công !

- Recent comments với ảnh đại diện
- FDNav - Phân trang cho blogspot
- Update tiện ích recent posts
- Update bộ đếm số lần đọc bài viết cho blogspot - v3.1
- Tạo tab nội dung đơn giản với jQuery
- PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts
- Pro TabNews mang phong cách của VnExpress
- Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn
- Tiện ích Recent Comments cho cho 1 bài viết cụ thể
- Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey
- Tiện ích Recent posts khá ấn tượng với jQuery
- [ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City
Comments[ 0 ]
Đăng nhận xét