Fixed side menu for blogger blogspot or some says it as fixed slide in menu for blogger as was seen only in wordpress but now can be used in bloggers also.As you could see it in my blog i have side menu that moves together with you scroll movement up and down on my blog.I am sharing this with you because many of my readers were asking how to make it as they liked it much and wanted to add it to there blogs so if you liked side menu in my blog you can go further to install it in your blog too.
For Demo Of Side Menu Visit for Here:-Blogger Widgets
First Download this zip file and you will get these two files to your computer.
ssm.js
ssmItems.js
Now open the ssmItems.js file in notepad
After opening it in notepad you will see the codes like written below.
/*
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://anshuldudeja.blogspot.com”, “”]
ssmItems[2]=[“Blogger Widgets”, “http://anshuldudeja.blogspot.com/search/label/Blogger%20Widget”,””]
ssmItems[3]=[“Blogger Hacks”, “http:///anshuldudeja.blogspot.com/search/label/Blogger%20Hack”, “”]
ssmItems[4]=[“Blogger Tutorials”, “http://anshuldudeja.blogspot.com/search/label/Blogger%20Tutorial”, “_new”]
ssmItems[5]=[“Blogger Templates”, “http://anshuldudeja.blogspot.com/search/label/Blogger%20Templates”, “”]
ssmItems[6]=[“Contact”, “http://anshuldudeja.blogspot.com/2008/11/contact-us.html”, “”]
ssmItems[7]=[“FAQ”, “#nogo”, “”, 1, “no”] //create two column row
ssmItems[8]=[“Email”, “#nogo”, “”,1]
ssmItems[9]=[“External Links”, “”, “”] //create header
ssmItems[10]=[“Online Jobs”, “http://earnwithbloggers.blogspot.com”, “”]
ssmItems[11]=[“Funny Blog”, “http://funny-concepts.blogspot.com”, “”]
ssmItems[12]=[“Earn Money”, “http://ezinfocenter.com/10142921/CB”, “”]
buildMenu();
//–>
Now just edit the the links in red in codes to place your own link which you want to display and text in blue which you want to show up the title for that link.
After editing all these links just save the file.
Now upload both files ssm.js and ssmItems.js to your own server like on geocities or sigmirror dot com,don’t use mine as will not work due to exceeded bandwidth.
Now GO To LAYOUT > EDIT HTML
and find the </head> tag and place the below codes before it.
<!–
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://www.geocities.com/anshrailoves/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://www.geocities.com/anshrailoves/ssmItems.js” language=”JavaScript1.2″></SCRIPT>
And don’t forget to change the links in red above with the links of yours where your ssm.js and ssmItems.js file are uploaded to your own server.
And now SAVE It.
Yup you have just Done now. View your blog. If you have any problem please write below in comments i will help you out.I think you will enjoy this widget for sure.
All css codes taken from dynamicdrive
I love the side menu that you have on your blog. It is unique, I have never seen it on any other blog but yours. Let me try to follow the step by step instructions that you have given here, but then I dont have good categories like you I hope that wont matter.
Really Good!!
Thanks Dude!!
hi, the side menu is really cool. I am reading through the steps but i can’t understand or know how to upload the files to “my own server” after editing it.
can you elaborate on this for me. and also i am having issues installing the comment form below my post, it appears for quick second then it goes away. so i reverted it to the old one. pls.
Just host the .js files to googlepages if you dont have account then make account on geocities.com and host there.
And comment form is difficult to say without working it out.
how can i actually upload the files to host in http://sites.google.com? thanks for your help.
I think I got it. =)
I don’t know why I am not allowed to upload .js file to the site. Is there any other way?
great tut, thx so much 🙂
is there any other way to add this without uplaoding that file?
I want to change the name "Side menu"
& want to add just single link
Hi, your guidance is a real asset to my blog…well, i tried using this side menu in my blog(minima black is my template)…thou even after following all the instructions, i cannot see any side menu in my blog…is it because of the color of the template i use…please help me out..
@Ab
remove all links from codes in tutorials and keep only first link.
Edit ssm.js file in codes to change the name side menu
@kavitha
you had made some mistake please try it and execute again carefully.Its not due to black color of the template
Hello!
Well at first I would like to thank you for sharing that kind of knowledge with everyone. You are most helpful.
As far as this…”Hack” is concerned it worked really good. However I faced an obstacle that I could not overcome concerning the Language. I want ti use Greek language on my Side-bar Menu, but instead of letters, it keeps showing black Rhombus with a question mark inside.
Could you please help me?
Thank you in advance
PS. I have tried ypur “Horizontal Navigation Menu links” and they work fine with Greek letters.
@ ducame It will be great if possible you can show me demo of problem then it will be easy to solve it accurately.
How can I do that?
The blog is already on use.
Do I have to create another “demo-blog” and send you the address?
Even so, what if the problem is on the ssm or the ssmItems file?
Could you please be more specific in what I should do for you to help me?
Until that time here are the 3 “code paragraphs” (sorry I am not a programmer, so I don’t know the terms) that I have used:
1. http://www.sigmirror.com/files/18549_bvq94/ssmItems.js
2. The ssm I used it as it was (I uploaded on sigmirror server too)
3. http://www.sigmirror.com/files/18688_6wqei/In%20Code.txt
I hope these will help.
If not please let me know.
Thank you very much for your concern.
Its ok but actually i wanna see which words you are saying and wanna see that live on blog and then tell you will it can be solvd or not.Just show me blog having side menu and tell me what problem you wanna solve.
Well, here it is:
http://apollonastest.blogspot.com/
I created a test blog for you.
Sorry I haven’t thought of it earlier.
The links in the side-menu are working fine (They are links to the real blog). However you cannot read anything but english characters.
There must be something that I can do about it.
Please…
Thank you once more.
ya i checked your problem,go to google.translate.com ,there translate your blog from greeek to english.it will convert only some words to english it not supporting all your character ,same as in menu supporting some words..that might be problem as when i use your codes it doesn’t support any word n my test blog.
ya, i tried it..but the side menu is floating like a fish..its hard to click on the menu..?
@has show us how its working cant say until see it.
I can't download the zip files!!!
@haley try agin i downloaded it its working..