Hot!

Main Menu and Submenu hiệu ứng mootool đẹp mắt

Thursday, 3 December 2009
Thủ thuật blogspot về menu với hiệu ứng của mootool cực kỳ đẹp mắt được lăng xê bởi [FD's BlOg] - để tạo menu sidebar, có kết hợp sổ dọc menu các menu con, thích hợp cho những ai thích tạo menu ở sidebar. Ngòai ra mở rộng thêm có thể áp dụng cho các widget ở side, khi đó blog sẽ trông rất đẹp và gọn. phattrien@so giới thiệu (marketing thủ thuật này cho menu khi mới comment xin phép được đang lại bài viết bằng comment mà không biết đã được đồng ý hay chưa.



Thủ thuật Menu - Tag cho Blogspot:

► Tạo Tabs menu mouse over cho Blogspot
► Tạo List catalog từ các nhãn cho Blogger
► Tạo menu trượt - Sliding Side cho blogger



Xem demo trực tiếp tại đây :http://fandung.110mb.com/sidebar-Moomenu/index.html
Hình minh họa:

Đầu tiên các bạn chèn code Java và code CSS vào template:
1. Đăng nhập blog
2. Vào bố cục (Lauyout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Chèn code java vào dưới thẻ <head> hoặc trên thẻ </head>


<script type="text/javascript" src="http://fandung.110mb.com/sidebar-Moomenu/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var accordion = new Accordion('h3.menusection', 'div.menusection', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#333333');
toggler.setStyle('background', '#FFFFCC');

},

onBackground: function(toggler, element){
toggler.setStyle('color', '#FFFFFF');
toggler.setStyle('background', '#999999');

}
}, $('accordion'));
});
</script>

- Chú ý:

+ nên up file java http://fandung.110mb.com/sidebar-Moomenu/mootools.svn.js lên host riêng để tránh trường hợp hết bandwidth.
+ có thể sửa các code màu xanh trong code Java trên.(thay các trị màu theo ý bạn)


5. Tiếp tục tìm đến dòng ]]></b:skin> chèn trên nó đọan code CSS bên dưới :

}
ul, li, h3 {
border:0;
padding:0;
margin:0;
list-style:none;
}
h3{
background:#CCCCCC;
padding:4px;
font-size:12px;
color:#999999;
border-bottom:solid 2px #999999;
}

#main-moo{
width:200px;
margin:10px auto;
}
#accordion li{
border-bottom:solid 1px #DEDEDE;
}
#accordion li a{
padding:3px 6px; display:block;
text-decoration:none;
}
#accordion li a:hover{
background:#EFEFEF;}

- Thay các code màu theo ý của bạn.

6. Save template

7. Vào phần tử trang, tạo widget HTML/Javascript, chèn đọan code HTML bên dưới vào :


<div id="main-moo">
<div id="accordion">
<h3 class="toggler menusection">Home</h3>
<div class="element menusection">
<ul>
<li><a href="#1">About FD</a></li>
<li><a href="2">Contact</a></li>
<li><a href="3">RSS</a></li>
<li><a href="4">Help</a></li>
</ul>
</div>

<h3 class="toggler menusection">Blog Tips</h3>
<div class="element menusection">
<ul>
<li><a href="#1">Tips</a></li>
<li><a href="2">Design</a></li>
<li><a href="3">Hack</a></li>
<li><a href="4">Blogger</a></li>
</ul>
</div>


<h3 class="toggler menusection">Web Design</h3>
<div class="element menusection">
<ul>
<li><a href="#1">HTML</a></li>
<li><a href="2">CSS</a></li>
<li><a href="3">Javascript</a></li>
<li><a href="4">Flash</a></li>
</ul>
</div>

</div>
</div>


8. Save lại là xong.


( phattrien@so theo [FD's BlOg] )
Tags: , ,

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn