Scriptaculous là một thư viện JavaScript được xây dựng trên Prototype JavaScript Framework, cung cấp các hiệu ứng động trực quan và các thành phần giao diện người dùng thông qua Document Object Model (DOM). Với thủ thuật này giúp bạn thiết kế website chuyên nghiệp hơn.


 
Tiện ích 1: Thủ thuật blogger Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu.

1- Đăng nhập vào Blogger / Blogspot
2- Vào Bố cục
3- Chọn Thêm Tiện ích
4- Chọn HTML/javrscrip  
5- Thêm đoạn code sau vào.
<script src="http://thietkewebplus.googlecode.com/files/prototype.js" type="text/javascript"></script>
<script src="http://thietkewebplus.googlecode.com/files/effects.js" type="text/javascript"></script>
<script src="http://thietkewebplus.googlecode.com/files/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://3.bp.blogspot.com/-8so271fYHRY/Uav0PSgq1LI/AAAAAAAADYQ/hzc-QlGnxlA/s1600/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://2.bp.blogspot.com/-neosHFsb2nw/Uav0PQ6eiGI/AAAAAAAADYU/H4k0jqJWJ0U/s1600/left.collapse.border+2.png" title="sideBar" /></a>
</div>
Lúc này bạn chỉ việc thay đổi các tên menu và liên kết tương ứng trong cấu trúc HTML ở trên là bạn sẽ có một kiểu menu trượt độc đáo rồi đấy. Kiểu menu này có thể được cài đặt dễ dàng cho Blogger.

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công