Tạo thanh tin tức (Hot News) dạng tab - trượt ngang cho blog (Mootools)
Thứ Tư, 20 tháng 5, 2009
[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.+ 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>
Chúc các bạn thành công.
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- [ Yêu cầu ] : Tạo thanh HotNews cho blog (sử dụng mootools)
- Menu sidebar (Main Menu and Submenu) hiệu ứng cực cool - Mootools effect
- Side menu : Hiệu ứng động (một ứng dụng của mootools)
- Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools
- Thu gọn, Mở rộng Tab dữ liệu (tabs có bo góc) - Sử dụng CSS kết hợp hiệu ứng của Mootools
- Tạo Top panel nội dụng trượt lên xuống
Comments[ 0 ]
Đăng nhận xét