Dự án thiết kế website doanh nghiệp 13

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).

Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu. 

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phần tử trang

   3- Chọn Thêm Tiện ích

   3- Chọn HTML/javrscrip  

   4- Thêm đoạn code sau vào.

<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/effects.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzn9yv_xBo3-5aMZ7pjx33lYOnDXs1HgM1WyyJnuWZW_K5YUG6Cvob4C9jLiDepkB1X_5nK5wA9S8cymqKUAXjQ5q33QmoXIUgvE_BK11eRQ8mYPc_ruRGkameBjCDwlvZ6wbvk1fyu3O/s1600/left.collapse.border-namkna-blogspot-com.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F08dNsu7CN7HrbjtGKW3_U2__iQyPtEzxBzlC4IMzdh5BcN6P2GUucdFW-0VGsnt-vS6Yl0VLijpGXjjhk9y2m3D6yBw6yoesuheHwoGE0YnmkVUFmTs_kiU_ryN_lV_MkdKnRxy6PTQ/s1600/sidebarcollapse-namkna-blogspot-com.png" title="sideBar" /></a>
</div>

Bạn có thể tùy ý điều chỉnh thuộc tính CSS.

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.

Cập nhật thêm một dạng khác.

Tiện ích này cách thực hiện kiểu menu trượt của tác giả Andrew Sellick. Tôi đã có điều chỉnh đôi chút so với bản gốc của tác giả.   
 

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sửa HTML

   3- Đặt toàn bộ phần code dưới đây vào trước thẻ </head>.

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script> 
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li 
a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x_zDdseklzkqjYiM1hhmOxJYXtGBllmHeOAMX-xcRLShgDDbMNODlntyUA1KLzX7U2gR6vXOn5__EU0vRKL47Mr7ppAMsqrl6feQQyHJdw39WACTZjDJXITR38fgOGRVDfzvyP1MwbPI/h120/background-namkna-blogspot-com.png);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>

Bạn có thể tùy ý điều chỉnh thuộc tính CSS.

2. Thiết lập cấu trúc HTML như sau và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>.

<div id="menuBar">
<a href="#" id="menuBarTab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv283hDBzDtttcooG9lhlB9G3fW-7qBXiAZKE0E0qyF3oAewSqge8eOFSVGVFEoKqEQhjXft73nfgs7zS9i4rDieH3QnHigg5d3C4ndrTKxzYWmArAkCcKHSUiqmI_iHQit3Cm2MaF9iku/h120/slide-but-namkna-blogspot-com.gif" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://namkna.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http://namkna.blogspot.com/search/label/Blogspot-tips' title='Thủ thuật Blog'>Blog Spot Tips</a></li>
<li><a href='http://namkna.com/feeds/comments/default' title='Suscribe Comment Feed'>Comment RSS</a></li>
<li><a href='http://namkna.blogspot.com/p/lien-he.html' title='Contact'>Contact</a></li>
</ul>
</div>
</div>
</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.

Chúc thành công!

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   

Phụ trách thiết kế : Mr.Mika 

Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 

Phụ trách kỹ thuật và kinh doanh : Mr. Sơn

Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!