Archive for : August, 2015

Blogger Customization – Integrating styles and scripts

In the journey this far, all this while, we concentrated on making changes to blogger blogs, more of customizations for those who wanted the things to work their way. In this series of helping you make customizations in your blogger blog, we took you through a couple of articles outlining how to add a custom HTML, CSS, and jQuery based menu to your blogger blog, one that looks beautiful and adds to your blog’s overall visual appeal, extending a helping hand towards your blog’s readers so that they are able to navigate your blog/website with ease.

The last posts where we showed you how to add a custom menu in your blogger blog came with a catch. You were supposed to add a few references to external script and stylesheet files. And these files, for goodness sake, were to be hosted over an external web hosting account. Now the problem is, Blogger doesn’t allow one to upload any files other than just image files, so, it just won’t serve the purpose. Other options like Google Drive/Google Sites and other file sharing services like dropbox, etc will allow you to upload the files, but you won’t be able to use these files in your website since these files are supposed to be downloaded, plainly because of the kind of URL you get for accessing the files you upload. Such URL’s can’t be used to access the files in case you need them on your page. So, what’s the way out?

It’s simple. Just upload the files on an external web hosting account. But would that mean you need to buy costly hosting space for putting just a few files on it, when your entire blog is on blogger? No! There are atleast a dozen, if not less, free web hosting services (yes we said FREE!), that let you store your files on webservers running both Linux and Windows, and promise a pretty good uptime, some promising a server uptime of 99%, which is good enough considering that you have a usable web hosting account that comes with a GigaByte of storage space, a few gigs of monthly transfer bandwidth, a good enough shared server resources, free email ID’s and you can opt to get yourself a free subdomain too. What more can one ask for free? We took a look at a couple of these free webhosting platforms, and though being free, these come with some conditions, not all are that much limiting to free users, when it comes to giving away basic features of a web host. One such free webhosting service is provided by A free account can be signed up for and once you get your free web hosting account, you can also take up a free domain name, so as to reference your files. We will be doing a small introductory post to take you through the signup process, account creation and upload of the files shortly.

A second way, which doesn’t need you to have a separate hosting account is to integrate the source codes contained in these two files in the HTML template file for your blogger blog itself. Doing this has a small disadvantage though. Since all the pieces of code goes in your blog’s template, it tends to make the template a bit heavier to load, though nothing much you will notice quickly, however if you keep doing this, you will certainly notice this in your blog, and it will deteriorate your blog’s performance over time. That is the reason the script files and stylesheets are kept separate. Anyways, since we have explored that option of keeping the script and stylesheets separate we will take a look at this method. As shown in the last post, wherein we added pieces of code in the blogger blog’s template, this way is almost similar to that one, with the only change being in the two references to the script and stylesheet, which will be done away with, since we are putting the code directly in the page that is calling the lines of code contained in these files, and the functions within.

Let’s navigate back to your blog’s template’s HTML code.

Blogger Blog's Template HTML Code

Blogger Blog’s Template HTML Code

This is what your blogger blog’s Template HTML code looks like, once you click the Edit HTML button on the Template page. Now there are two things we need to integrate in this template. One will be the lines of code contained within the CSS Stylesheet file – menu_style.css and the other one being the jQuery script contained within the file menu_script.js. The third file that we referenced was the jQuery JavaScript library, which can be used from a number of sources. We will leave the reference for the jQuery Javascript library available at, which is a minified version of the latest iteration of the jQuery library, and concentrate upon integrating the menu_script.js and menu_style.css files in the blog’s template. The best place to add the CSS code is within the <b:skin> </b:skin> tags, which encloses all the CSS styles for the current template. So, we copy all of the code contained in the menu_style.css file, and place it before the closing </b:skin> tag. Next, we copy all the code from the menu_script.js file and paste it within the template HTML code at a suitable place. We decided to put this code along with the menu HTML we have added earlier.

Menu CSS Code Integration in Blogger Blog

Menu CSS Code Integration in Blogger Blog

Completing this, we have finally and successfully integrated the code snippets contained in an external stylesheet and a javascript file, which essentially means that you don’t need to host these files on any external web host. Apart from script and stylesheet files, there are possibilities that the menu source code you download from such websites might contain additional files like images that might be needed to make your menu visually much more appealing. You can upload such image files on your blogger account, and use the url of the image to replace the image url in the source code for the menu, to make it work properly.

Menu Script Integration in Blogger Blog

Menu Script Integration in Blogger Blog

With that, we have completed the integration of the menu codes (CSS stylesheet and jQuery script file) right in the template’s HTML code for your blogger blog. This article will hopefully help you take up more such customizations to your blogger blog, to enhance it, both, functionally and visually. Just a word of caution, that we would like you to take a note of, and that is, as we have already told you above, integrating the scripts and stylesheets right in the HTML file is not suggested, since this makes the HTML file heavier, and thus takes more time in loading. So, we would like to suggest you to please try and minimize any such requirements as much as you could.

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!