Home » Thủ thuật blog
Tạo thanh TabNews cho Header khá ấn tượng với jQuery
Chủ Nhật, 31 tháng 5, 2009
Create TabNews with jQuery

Hình ảnh mình họa:

Để đơn giản, bạn hãy copy tòan bộ đọan code bên dưới, và dán nó vào 1 widget HTML/Javascript. Tốt nhất nên tạo 1 widget ở header là thích hợp nhất
Code://code Javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript">
</script>
<script src="http://data.fandung.com/blog/demo/tabnews-jquery/slider.js" type="text/javascript">
</script>
//code CSS
<style type="text/css">
#slider {
background:url(http://i36.photobucket.com/albums/e2/alvaris924/Zinmag%20Primus/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
</style>
//code HTML
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>
<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>
<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>
<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>
</div>
</div>
- Vài lưu ý :
+ Do ảnh nền của tabnews có độ rộng là 1000px, nên muốn hiển thị tốt, blog của bạn phải có độ rộng trên 1000px.
+ Nên down các file javascript về máy và up lên host riêng của bạn để tráng trường hợp hết bandwidth
Tham khảo từ template Zinmag Primus
Chúc các bạn thành công.

- Tiện ích Recent posts khá ấn tượng với jQuery
- [ Yêu cầu ] Tạo menu giống trang phununet.com
- [ Yêu cầu ] : Trình diẽn bài viết dạng Slide với jQuery (cập nhật)
- Tiện ích "Recent posts" với hiệu ứng trượt từ jQuery
- Đếm ngược sự kiện với jQuery
- Tiện ích Recent posts tích hợp hiệu ứng từ jQuery
- Hiệu ứng show ảnh từ jQuery
- Tiện ích "Bài viết mới nhất - có ảnh thumbnail" kết hợp với hiệu ứng slide từ jQuery
- Tab Menu cực cool cho blog với jQuery
- Tạo thanh menu ngang với hiệu ứng từ jQuery
- Tạo nút lên đầu trang với hiệu ứng từ jQuery
- Giải pháp Blogger bị chặn 02/07/2012
Comments[ 0 ]
Đăng nhận xét