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.
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 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:
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.
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 F 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.
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.
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.
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!