Tạo menu trượt - Sliding Side cho blogger

Chắc các bạn đã từng nghe nói đến Menu trượt bên cạnh (Sliding side menu). Về cơ bản đó là một menu dạng trượt được ẩn nội dung chỉ hiện trên màn hình tên menu mà thôi, khi bạn trỏ chuột tới thanh menu này thì nội dung sẽ trượt ra để bạn chọn lựa. Như bạn thấy trong hình minh họa dưới của phattrien@so :

Hình bên trái là vị trí thông thường của menu trượt sliding side, sau khi trỏ chuột vào vị trí menu thì nội dung menu sẽ hiện ra như hình bên phải.

Để xem ví dụ thực tế tiện ích này, bạn click vào link: Dark Wooden Template

Giờ đây khi bạn đã thấy có ấn tượng với tiện ích này và muốn thưc hiện để tạo cho blog của bạn một menu trượt Sliding side thì hãy bắt tay thực hiện theo các hướng dẫn dưới đây.

1. Download 2 file javascript dưới đây (Click chuột phải và "Save Link/Target As"):
ssm.js
ssmItems.js

2. Mở file (ssmItems.js) bằng note/text pad, nội dung giống như dưới và chỉnh sửa lại chúng như sau :

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white"; //White color behind links
linkOverBGColor="#FFFF99"; //Blue Color Behind Menu and External Links
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444"; //Gray color behind Side Menu
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

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

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

ssmItems[0]=["Menu"] //create header

ssmItems[1]=["BloggerStop", "http://bloggerstop.net", ""]

ssmItems[2]=["Contact Us", "http://bloggerstop.net/2008/09/contact-us.html",""]

ssmItems[3]=["Earn Money", "http://join-ziddu.co.cc/", ""]

ssmItems[4]=["Cheap Domain", "http://main.bloggerstop.net/contests/1and1/1and1.html", "_new"]

ssmItems[5]=["Blogger Templates", "http://bloggerstop.net/2008/09/blogger-help-free-blogger-templates.html", ""]

ssmItems[6]=["Blogger Help", "http://bloggerstop.net/2008/09/blogger-help.html", ""]

ssmItems[7]=["FAQ", "http://any_FAQ_PAGE", "", 1, "no"] //create two column row

ssmItems[8]=["Email", "http://Your_Email_Add", "",1]

ssmItems[9]=["External Links", "", ""] //create header

ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]

ssmItems[11]=["Gallery", "http://gallery.main.bloggerstop.net/image1.htm", ""]

ssmItems[12]=["Reviews", "http://review-the-web.blogspot.com", ""]

buildMenu();
XANH
//—>

Thay đổi các thông tin code màu ĐỎ, XANH LÁ CÂY và tùy thuộc vào yêu cầu của bạn .
Các code thể hiện bằng màu tía là các chú thích, bạn có thể tùy chỉnh chúng để thay đổi màu nền background.

Sau khi đã tùy chỉnh xong các bạn hãy lưu chúng lại.

3. Upload file đã chỉnh sủa lên HotLinkFiles.com (Bạn cần đăng ký trang này miễn phí để upload file và lấy đường link trực tiếp).

4. Copy lại các đường link trực tiếp của 2 flie này.

5. Cuối cùng bạn hãy thay đổi đường link (màu đỏ) ở trong đoạn mã dưới bằng các link mà bạn đã upload và lấy đường link trực tiếp từ HotLinkFiles.com

<!--SIDE-MENU-STARTS-->
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT SRC='http://......HotLinkFiles.com...../ssm.js' language='JavaScript1.2'>

//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC='http://......HotLinkFiles.com...../ssmItems.js' language='JavaScript1.2'/>
<!--SIDE-MENU-STOPS—>

6. Truy cập vào Blogger, vào Layout -> Edit HTML, và tìm kiếm (CTRL+F) mã sau:

</head>

và dán code (bước 5) vào trên nó.

Như vậy bạn đã thực hiện xong cá bước để tạo một menu sliding side cho blog của mình, giờ bạn hãy Save và xem thành quả đã thực hiện.

Tiện ích trên được cung cấp bởi DynamicDrive và được điều chỉnh bởi Blogerstop. phattrien@so chỉ là người thực hành và dịch để các bạn tham khảo.

Nếu thấy ưng ý với thủ thuật trên, rất mong các bạn nhận xét động viên khích lệ người biên dịch hoặc click vào các quảng cáo nếu có các sản phẩm phù hợp với nhu cầu của bạn.

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.