Home » Thủ thuật blog
Tạo thanh TabNews cho Header khá ấn tượng với jQuery
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.

- [3.0.2] Nâng cấp ANCMedia Player cho trang phim
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Thêm Reactions vào bài viết của blogspot
- Hiển thị bài viết cho trang Music,Phim.
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
- Tạo iFrame YouTube Màu bạc
- Thêm tác giả, quyền Admin cho blogspot
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
Comments[ 0 ]
Đăng nhận xét