Loading post navigation ...
 
 

Pro page

13
Nhận xét

Tạo thanh tin tức (Hot News) dạng tab - trượt ngang cho blog (Mootools)

| by Phan Dũng | views

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

[FD's BlOg] - Có một bạn đã bắt gặp một tiện ích "Hot News" (dạng trượt trượt ngang, có hình ảnh minh họa) ở 1 blog của wroldpress, và có nhờ mình hướng dẫn giùm thủ thuật này. Và bài viết này mình sẽ hướng dẫn các bạn thủ thuật tương tự như vậy cho blogger.
Lưu ý là thủ thuật chỉ hướng dẫn tạo tab trượt để chứa nội dung, nội dung của tab là do các bạn tự sọan.


Đây là hình ảnh từ blog worldpress


Và đây là hình minh họa thủ thuật mình sẽ hướng dẫn:


Xem trực tiếp demo : http://data.fandung.com/blog/demo/tabnews-mootools/tabnews.html

☼ Bây giờ mình sẽ hướng dẫn sơ để các bạn hình dung được thủ thuật:
- Đầu tiên chúng ta sẽ có 1 vùng để chứa các tab, gọi là tab chính ( id="stage" ):



- Thứ 2 là vùng chứa các buttom (id="slider-buttom"):



- Và cuối cùng là các tab(id="myList") để chứa nội dung, các tab này sẽ nằm trong tab chính(id="stage"):


☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML, và dán đọan code javascript vào sau thẻ <head> (hoặc trước thẻ </head>

<script type="text/javascript" src="http://data.fandung.com/js/mootools.svn.js"></script>

4. Tiếp tục chép đọan code CSS vào ngay trên dòng ]]></b:skin>:

#stage{
width:648px;
overflow: auto;
overflow-x:hidden;
overflow-y:hidden;
height:100px;
margin:0 auto;
}

/* ------------------------------------ */
/* List Elements */

#myList{
width:1000px;
border:0;
margin:0;
padding:0;
left:400px;
}

#myList li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:2px;
padding:2px;
background:#ccc;
float:left;
width:100px;
height:100px;
border-left:solid 2px #DEDEDE;
}

#myList li.special{
background:#efefef;
}

/* ------------------------------------ */
/* Buttons */

#slider-buttons{
width:648px;
margin:0 auto;
margin-top:2px;
height:24px;
line-height:24px;
clear:both;
background:#CCCCCC;
}

#slider-buttons a{
font-weight:bold;
color:#444;
}

#slider-buttons a:hover{
background:#888;
color:#FFF;
}

#previous{
float:left;
width:70px;
border-right:solid 1px #FFF;
text-align:center;
}

#next{
float:right;
width:70px;
border-left:solid 1px #FFF;
text-align:center;
}

- Chú ý :

+ width:648px; : độ rộng của vùng hiển thị các tabnews. (để tính kích thước cho phù hợp với các tab con mình sẽ nói ở bên dưới)
+ width:100px;, height:100px; : kích thước của khung tabnews.
+ width:1000px; : độ rộng của tòan bộ (kể cả vùng bị ẩn)vùng chứa các tabnews. Và lưu ý là độ rộng này phải lớn hơn hoặc bằng tổng độ rộng các tabnews.

5. Sau đó save template lại.
6. Tạo một wiget HMTL/Javascript, và chèn code bên dưới vào:

<script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 108;
var maxRightIncrement = increment*(-3);
var fx = new Fx.Style('myList', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});

//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}


})


});
</script>

//-----code HTML
<div id="stage">
<ul id="myList">
<li id="l1">
Tab 1 Content
</li>

<li id="l2">
Tab 2 Content
</li>

<li id="l3" class="special">
Tab 3 Content
</li>

</ul>
</div>
<div id="slider-buttons">
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>

- Chú ý:
☼ Phần code javascript:
+ var increment = 108; : đây là khỏang không gian sẽ bị trượt khi ta nhấp vào buttom (tính bằng pixel), ở đây khỏang không gian trượt sẽ được tính tương ứng với 1 tabnews. Để tính độ rộng này các bạn xem code CSS của thẻ <li> :

#myList li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:2px;
padding:2px;
background:#ccc;
float:left;
width:100px;
height:100px;
border-left:solid 2px #DEDEDE;
}

Nhìn vào hình minh họa ta sẽ tính được độ rộng này sẽ là 108px=100px + 2x2px + 2px + 2px, và từ đây ta sẽ tính được độ rộng của khung hiển thị các tabnews. Như ví dụ của thủ thuật, với 6 tabnews được hiển thị thì động rộng của vùng hiển thị các tab sẽ là : 6x108px = 648px

+ var maxRightIncrement = increment*(-3); : với dòng code này, ta sẽ điều chỉnh tối đa vùng không gian sẽ được hiển thị phía bên phải, tức là việc hiển thị các tab cuối cùng phía bên phải hoặc có thể hiểu là khỏang không gian tối đa bên trái sẽ bị ẩn khi nhấn buttom "Next", và cũng được tính bằng pixel. Ví dụ : muốn ẩn tối đa 4 tabnews ở bên trái, thì ta thay bằng số "-4". Và khi đó sẽ chỉ còn 5 tabnews được hiển thị khi ta không còn nhấn buttom "Next" được nữa. ví dụ như hình dưới:
với lệnh var maxRightIncrement = increment*(-3); ta sẽ có ảnh như bên dưới

với lệnh var maxRightIncrement = increment*(-5); ta sẽ có ảnh như bên dưới


Bây giờ đến code HTML : đọan code màu xanh (class="special") là để làm nổi bật tab đó lên (dạng như tin hot nhất). và tab này sẽ có màu nền khác với các tab khác. xem hình bên dưới:

+ Nếu muốn thêm nhiều tab nữa thì bạn chỉ việc thêm code như bên dưới (đặt code này trước thẻ </ul>)

<li id="l4">
Tab 4 Content
</li>

<li id="l5" >
Tab 5 Content
</li>

7. Cuối cùng save widget là xong.

Chúc các bạn thành công.


Enter your mail address:

13

thuan

hình như cái này em thấy ở 1 số template blogger pro cũng đã có rùi thì phải..nhưng mà chưa biết làm :D

fandung

bài viết này anh viết hơi kĩ, mất 3 tiếng để xong. @@

Viết xong cái ngủ luôn :D

Anonymous from hell

Bài này hay quá ! Em cảm ơn anh ! Em đang định đặt các Widget bài mới nhất theo label phía trên "Blog Post" để tạo ra các bài mới của từng label theo kiểu Wordpress nhưng chưa hiểu làm kiểu gì

fandung

uh, lâu rồi anh mới viết đc 1 bài kĩ đến như vậy.

Hy vọng sau này sẽ còn nhưng bài như vậy :D

Khách (ẩn danh)

bài viết phức tạp wá. chỉ cần xem DEMO của bạn là đủ hiểu gòy. đọc nhiều mệt lắm :D

fandung

Thực ra nếu bạn chỉ xem demo rồi copy code, và sửa độ rộng của khung theo ý mình thì sẽ bị lệch khung khi trượt ngay. Ví dụ : tab thứ 5 sẽ chỉ hiển thị 1/2, còn 1/2 bị ẩn khi bạn trượt...

Do đó mình mới hướng dẫn kĩ vậy.

vu huong

bài viết hay thiệt.anh fandung rảnh ghé thăm blog em nha http://www.vuhuong.com/.em mới làm anh góp ý nha :((

Khách (ẩn danh)

Bài viết đã không còn giá trị với tôi khi host free bạn dùng đã hết hạn.

doanluanvan

cái id đó lấy ntn ạ

LinhBaby

sao em bỏ hình ảnh và chèn link dẫn tới không được hả anh hướng dẫn thêm được không anh fandung

nhat quan nguyen le

hehe

nhat quan nguyen le

hehe

bình dương Land



Bình Dương Land cung cấp các dịch vụ
mua dat binh duong

ky goi nha dat my phuoc


ky goi nha dat binh duong

ky goi dat my phuoc 1,2,3,4



☺ 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