RSS Posts 
[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.
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
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
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ì
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
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
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.
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 :((
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.
cái id đó lấy ntn ạ
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
hehe
hehe
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
smm panel
smm panel
İS İLANLARİ BLOG
İnstagram Takipçi Satın Al
HİRDAVATCİ
https://www.beyazesyateknikservisi.com.tr/
Servis
Jeton hile indir
» Nội dung phải liên quan tới chủ đề bài viết.
»
[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.