Archive for : July, 2015

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.

Bloggers need menus for a number of reasons. Once such reason could be arrange the important links in the website/blog, which the blogger wants the users to check out. These links can be anything ranging from links to different pages like About the blog/Author, Disclaimers, or links to different genres the author writes on his/her blog, or anything else. While it is very easy to add a simple menu in pure HTML or making it a bit more beautiful by introducing CSS and one or the other scripting languages like Javascript or JQuery, the lack of such a thing easily available inside the blogging platform keeps the average blogger who doesn’t know the usage of backend scripting in HTML, Javascript, JQuery or CSS, away from having one. Even if one manages to find a suitable enough code to include a good looking menu available from a numberof helpful websites that provide ways to choose from a predefined set of menus for the average user to choose from, at times, some allow the users to make simple customizations, and then provide the code to be integrated in the blog or website, beyond which, the user is just required to upload the supporting CSS stylesheet and/or script files, which provide the much needed functionality like transitions and animations or effects to the swanky looking menu. Apart from that, the user is supposed to add this code in their blogs/websites for it to work and be visible in their blogs. And once you enter the swarm of confusing code that includes everything your blog is, there becomes a much more bigger problem for those who are not that savvy with the behind the scene code, and may end up screwing the code beyond repair.

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.

Analysing the Location to insert the code

Analysing the location to insert the code

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.

Inspect Element Result

Result of Inspect Element

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.

Zeroing in on the element to find in code using Inspect Element

Zeroing in on the element to find in code using Inspect Element

We believe we should leave you here for now. It will be a bit too much for non-savvy bloggers if we cram in all the contents in this post itself. So, we have decided to span this post to help you add a custom CSS/Javascript/JQuery based menu in your blogger blog, over two posts for the sake of keeping the post sane. Do remember to check back again for the concluding part of this post.

Keeping a track!

Blogging is  something, with which a blogger, or a to-be-blogger expects to reach his/her target audience. Be it a personal blogger or someone working more professionally, in a particular niche, or someone whose job needs him/her to blog. Statistics, or simply said, the economics of analysing numbers is something which has been giving us insights, and at times, much required information into analysing these numbers for a better understanding. Speaking in general terms, no matter who you are, a simple salesman, a business owner, a financial adviser, an accountant, a student, or a blogger, analysing these numbers play an important role in giving you a better understanding of the scheme of things. As a blogger, someone who, using the free medium of internet, intends to reach out to the masses, be heard, be recognised, be known, it is very important for you to have a deep understanding of the interaction of your targeted users or the visitors who visit your blog using the internet, with your blog. Even out of curiosity, bloggers tend to have a craving for data that gives them important insights into who their visitors are, which part of the world they belong to, what are their age groups, technologies used by them to visit the internet, their overall interaction with your blog, their interests and their inclination towards specific topics.

Analysis of visitors becomes a rather important part in the blogging world. So important that there exist atleast a hundred different visitor analysis tools, both paid and free, subscription based and one time payment based, free with limited features or free with unlimited features. Just doing a simple search over the internet will give you so many results that you will be astonished to see the numbers and will probably be a bit confused with the numbers, the various features each one offers, and one of the most important factors, costs. One of the most used Analysis tools for visitor interaction with websites includes Google’s Analytics Platform, a robust web based analysis platform that is available in different flavours, free and premium, a subscription based platform, for premium users, and free for almost everyone who signs up for an account with it. Google Analytics is something almost everyone who’s working in the field of website design/development and SEO will suggest you unanimously. Keeping in mind the fact that this blog is all about blogging, and also that since we are telling you how to start blogging, we decided to do a small post to tell you how you can go about getting Google Analtics enabled for one of your blogs, for now, a blogger blog. We will do a separate post on doing the same for a WordPress blog as well.

So, starting off the guide to Google Analytics, we will share with you a couple of screengrabs we took out specifically for this post. We will take you through activating Google Analytics on your blog in a detailed step-by-step manner. The first step being a visit to the Google Analytics website – www.google.com/analytics. While opening the website, if you are logged into your google account, the sign-up process will be smoother, not to say if you’re not, then also it won’t be a problem, except that you might need to take a few more steps to sign-in/sign-up.

Google Analytics Signup

Google Analytics Signup

Google Analytics - Create Account

Google Analytics – Create Account

The above screen shows the basic setup page post signing up for Google Analytics. The very first step asks you to create your account – for tracking your blog/website. The page is more-or-less self explanatory. You get options to either create an account to track your website or an app – say, an android app. You select Website, since you need to track your website (blog). You enter a name for your account, your website, and the url of your website. Be it a top level custom domain name, or a subdomain of blogger.com, wordpress.com or weebly.com or whatever blogging platform you like, doesn’t matter for creating a google analytics account. Once you sign up for a Google Analytics account, a few more steps and you are tracking down the visitors on your website/blog. We will take you through the whole process for a blogger blog with the help of a few more screenshots.

Google Analytics Account Creation TOS

Google Analytics Account Creation TOS

The above screenshot is self explanatory. We need not elaborate on the need for it and what you need to do in this page in order to proceed with the account creation.

Google Analytics Tracking Setup

Google Analytics Tracking Setup

Once you complete the process of signup and account creation, Google Analytics creates a new account to track one of your blogs. In Google Analytics, a website you have added to be tracked is called “Property”. For a property, it gives you the tracking code which needs to be inserted in the website. While it is suggested by Google Analytics to integrate this code in all the pages of your website, this is true for a particular website design where each page is an individual one independent of others, and if you need to track the usage of all pages, you have to insert the tracking code in all the pages. However, with blogging platforms, such as Blogger of WordPress, thanks to their design, you have to put the code in a page that is being called throughout the website, irrespective of which page is being requested. To do this, blogger provides a separate section so as to allow you to just add the tracking code in this section of your blogger dashboard and you are good to go.

Google Analytics Tracking Setup - Inserting Tracking Code in Blogger Blog

Google Analytics Tracking Setup – Inserting Tracking Code in Blogger Blog

The above screenshot shows you how and where to insert the “Tracking Code” you got in the previous screen. There are ofcourse other ways to insert the tracking code for Google Analytics. We will discuss that in one of the next posts, since putting it here might create a bit of confusion for newbies, particularly those who are not very comfortable with working on behind the scenes code in Template HTML. Once you insert the tracking code in the given box, and Click the Save settings button on the right hand side top corner, your Google Analytics tracking code will be inserted in your blog, and you are ready to start tracking your website.

Google Analytics In Action

Google Analytics In Action

Once the tracking code is successfully inserted, you can take a look down in the Reporting Tab, marked in the above sceenshot in blue, and Google Analytics will start tracking visitors on your website/blog. Just to be sure about the proper installation of the tracking code and Google Analytics working for your website.blog, you can open your blog in a tab and open the Real Time reporting in the Reporting page, and you will be able to see the approximate location of the origin of the visit, and a number o fother such details. Just to let you know, Google Analytics, by default, displays you the data for the last 30 days, excluding the current day. You may choose to take a look over more days or less days by supplying the date to include the tracking data for, from the right hand side date selection panel.

With that, we believe for now, it’s more than enough of Google Analytics tutorial. We believe the post was helpful for atleast some of you. Do give us your valuable feedback in the comments section below.