How to install the floating Side Menu scroll?

It is rare that this floating utility Side Menu is found at Blogs.

The floating Side Menu is one of many solutions for Blog owners to reduce the overweight Blog. As you could have seen at this Blog, the Side Menu is unobtrusive and most importantly, it neatly contains links that would otherwise have taken up more space and lengthens the Blog needlessly.

At my other Post, I suggested a solution on how to maintain the length of the Blog such that the length of the Post and the length of the Side Bar/s would be of equal lengths.

For those who may wish to take advantage of this impressive Side Menu and may want to give their Blog an oomph by looking more organised, I shall do my best to explain how it is done.

Where to get the Side Menu script?

Visit Dynamic Drive website. Here is the link -

http://www.dynamicdrive.com/

At Dynamic Drive homepage, listed under “Script Categories”, select Menus and Navigation. At the Menus and Navigation webpage, select Dynamic-Fx Slide-In Menu.

Work now begins

You are now at the Dynamic-Fx Slide-In Menu webpage. The first thing that you will need to do is to download the menu.zip file as instructed at the webpage. Remember where you have download saved the menu.zip file in your Computer.

Unzip the downloaded file and extract its contents (which are two .js files) in your Computer. Again remember in which Folder you have extracted the two files to be saved.

The two .js files

1. ssm.js
No modification is required to be done to this file.

2. ssmItems.js
You will have to modify this file. To modify the contents of this file, use Notepad to open the file.

You will need to make alterations to this file and to configure it to suit the needs of your Blog would basically touch on this section of the file.


// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]
ssmItems[2]=["What's New", "http://www.dynamicdrive.com/new.htm",""]
ssmItems[3]=["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""]
ssmItems[4]=["Message Forum", "http://www.codingforums.com", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.dynamicdrive.com/link.htm", ""]
ssmItems[7]=["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://www.dynamicdrive.com/contact.htm", "",1]
ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]
ssmItems[11]=["Freewarejava", "http://www.freewarejava.com", ""]
ssmItems[12]=["Coding Forums", "http://www.codingforums.com", ""]


Prior to making modification to the section of this file, you should have an idea of what kind of links you intend to have the Side Menu to contain. Having decided on what links are going to be placed inside the Side Menu, you should proceed to modify the number of items, the Titles and the URL link.

For example:

ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]

would be changed to the following if you intend to include a link to Windmill of my Mind.

ssmItems[1]=["Windmill of my Mind", "http://circlesinaspiral.blogspot.com", ""]

Remember to renumber your ssmItems sequentially if your have reduced or increased the items. After you have completed the configuration of the ssmItems.js file, save it.

Uploading the two .js files

These two .js files MUST be uploaded to a third party free service Server for the Side Menu to work as it is intended.

Where to upload?

If you have a Server or you have an account with a Server provider, you need to upload these two .js files to that location.

If you do not have a Server or a Server provider account, you may upload these two .js files at Googles Page Creator. The link to Googles Page Creator is :

https://www.google.com/accounts/ServiceLogin?service=pages&continue=
http%3A%2F%2Fpages.google.com%2F&ltmpl=yessignups

Register an account with Google Pages. Then upload these two files from your Computer to your Google Page Account.

Once the upload is completed, click on each file that is stored at Googles Pages in order to get the URL for each file. Copy and save the URL from your Browser to your Notepad.

Work needed to be done to your Blog Template

You are almost there. Your Blog Template needs to be configured.

(Important! As a precaution, it is always advised that for Recovery purpose, the Template is downloaded to your Computer before any modification is done to the Template.)

Log in to your Blog. At the Dashboard select Layout and choose to Edit HTML.

The script given below is taken the Dynamic-Fx Slide-In Menu webpage. This script will need to entered below the [head] tag in the Blog template.

The script is repeated here to explain where you must enter the URL details for both the .js files that are stored at Googles Pages.

After the URL information is typed in, the entire script is to be entered into the Blog template. Once again, remember to enter the script between the [head] and the
[/head] tags in the Blog template.

Owing to the sensitivity of Blogger’s Post, no HTML codes are allowed in the Post Editor. Hence, wherever you see HTML commands encapsulated with [], please replace them with before copying the script to your Blog’s template.

++++++++++++++++++++++++++++++++++++++

[SCRIPT SRC="enter the URL where your ssm.js file is uploaded" 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="enter the URL where your ssmItems.js file is uploaded" language="JavaScript1.2">[/SCRIPT]

++++++++++++++++++++++++++++++++++++++

Save the Template once the copy and paste is done.

You are now one step away

If you have come this far and without having faced any problems, you only need now to click on View Blog to see the Side Menu displayed on your Blog page.

Last mention

I have written these steps in accordance to how I installed the Side Menu at my Blog. Obviously, it works and it worked right the first time that I had it done. So, I do not expect any problems assuming that you are working with the same evironment as I am which is:

• You are using Blogger.
• Your Browser conforms to Dynamic-Fx Slide-In Menu webpage compatibilty.
• You have not made any other tweaks to the ssmItem.js file other than what I mentioned.

This article is submitted on the basis of Errors and Omissions Excepted. I shall update this Article if I notice anything important has been inadvertently missed out.

Happy Side Menu’ing!

Addendum (Mar20)

If you may wonder why the floating Side Menu is not displayed any longer at my Blog, the reason is I had to make a choice between having the floating Side Menu or the Dropdown horizontal menu that I installed today (Mar 20) and you may have already noticed.

The floating Side Menu for reasons that only a Programmer would understand, it was not compatible with the Dropdown horizontal menu at my Blog. The effect was disastrous as it totally eclipsed every thing especially the Blogger dashboard.

So, if your Blog has some other Menu installed, please be careful!

“But if you try a little kindness then you’ll overlook the
blindness of the narrow minded people on the narrow minded street.”