(Traidatmui.com) – Làm sao để tạo nên các thư mục mà không làm mất nhiều khong gian trên nền của blog, vâng hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật để tạo nên các thư mục và cho nó trượt ở bên lề của blog. Đó là chúng ta tạo ra một side menu (menu phụ) và cho nó hiện ra chỉ khi nào click chuột vào nó. Ứng dụng menu này sẽ tiết kiệm được không gian cho blog vừa mang tính chuyên nghiệp.

Các bước tiến hành

1. Đăng nhập vào blog
2. Vào chỉnh sử HTML
3. Dán code bên dưới lên trước thẻ </head> và save lại
<script language='JavaScript1.2' src='http://data-traidatmui.appspot.com/scripts/side_menu.js'>
</script>

4. Vào phần tử trang tạo 1 HTML/Javascript
5. Chèn toàn bộ code bên dưới vào HTML/Javascript đó
<style type="text/css">

A.ssmItems:link {color:#33ffcc;text-decoration:none;}
A.ssmItems:hover {color:#000033;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:#ccffff;text-decoration:none;}

</style>

<script language="JavaScript">

YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor="#fff"; // màu của các border
menuIsStatic="yes";
menuWidth=200; // Độ rộng của menu
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#fff"; // Màu text của thư mục chính 
hdrBGColor="#000099"; // Màu nền thư mục chính
hdrAlign="center";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="#006699"; // Màu nền chính
linkOverBGColor="#fff"; // Màu nền khi rê chuột
linkTarget="_top";
linkAlign="Left";
barBGColor="#ff0000";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#fff";
barVAlign="center";
barWidth=20;
barText="SIDE MENU"; // Tên bạn muốn đặt cho sidemenu đó

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

ssmItems[0]=["Thủ thuật"] // Thư mục chính
ssmItems[1]=["Thủ thuật nâng cao", "http://nvdinh88.blogspot.com/search/label/Advanced%20blogger?max-results=5", ""]
ssmItems[2]=["Thủ thuật cơ bản", "http://nvdinh88.blogspot.com/search/label/Basic%20blogger?max-results=5",""]
ssmItems[3]=["Computer", "http://nvdinh88.blogspot.com/search/label/Computer?max-results=5", ""]

ssmItems[4]=["Giải trí", "", ""] // Thư mục chính
ssmItems[5]=["Karaoke", "http://nvdinh88.blogspot.com/search/label/Karaoke", ""]
ssmItems[6]=["Videos", "http://nvdinh88.blogspot.com/search/label/Video", "", 1,"no"]
ssmItems[7]=["Chơi game", "http://nvdinh88.blogspot.com/2010/02/play-game.html", "", 1]

ssmItems[8]=["Liên kết", "", ""] // Thư mục chính
ssmItems[9]=["Trao đổi logo", "http://nvdinh88.blogspot.com/2010/02/trao-oi-logo-lien-ket.html", ""]
ssmItems[10]=["Hỏi đáp", "http://nvdinh88.blogspot.com/2010/02/hoi-ap.html", ""]

buildMenu();
</script>

☼ Chỉnh sủa code: Bạn hãy dựa vào các chú thích ở trên để chỉnh sửa code lại cho phù hợp với blog của bạn.
- Thay các code màu cam và các code màu đỏ lại thành tên các thư mục và các đường dẫn cho phù hợp.

Lưu ý: code màu xanh ở trên là dùng để chia cột nếu không muốn chia cột bạn có thể xóa nó đi. Nếu bạn muốn chia cột thì thêm ", 1,"no"" và ", 1" vào sau hai link mà bạn muốn chia cột. Ví dụ ở trên chia cột cho "Videos" và "Chơi game" thì ta thêm 2 lệnh đó như trên.

Chúc bạn thành công

Địa chỉ bài viết: http://www.traidatmui.com/2010/04/tao-sidemenu-truot.html#ixzz45kgbXLCk
Nguồn: TRAIDATMUI.com