A few days ago, my friend Wizurai asked kang rohman to giving tutorial how to create menu in his blog, because there were many friends who wanted to know how to make such menu. Okay, kang rohman is giving the tutorial now. The Menu found in the my friend Wizurai ‘s blog is called Dynamic-FX Slide-In Menu (v 6.5), The original source code and the sample of that menu can be seen at dynamicdrive.com. Why Dynamic-FX Slide-In Menu (v 6.5) is unique? Because the menu or navigation is hidden in the left side of the monitor screen, and we can see only the bar menu, but when it is pointed by the computer mouse then the menu will appear. The most interesting thing is how that menu will move according to the scrolling movement, so that it will always be seen at the left of the monitor screen.
If you are interested in making that kind of menu in your blog, you can follow the tutorial written below:
Please download first the source codes that will be used later. Click the image below:
After you have downloaded the file, you should have extracted it in a zip file (winzip, winrar)
When the file had been extracted, it will produce two java script files as we can see on the above illustration The two java files have the names ssm.js and ssmItems.js . Before you upload those files to the file server, you must edit first the ssmItems.js file, that is to replace the existing links with the links you wanted to save in that menu. How to edit that file? Here you have to use notepad. The steps are as follow:
- Click the right button of the mouse on the file named ssmItems.js, choose open with, and then choose notepad, because we use the notepad software.
- After this first step, you will see the file like this :
<!-- /* 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"; linkOverBGColor="#FFFF99"; linkTarget="_top"; linkAlign="Left"; barBGColor="#444444"; 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]=["Home", "http://www.blogspottutorial.com", ""] ssmItems[2]=["Free Template", "http://www.blogspottutorial.com/search/label/free%20template",""] ssmItems[3]=["Top Download", "http://www.blogspottutorial.com/2008/05/magazine-template-1.html", ""] ssmItems[4]=["SEO Ebook", "http://www.blogspottutorial.com/2008/05/free-seo-ebook-search-engine.html", "_new"] ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""] ssmItems[6]=["Link to Us", "http://www.blogspottutorial.com", ""] ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row ssmItems[8]=["Email", "#nogo", "",1] ssmItems[9]=["External Links", "", ""] //create header ssmItems[10]=["Blog Kang Rohman", "http://kolom-tutorial.blogspot.com", ""] ssmItems[11]=["Kang Rohman Dot Com", "http://kangrohman.com", ""] ssmItems[12]=["Unique Template", "http://template-unik.blogspot.com", ""] buildMenu(); //—>
Principally, the above codes are used to manage the appearance of Dynamic-FX Slide-In Menu (v 6.5) , such as letter colors, background colors, letter forms, letter sizes, etc. However, due to the time constraint, kang rohman will only describe how to replace the menu and existing link with the link you wanted to install in this menu. To simplify the editing process, kang rohman made the color differences for the above codes, such as green, blue, and red color. The green letters writing of SIDE MENU will appear on the bar menu. You can change this as you like, for example MY MENU, NAVIGATION, ETC. The blue letters writing is the link that will appear on that menu. You can also change this writing as you want, such as Home or Front Page, etc.
This blue writing will be in pair with the red writing which located next to it. The red writing is the link target you wanted, for example: if you click the writing of Home, you will come to the page of http://www.blogspottutorial.com. Therefore the address of http://www.blogspottutorial.com should have been changed with the address you wanted. I think that you have understood.
After you have edited the above codes, the next step is to save the file. The procedures of the file saving is to click first the existing file in the bar menu, then click Save. After you have already finished with all of the steps written above, the next step is to upload the both of java files to the server. The easier way is to upload the file to the Google pages. Did you know how to upload the file to the Google pages? Hihihi..... I like to suggest you to read first my article here! If you have uploaded the files, please don’t forget to copy URL address of the files.
Now we can start to practice the above procedures. You can just do the following steps:
- Please login to blogger with your ID.
- Click Lay Out.
- Click Edit HTML.
- Copy and paste the next codes over the </head> code
<style type="text/css"> <!-- 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://kangrohman.googlepages.com/ssm.js" language="JavaScript1.2"> //Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/) //Updated July 8th, 03' for doctype bug //For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com </SCRIPT> <SCRIPT SRC="http://kangrohman.googlepages.com/ssmItems.js" language="JavaScript1.2"></SCRIPT>
- Change the red codes with your option codes (in the uploaded files).
- Click the SAVE TEMPLATE button.
- Finish. Please look at the result.
Wow…..you can do it!
Congratulation!
No comments:
Post a Comment