A Step by Step Tutorial on Editing Blogger Templates
(For very beginners)
Today, one of my clients, who is a very beginner in blogging, failed to insert a piece of code in his Blogger template. The task was very simple and it was to add a tiny piece of code before in his blog’s template. I helped him and then thought that there may be several beginner bloggers who don’t know even how to add a widget by inserting a piece of code to their Blogger blog’s template. So I decided to write this brief article which will help them out and they will also be able to add widgets to their Blogger blog’s. If you are a beginner and reading this tutorial, then read below simple instructions. Later on, you will be able to edit HTML/XML of your Blogger blog’s template very easily.
Editing HTML/XML of Blogger Template
First of all, simply sign-in to your Blogger dashboard at http://blogger.com as you do always for writing posts. Now select the blog to be edited from Blogger dashboard if you have more than one blogs. In my case, I’ve more than 10 blogs including the demo blogs along which my Blogger dashboard looks like this:
Once you select your blog, you will be taken to its dashboard which provides you many options to customize your blog’s look, add a new template, change comment settings and much more. The dashboard of your blog will appear similar to below screenshot
You can see several options on left hand side bar which starts from ‘Overview’ (top) and end at ‘Settings’ (bottom). Your concern is with second-last option which is Template.
Once you will click it, the next window will appear with the options of Backup/Restore of your template, its HTML/XML editing and visual customization. This window appears as below:
Backup/Restore option in top right corner of the window allows you to download backups of your current template and upload new templates. You will need this feature frequently while editing your template. You must download a backup of your template before each time you edit it. It is beneficial to download backups of both your template and blog after intervals as it will rescue you in any accidental loss of your template or whole blog. Secondly, if you have a new template to apply on your Blogger blog, you can do it by uploading from the above discussed Backup/Restore option.
After you download a backup of your template, you are good to go with editing without any fear. If something unfortunately goes wrong, then your downloaded backup will rescue you in bringing your blog’s design back to its previous state.
After you click the Edit HTML option, a new window will appear which contains the HTML/XML code of your template. The window looks like as shown in below screenshot:
Now suppose you have a piece of CSS code for a widget which needs to be inserted before ]]>. To do this, first all copy that code from the source after selecting it, then pressCtrl and F at once on your keyword and type ]]> in the find box which appears on your browser and press enter. Browser will search and show you ]]>. place the cursor before ]]> paste the code here by pressing Ctrl and V at once. You have successfully added the code to your template. After that save the template by clicking the Save templatebutton below right-bottom corner of code area.
Some times you need to insert codes between code of widget templates in your template which is collapsed and hidden in normal conditions. Suppose you need to add a piece of code below
The above discussed instructions described how to add/insert third party widget codes in your Blogger blog’s template. Mostly, widgets required to insert a styling code (CSS) in template and then you need to add the widget as a gadget using the provided code. To add a gadget, follow below instructions.
Adding a Gadget/Widget to Blogger Blog
For adding a gadget or widget to your blog, first go to blog’s layout and select the optionAdd a Gadget in required area. A new popup window will appear. Scroll down in it and find and select HTML/Java Script. Now paste the widget code in the box and save your widget. You are all done!
The above displayed screenshot is a generalized structure of a Blogger template which varies from template to template. In your template, you may unable to find the Add a Gadget option in certain areas. It is so because those regions are disallowed for adding new gadgets. We will learn in a separate tutorial how to unlock regions of your template to add the gadgets. Till now, if you have any confusion, you can ask by commenting on this post. We will feel it our pleasure to help you out. You can also find help on Google’s official support forums here, how to edit HTML of your Blogger template. But I hope that you will never face any difficulty despite of being a newbie and we are also here to assist you always.
0 comments:
Post a Comment