Adding a custom menu in blogger blog
Once in a lifetime of a blogger who chose to blog using blogger, or for that matter whatever platform, there arises a need to make customization to the blog, beyond the regular scope of the blog, i.e. beyond a limit which the blogging platform generally provides to most of the users. Menus are one such much needed customization feature, which is frequently required by bloggers. Since, most of our technological lives are quite drastically driven by menu based controls, menus are ubiquitous. Be it our Television, our smartphone, the restaurant menu for choosing the food we want to have, or the internet banking account provided by our bank, or the automated teller machines. Menus are everywhere. There’s one reason why menus are there. The simple reason is that menus allow the users to make choices. And these do make that making choice easier by arranging these choices in a much better and organised way.
In this post, and the following post, we will take a look at a way using which a blogger can easily insert the code for a menu, or for that matter, for anything in their blogs. The current post will, for the time being will concentrate on a rather easy way on identifying the location for adding your custom code inside the Blogger’s Template HTML code. But before you proceed with it, let us warn you that prior to making any changes to your blog’s template, make sure that you have a backup copy of your blog’s latest template, so that you could revert back to it in the event of something going horribly wrong while you are trying to add custom code inside your blog’s Template HTML.
Modern browsers, come equipped with a rather indispensable tool for web developers. This is the Inspect Element tool built in in most of the current generation browsers. Just right click anywhere on the open page in your browser and you might see the Inspect Element as an option to choose from. You might be having a question – But what does it do? Nothing much. All Inspect Element does is that it shows you a source of the element in the web page you right clicked on to reach this inspect element. The screenshot below shows the Inspect Element tool in the context menu that came up after right clicking on a page on the demo blog.
While the above screenshot shows the Inspect Element tool in the context menu of the blog, the screenshot below shows what Inspect Element tool does once you right click on an element on the web page and click Inspect Element. As evident from the screenshot, we right clicked over the title of the blog, and inspect element is showing that only by selecting the entire area over which the title of the blog can span over. Furthermore, the screen has got split into two different sections. The top one showing you the page, the bottom one showing you the code behind the page and the HTML code for the selected element too has been displayed in blue highlight.
Once you know where to click and how to proceed, the next step is to find a suitable location for displaying the element you want to add to your blog. In the current case this being the Menu. Since, menus are usually found on the top as a horizontal bar, we will try following this. While there is no hard and fast rules defining the placement of menus, or any such elements, so please feel free to experiment with element placements. What we are trying to find with Inspect Element is a suitable place to add our code in the blogger’s Template HTML. Here we are looking up for elements which will most probably be available in the Template’s HTML code, which we can find easily to decide where to add the new code. It is easy to move over different HTML elements by hovering over code chunks and HTML tags to find out the ones you need to find over once you are inside the blogger’s Template HTML editor. Like for example, in the screenshot below, we have zeroed in on the element div.header-cap-bottom.cap-bottom where div is an HTML tag, and the ones following it after that are a Class defining most probably the CSS styling of the contents of this Div element. So, we need to look for header-cap-bottom cap-bottom in the Template HTML. We will be using this element as a possible indicator to place our custom code.