Loading post navigation ...
 
 

Pro page

12
Nhận xét

Tạo thanh TabNews cho Header khá ấn tượng với jQuery

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Create TabNews with jQuery
[FD's BlOg] - Một lần có 1 bạn nhờ mình thay đổi template cho blog, và mình đã tìm thấy một thủ thuật khá đẹp mắt từ template đó, nên mình quyết định lọc thủ thuật đó ra và post lên cho mọi người.
Xem demo trực tiếp ở đây : http://data.fandung.com/blog/demo/tabnews-jquery/tabNews.html

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.


Enter your mail address:

12

Unknown

Đú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 :)

Mr.Mika nguyễn

Chuc mung Fandung co them bai viet hay !!!!!

Unknown

Cái này mình đang xài :D

fandung

Bài viết này được đăng cũng nhờ 1 phần cũng nhờ Mika :D

LouLou

đẹ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

Max4download
Jeffy

//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!

ucmasnb

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é ^^

Unknown

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

diepkt

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 đỡ!

Mối Tình Giêsu

không làm cho nó nhỏ hơn được tiếc quá

Khách (ẩn danh)

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



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home