//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
Chúc các bạn thành công.
Đúng là Ấn tượng thiệt , có điều hơi nặng , trên IE thì bị đơ hoàn toàn khoảng 5-10 giây đầu .
Nhưng dù sao cũng rất Cool :) , để dành khi nào làm sau :)
Chuc mung Fandung co them bai viet hay !!!!!
Cái này mình đang xài :D
Bài viết này được đăng cũng nhờ 1 phần cũng nhờ Mika :D
đẹp thật nhưng hơi nặng đó bác, thanks bác nhìu
em kết blog bác rùi đấy nhìn theme ngon lành thiệt
//code Javascript //code CSS //code HTML Fandung ơi ! Khi J làm cái này thì trên đầu của hiệu ứng này nó xuất hiện cái dòng như trên và nó không hiện được thanh Stop . Như vậy có nghĩa là gì vậy ban? Giúp mình với! Cảm ơn nhiều!
Jeffy nói... mấy chữ //code Javascript //code CSS //.... đó là tiêu đề của mỗi đoạn code bạn có thể bỏ nó đi hoặc thay dấu // thành <!--code Javascrpit--> nhé ^^
mình muốn làm 1 cái như vậy, nhưng làm sao để đặt cái tabnews ở trên cả 3 cột cho đủ độ rộng hi ^^ ah, mà mình cũng chưa bít cách tạo site free để up mí cái javascript lên để dành riêng cho site mình nữa, FD có bài nào hướng dẫn ko cho mình xin cái link tham khảo học hỏi ^^
Rất cảm ơn bạn đã chia sẻ.
Nhưng tại blog của tôi, khi điều chỉnh vị trí ảnh so với lề trên lại không được. Cụ thể tôi thay đổi:
.slide img {
position: absolute;
top: 5px;
left: 620px;
background:#fff;
padding:10px 10px;
}
nhưng nó lại không cách lề trên như mong muốn, trong khi đó khoảng cách so với lề bên trái lại thay đổi được.
Mong bạn giúp đỡ!
không làm cho nó nhỏ hơn được tiếc quá
phải tự gõ lại từng bài để trưng bày thì có hay ho gì đâu. tự trình bày từng bài thì mình chế biến kiểu gì chẳng được
cứ tưởng nó tự lấy bài viết mới nhất theo time rồi bày ra cơ.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.