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
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] )
About Chinhnd
Chào vnpressnet! (Hic, ko biết kiu sao, kiu vầy cho chắc cú ^o^). Vnpressnet có thể chỉ cho mình cách làm sao mà khung comment của bạn trải rộng cả chiều ngang của cột bài viết ko? Thường thì khung comment nó có chút xíu và nằm về 1 phía ah. Thanks bạn trước, mong tin bạn.
ReplyDeleteHướng dẫn điều chỉnh độ rộng khung comment tại địa chỉ http://www.vnpressnet.com/2009/04/huong-dan-ieu-chinh-o-rong-khung.html
ReplyDeleteNgoài ra bạn có thể tham khảo nhiều thủ thuật tại http://www.vnpressnet.com/2009/05/danh-sach-thu-thuat-cho-blogger.html
Thanks bạn nhiều, mình đã làm được. Nhưng cho mình hỏi, khi mình là như vậy thì khung comment rộng ra theo yêu cầu rồi nhưng phần chữ trước khung thì vẫn ko giãn ra như của bạn! Tại sao vậy? CHỉ giúp mình nha.
ReplyDeleteHic! Sao ko ai trả lời câu hỏi của mình vậy ta?
ReplyDeleteco ai co code lam menu so ngang va doc khong ?
ReplyDeletechi tui voi.cam on nha
ai co code menu giong cua trang vnpressnet.com nay không vậy?chi voi.
ReplyDeletebạn tham khảo bài hướng dẫn tại http://www.vnblognet.com/2009/12/tao-tabs-menu-mouse-over-giong.html
ReplyDelete