Adding a custom menu in blogger blog part-2

In the last post, we started off with a tutorial for people using Google’s Blogger as a platform to publish their blogs on, outlining ways for them to add a custom menu in their blogger blog, a menu, which is now almost necessary in websites and blogs alike. In the earlier post, we tried to figure out ways people could use to try and figure out a possible location to insert the menu their blog’s HTML Template code, since, this is a way to insert a menu in a blog powered by Blogger. The method to find a suitable place to insert the code used a popular debugging tool available in almost all the browsers – the Inspect Element tool available in most popular browsers viz Google’s Chrome, Mozilla Firefox, UC Browser, Opera, Safari, and even in the Internet Explorer.

In this post, we will take a look on how to integrate the code into your blogger blog’s Template HTML, so that you could get the menu displayed to your users. For this, you will need the Menu’s HTML, CSS and JavaScript/jQuery code. If you know how to work up this HTML/CSS/JavaScript/jQuery code, it’s great. If you somehow don’t know this, no worries. There are a dozen, if-not-less, free and paid websites/services that lets you select from a set of ready made menus, even allowing you to make changes, quite the way, you like. Some of these websites are – CSS MenuMakerCSS3Menu, CSS3 Portal’s Menu Maker, MenuCool, Swimbi (Swift Menu Builder), are some of the websites, that have both, free and paid options for your menu. These websites also let you customize your menu to a great extent.

We expect you are now ready with one of these custom menu codes to begin the process to integrate a new menu in your blogger blog. Here, we have done some homework to make it easy for you. Just to tell you how to do this, we went on CSS MenuMaker, downloaded the source code for the first menu available there, since this one gives a cool 3D animated effect when the menu item is hovered over. Ofcourse, this is a single menu strip with no children (i.e. this is not a drop down menu), so, if you want to choose a menu that offers you dropdowns, please check out some other menu. Here is the code that we downloaded and modified a bit. The code contains three different parts, one stylesheet (style.css) file, a JavaScript source code file (.js) and a third file containing the HTML code to be embedded in the blog’s template’s HTML source code. Okay, now there are a few catches, you must be aware of, before you implement the code for this menu in your blog. We told you about the three different parts of the menu? These three different parts come in three different files, as we have highlighted a couple of lines above. Two of these files are external resource files, which contain the code your menu needs to work and display correctly. In the current form, all you need to do is, upload these files on a web server, give the reference of these files in your blog’s HTML template code, along with the HTML part of the menu, and you’re good to go. Now, since blogger, as a platform doesn’t allow you to upload files containing code, which effectively means you can’t upload the files on your blog. Either you require a web hosting or you need to integrate the code contained in these script files right in your blogger blog’s template code. For those who have a web hosting account, either paid or free, the process is simple, as we have described above. Just take the two code files, the one with the .css extension and the other one with the .js extension, upload it on your web server, and add the references of these files in your blog’s HTML code, the way we have done for this post.

We have two different files that we need to upload on the web hosting, and a third one that can be referenced from among a number of alternative sources itself –

STYLESHEET (menu_style.css), located here.

and JAVASCRIPT Source (menu_script.js) located here.

and the JQuery Runtime (jquery-latest.min.js) located here.

For those who don’t have access to a web hosting to upload these files, please check out the next post wherein we tell you ways you can get a shared we hosting account, for free, and for those who still don’t want to add to the woes, to integrate the code contained in these files, in the blogger blog’s template HTML itself.

Now, since we have uploaded our source files on the web server, we need to add the references of these files in the blog’s HTML code, so that it could access the functionality contained within these files. Here’s how we do it:


Blogger dashboard, showing the Edit HTML button.

Once we log into the blogger account, and in the desired blog, in Template > Edit HTML (highlighted with the red box around) needs to be clicked. Once you click the Edit HTML button, Blogger will load the HTML template code for your blog. Be careful, this code needs to be handled very carefully or you might end up killing your blog’s template. We would suggest taking a backup of your blogger blog’s template, in case something wrong happens. You can refer to this article which tells how to take a backup of your blogger blog’s template. Now since you have taken a backup, we’ll move further. We hope you remember we searched for a suitable place to add the code for our menu in the last post? Now since you know where we need to put the code, let’s move further.

HTML menu code - description

The HTML code of the menu

Shown in the screengrab above, is the HTML code of that needs to be put in your blog’s HTML template. In case you don’t have a web hosting account, please check this post for a work around dealing with how to go through in case you don’t already have a hosting account. The two sections highlighted separately are the two parts of the code, both of which will be added in different sections of the blog’s HTML template. The upper part, is the section wherein, we are referencing the files we have uploaded on the web hosting. The lower part is the actual HTML code for the menu that will create the Menu in the blog. While this is the screengrab of the actual file we downloaded from CSSMenuMaker, we have made a couple of changes to the code, and the styles too. You too can give it a shot to have a personal touch to your menu.

Okay, now we have moved a step further and are now actually implementing the code in the blogger blog. For the first section, i.e. the references, we need to locate </head> using the search feature (Ctrl+F) in the blogger’s HTML template window. Hit Ctrl and then type in </head> and hit enter. Blogger will highlight the text. Now, as shown in the screenshot above, copy the the three lines starting from <link rel=…> to </script>. For your help, we have highlighted the lines to be copied, in the screenshot above, within the first section enclosed in the red box. The lines marked with points 4, 5 and 6 inside the red box are to be copied. Once you have copied the lines, paste it in the blogger blog’s HTML code, just before the </head> tag, as shown in the screenshot below.

Script references in the Blogger's Template HTML

Script references in the Blogger’s Template HTML

Now the lines highlighted with blue are to be taken care of. These lines contain the references of the javascript file and the stylesheet we uploaded on the web hosting account. So, you need to take care to correct these references to make them match with the location of the files on your web hosting account. If the files are reachable, the menu will work properly, otherwise it will be listed as simple HTML bulleted list. For ease, we have enclosed the code lines we just added in the HTML template of the blog inside two comments, which will help us recognize what the code does, in case we open the template HTML at a later time, only to wonder what does the code do, since the code contains thousands of HTML, JavaScript and CSS code lines. The lines <!–For Menu, Insert Script References Here–> are HTML comments that will enclose the code we add to the HTML template of the blog. It’s a good habit to have all the code lines properly commented, and if possible, dated as well, to help us on a later date.

Adding the menu items

Adding the menu items

Okay, so now the tricky part. Adding the HTML code for the menu. As you know in the last post, we looked out for a suitable place to display the menu in the blog. We decided to place it under the Blog’s Title. So, we used the Inspect Element tool in our browser to find header-cap-bottom cap-bottom. As highlighted in the screenshot above, this is name of a class used within a <div> tag. We are going to insert the HTML code for our menu before this <div class=”header-cap-bottom cap-bottom“> tag and after </div> tag before it. The highlighted section in the above screenshot is the menu code that will be displayed in the blog. We need to change the # displayed after <a href=’ with a hyperlink of our choice and add a suitable text after this hyperlink. Just for ease of use, we have enclosed this part of code too inside two comment tags which tell us where to insert the menu code. We do hope that you won’t get confused and start looking for <!–Insert Your Menu Code Here–>, as these are not already there in the blog’s HTML code. We have added it for our ease.

menu working

It’s done!

Once we have done the integration of the required code, we can try taking a look at the menu on the blog. If everything is fine, the menu will be displayed correctly, as shown in the screenshot above. However, if there is some issue with the references in the case of any of the three files, you might get a menu like the one shown in the screenshot below.

Improper menu listing because of improper source

Something broke! There is a problem with the script references.

If you wish, you can take a look at the menu in action here, or if you want to see it being used in real, it’s here.

For those who still couldn’t add the menu in their blogs, we have a couple of alternative ways to make that happen in the upcoming post. So, do check out!

Leave a Reply

Your email address will not be published. Required fields are marked *