Tạo sidemenu trượt trên blog

Điểm 4.6/5 dựa vào 87 đánh giá

(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" "Chơi game" thì ta thêm 2 lệnh đó như trên.

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

Loading...

7 nhận xét

  1. Em đã có code tạo form đăng nhập rồi nhưng nếu Em muốn cho nút đăng nhập đấy vào menu ví dụ như cái menu này thì làm thế nào hả anh.?

    Trả lờiXóa
  2. Menu này em chỉ có thể chèn link thôi không thể chèn thêm code được em c:o

    Trả lờiXóa
  3. Bạn có thể chỉ mình ở bước 5 là ko cần tạo trang HTML/Javascript mà mình muốn đưa code vào HTML luôn được ko bạn, cám ơn bạn nhiều.

    Trả lờiXóa
  4. @ CĐQTKD5A: Nếu bạn muốn cho code vào template bạn có thể chèn code bước 5 vào ngay sau thẻ <body>

    Trả lờiXóa
  5. anh ơi sao js khong ton tai vay? link bi die rui thi fai

    Trả lờiXóa
  6. Bạn ah, sao mình tạo hơn ssmItems[50]= thì không hiển thị được? Bạn giúp giùm mình nhé

    Trả lờiXóa