I know that there are so many post has already been written on this topic, but all of them are related to a particular element.
|Image Courtesy: downgraf.com|
There could be so many reasons we need to edit and change some of our blog HTML codes to customize our blogger template.
1- To improve our blog design
2- To make some change in some of our widgets sometimes
3- To add some new elements in blogger
4- To add Adsense codes in blogger HTML, to make Adsense ads appear on home page or post pages
5- To add any third party HTML codes and social sharing buttons on our blogs etc.
So, as you may have experienced yourself that, there are so many reasons we need to edit and change our blogger HTML codes.
But what could be the best way of finding HTML codes in blogger template easily? As we always get frustrated by searching the HTML codes in blogger template.
I think, with every problem there is a solution too. There is a great tool in our browsers known as (Inspect Element). You may have heard about this before or have already used this before but, Do you know that how it should be used in its right way? So it can help you more better to find and add any new HTML codes in blogger template.
Below I will try to explain how to use ‘Inspect Element’ to edit and find HTML codes in blogger template. So you will be able to make any changes in you blog’s HTML codes by customizing it according to your need. I will try to explain this with using some of our blog elements that we need to change sometimes.
Making changes in post Titles: Suppose you want to make any change in your post title it could be anything like, you want to change your titles font size, font color, title style etc. Now how you will find the HTML codes to make any change in all that things?
To find the HTML codes and to make any change, just open your blog >> now select any of your post title >> now right click and select ‘inspect element’ and now you will see the Inspector window with selected post title >> now head over to the right section of the inspector window >> and look for (This Element) and you will see the used codes behind that element (Title) see below image.
Now you see on the image above, on left side at number 3 option you can see the codes that has been used to create that title like its font color with a black dot and color code #333 and for font size you can see its showing Font: bold 25px open sans;.
Now you can easily find your code into your blog template, if you want to change your titles font color then just copy the color code shown as #333 and now go your template and ctrl+f and put that code and search, it could be possible that you may see this code many times appearing into your blogger template, so you may get confuse that which #333 code you have to change, if this is the problem then try searching for the titles font size and when you find the font size code, you will also see the color code above font size as its appearing in inspect element at step 3.
Now just change the font size with your desired font size if you want to change the color code then just select the color code and right click and search for the color code on Google and you will get so many websites which provides color codes, the best one i know is colorhexa, you can get your color code from this site and just replace the old color code with the new code.
Now you know, that how it works, using the inspect element option you can easily view any used code behind any blog element. If you are looking to customize any font on your blog then you have to select the font first then you have select the inspect element option to inspect about it, but to inspect any other element just right click on it and select inspect element and it show the codes behind that element.
Here i will give another example with the help of an image. Below is an example of a side bar (Follow by Email) widget and i just wanted to customize its submit button and i want to change its color and font size, now how i will do that? to change color and font size i just took my cursor on the button and right clicked and selected the inspect element and found the below codes shown in the image below.
Now i just copied the font size which you can see as 13px on the image and the color shown as red circle with its code. Now i can simply change the font size and its color with my desired color code that’s it.
Using inspect element option it can help you to find any codes within your blogger template. You can use this as a tool to customize your blogger template, especially you need this when you install a new blogger template or when you want to customize your existing template.
Using the way above, you can customize any blogger template very easily and you don’t have to spend lot’s of time to find your codes in your blogger template.
Feel free to ask anything you want, or if you have any problem using and finding your codes just let me know i will try my best to help you out. I hope this tutorial will help you a lot in finding your HTML codes.