Home » Archives for 05/08/09
Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio
22:06 |
[FD's BlOg] - Một ứng dụng cho phép bạn hiển thị một field nào đó khi nhấp chọn vào một buttom radio đã được định sẵn. Dùng nhiều trong thiết kế contact form.Xem demo ở đây : http://fandung.110mb.com/hide-show-email-field/show-radio.html
Dưới đây là minh họa về khung xác nhận mail
Hình minh họa:
Nhấp vào nút Yes thì field điền mail sẽ hiển thị, như hình bên dưới:
Code HTML:
<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" checked="checked" /><label for="newsletter-2">No</label>
<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>
Code Javascript:
<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>
Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
20:36 |
[FD's BlOg] - Bài viết hôm nay mình xin được giới thiệu một style khác trong menu dạng phân cấp. Đó là menu sổ 1 hàng ngang, kèm theo hiệu ứng đóng mở menu con khi click chuột.Xem trực tiếp demo ở đây : http://fandung.110mb.com/FD-glassNav/index.html
Xem hình minh họa:
Như các menu khác, menu này cũng gồm 3 phần : Code Java, code CSS, và code HTML
Trước tiên bạn download gói hình ảnh này về : FD-img.rar rồi up lên host lấy link để dùng cho code CSS.
Bây giờ ta bắt đầu chèn code java và code CSS vào template:
1. Đăng nhập blog
2. Vào Bố cục(Layout)
3. Vào Chỉnh sửa code HTML (Edit code HTML)
4. Chèn code Javascript vào dưới dòng <head> (hoặc trên dòng </head>)
<script type="text/javascript" src="http://fandung.110mb.com/FD-glassNav/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('load', function(){
$('sublinks').getElements('ul').setStyle('display', 'none');
$('s1_m').setStyle('display', 'block');
$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){
var layer = subLinkId+"_m";
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)
);
});
// --------------------------------------- //
// SHOW and HIDE Submenu with animation
var mySlide = new Fx.Slide('sublinks');
$('op1').addEvent('click', function(e){
var textLink = $('op1').innerHTML;
if(textLink=='Hide submenu'){
$('op1').innerHTML='Display submenu';
} else {
$('op1').innerHTML='Hide submenu';
}
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
- Chú ý: nên down file http://fandung.110mb.com/FD-glassNav/mootools.svn.js về host riêng của mình, để tránh hết bandwidth.
5. Tiếp tục tìm đến dòng ]]></b:skin> và chèn code CSS bên dưới lên trên nó:
/* ----------- NAVIGATION----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation .right_link{
float:right;
font-size:11px;
line-height:32px;
margin:0 10px;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#000000;
font-weight:bold;
}
#navigation ul li a:hover{
color:#FFFFFF;
background:#A5A5A5;
}
/* ----------- SUBLINKS ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
6. Save template.
7. Vào phần tử trang, tạo 1 widget HTML/Javascript và dán code HTML bên dưới vào:
<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Blog Tips</a></li>
<li id="s3"><a href="#">Web Design</a></li>
<li id="s4"><a href="#">FanDung</a></li>
</ul>
</div>
<div id="sublinks">
<ul id="s1_m">
<li><a href="#">Blog Tips</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Javascript</a></li>
</ul>
<ul id="s2_m">
<li><a href="#">Blogger</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Code HTML</a></li>
<li><a href="#">Scrpit</a></li>
</ul>
<ul id="s3_m">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javacsript</a></li>
</ul>
<ul id="s4_m">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
8. Save lại. Như vậy đã xong.
Chúc các bạn thành công.
Bộ sưu tập 31 style menu nằm ngang
09:51 |
[FD's BlOg] - Hôm nay mình xin giới thiệu với các bạn 31 style menu CSS nằm ngang cho blog. Bài viết này mình sẽ không hướng dẫn chi tiết cách tạo các menu, mà chỉ giới thiệu các style.- Các bạn có thể tham khảo chi tiết cách tạo menu nằm ngang tại đây (có kèm hiệu ứng sổ dọc).
Đầu tiên các bạn download gói dữ liệu này về: FD-BlOg_menuCSS.rar
- Sau khi down về, bạn giải nén ra, ta sẽ có 31 Folder tương ứng với 31 style Menu.
- Mở 1 folder bất kì trong 31 folder ta sẽ có 2 file (style.css và index.html) và 1 folder (imgages), như hình bên dưới:
- File style.css sẽ chứa code CSS của menu, nhấp đúp để mở file (mở bằng NotePad), rồi copy đọan code CSS đó dán vào code template blog. Mở file ra nó trông giống như bên dưới:
- Tiếp đến là code HTML của menu, 31 style này đều có code HTML hòan tòan tương tự nhau, (xem mẫu bên dưới)
<div id="tabs1">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Link 4"><span>Link 4</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
- Chú ý: thay đổi code màu xanh cho đúng với id trong code CSS của style mà bạn chọn, như trên code mẫu là của style 1
☼Dưới đây là hình minh họa cho các 31 menu
menu 1  menu 2  menu 3  menu 4  menu 5  menu 6  menu 7  menu 8  menu 9  menu 10  menu 11  menu 12  menu 13  menu 14  menu 15  menu 16  | menu 17  menu 18  menu 19  menu 20  menu 21  menu 22  menu 23  menu 24  menu 25  menu 26  menu 27  menu 28  menu 29  menu 30  menu 31  |
Chúc các bạn thành công.
Side menu : Hiệu ứng động (một ứng dụng của mootools)
06:56 |
[FD's BlOg] - Bài viết hôm nay mình sẽ bổ xung tiếp vào kho style menu sidebar, một menu động, khá lạ mắt. Thủ thuật này lại sử dụng mootools để tạo hiệu ứng.Các bạn có thể xem demo ở đây : http://data.fandung.com/blog/demo/elasticmenu/index.html .
Hình minh họa:
☼Bắt đầu:
- Đăng nhập blog
- Vào bố cục (Layout)
- Vào chỉnh sửa code HTML (Edit code HTML)
1. Trước tiên chèn đọan code java bên dưới vào ngay sau dòng <head>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/elasticmenu/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#menu li').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
var fxopacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0,100);
fxopacity.start(0.5);
},
'mouseleave' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0);
fxopacity.start(1);
}
});
})
});
</script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#menu li').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
var fxopacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0,100);
fxopacity.start(0.5);
},
'mouseleave' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0);
fxopacity.start(1);
}
});
})
});
</script>
2. Chèn đọan code CSS lên trên dòng ]]></b:skin>
a:link, a:visited, a:hover{color:#0066CC}
#menu{}
#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{
display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
3. Save template lại.
4. Vào phần tử trang
5. Tạo một widget HTML/Javascript, và điền đọan code HTML bên dưới vào:
<ul id="menu">
<li id="l1"><a href="#">Home</a></li>
<li id="l2"><a href="#">My Profile</a></li>
<li id="l3"><a href="#">CSS</a></li>
<li id="l4"><a href="#">FD' BlOg</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul>
- Chú ý: thay code màu xanh lại theo đúng như của bạn.
6. Save lại là xong.
Chúc các bạn thành công.
Tiện ích : Hiển thị bài viết có nhiều comment nhất
01:40 |Popular Posts Widget
[FD's BlOg] - Để tăng lượng truy cập cho blog bạn thì tiện ích hiển thị "Những bài viết sôi nồi nhất"(bài viết có nhiều comment nhất) là 1 công cụ khá hữ ích.Xem hình minh họa kết quả bên dưới:
Để chèn tiện ích này vào blog, rất đơn giản, bạn hãy truy cập vào địa chỉ này :
http://data.fandung.com/blog/html/Popular-Posts-Widget/index.html
Sẽ xuất hiện như hình bên dưới:
Tiếp đó bạn điền địa chỉ URL của blog bạn. Rồi nhấn Customize - rồi nhấn Add to Blog, sau đó nó sẽ chuyển bạn đến 1 trang khác, nhấn thêm tiện ích là xong. ( như bên dưới)
Chúc các bạn thành công.
Top Hot
