Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Fixed Side Menu For Blogger

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 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://riteshsanap4u.blogspot.com“, “”]
ssmItems[2]=[“Blogger Widgets“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“,””]
ssmItems[3]=[“Blogger Hacks“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “”]
ssmItems[4]=[“Blogger Tutorials“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “_new”]
ssmItems[5]=[“Grab This Menu Here”, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “”]
ssmItems[6]=[“Contact“, “http://riteshsanap4u.blogspot.com/“, “”]


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“, “#“, “”]
ssmItems[11]=[“Funny Blog“, “#“, “”]
ssmItems[12]=[“Earn Money“, “#“, “”]


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.

Now GO To LAYOUT > EDIT HTML
and find the </head> tag and place the below codes before it.

<!–SLIDE MENU–>
<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://riteshsanap4u.googlepages.com/ssm.js‘ language=’JavaScript1.2’>
//Dynamic-FX slide in menu v6.5 (By maXimus,
//Updated July 8th, 03&#39; for doctype bug
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC=’http://riteshsanap4u.googlepages.com/ssmItems.js‘ language=’JavaScript1.2’/>
<!–SLIDE MENU END–>


And don’t forget to change the links in red above with the links of yours where ssm.js and ssmItems.js file is 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.

Subscribe via Email

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

March 19, 2009 Ritesh Sanap Blogger Tutorials Blogger Hacks, Tutorials

Comments

  1. Ritesh Sanap says

    July 21, 2010 at 3:16 pm

    @MAYANK
    See the chrome browser is new so some times chrome is unable to read some Java scripts i have also experienced this with many Java scripts that's why i have again switched to Firefox.

    Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Add Button ‘Save Blogger Post As Pdf’ Blogger
Next Next post: Submit To All Social Bookmarking Websites At Once

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

Folder Background Images in WinXP

April 13, 2009 By Ritesh Sanap Leave a Comment

NOTEPAD “world trade centre trick”.

January 16, 2008 By Ritesh Sanap Leave a Comment

How to Change the Welcome/Login Screen in Windows XP ?

August 30, 2008 By Ritesh Sanap 8 Comments

How To Make Any Firefox Add-on Compatible with All Versions

March 21, 2009 By Ritesh Sanap Leave a Comment

How to add back to top button

March 2, 2009 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2025 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean