Modifying a template in Blogger is a very powerful feature. It allows you to make significant modifications to your blog which helps your blog to distinguish itself from millions of other blogs. It also gives you the ability to add interactivity to your blog. This article will show how to achieve that for both Desktop and Mobile Template.
Some cases which require modifications of the template:
Changing the Theme of your blog
You change a theme by modifying the CSS code in the template. If you are familiar with CSS and HTML, then modification of template code is best suited for you. Otherwise, use Blogger Template Designer as it gives you the ability to modify the theme without the need to deal with CSS and template code.
It is located at Dashboard > Template. Once there, click on Customise button.
Changing the Layout of your blog
Maybe you are not satisfied with the default layout and want to change it. For example, by default, you can not add any gadget in the header part of the layout as there are no Add a Gadget links located there. Modifying template code solves that problem.
Changing the code of the Widget Templates
If you want to change the HTML output that the template generates, then you need modify widget code in the template. One reason for that would be to improve Search Engine Optimization.
Adding Interactivity to your blog
If you would like to spice up your blog, then adding various jQuery plugins will achieve that by adding their code into the blogger template. In most cases, you should add the jQuery code at the end of the template before
Modifying a Template
To modify a template either for desktop or mobile devices, you have to do the following:
- Important! Backup your template. Before doing any modifications, you should always backup your template on your computer first just to be on the safe side. Go to Dashboard > Template and click on Backup / Restore button located on the top right corner and click on Download full template.
Note:If you are interested in backing up whole site, not just a template, check my other article: How to make a complete backup of your blog.
- After you made a backup, you are now ready to start with modifications. Go to Dashboard > Template tab and click on Edit HTML button.
- You get an edit window containing template code where you can do all the necessary modifications. If you want to edit widget code, you can use Jump to widget drop-down menu to quickly locate the widget.
- Some modifications require you to find particular code in the template and since the template contains lots of code, you might find it difficult to locate that code. To help you with that, use some sort of text editor by copying whole template there and then use Find command.
Note: I am personally using Notepad++, a free Code Editor that supports several programming languages including XML for our templates.
- Use Preview button to check the result of modifications. After you are satisfied with the result, click Save Template button.
Modifying template for mobile devices
When you are optimizing your blog by directly modifying the template, you should also take into consideration the visitors that use mobile devices to visit your site. Modifying Blogger's template for mobile devices is the same as modifying a normal template (steps 1-5 above), except that you need to do one additional step. You need to set the mobile template to Custom, otherwise you will not be able to see any changes you make in the mobile parts of the template.
By default, the mobile template is set to default template. To set it to Custom, do the following:
Click on Settings button which is located below Mobile.
This will open new window and once there, choose Custom mobile template under Choose mobile template.
Click Save and now your mobile part of the template is ready to accept any changes and additions that you make.
?m=1at the end of the URL and the browser will display mobile version of your site.
When Settings button for Mobile is missing
We can choose many different Blogger themes under Theme section that are grouped in categories with such names as Contempo, Soho, Emporio, Simple and so on. For some of them, the setting button under Mobile will be missing as shown below:
These themes don't have a different section for Mobile, instead, they use responsive design, in which the websites behavior for smaller screens are determined by CSS inside the theme. If you check the theme code by clicking on Edit HTML, you should see a lot of CSS code and you will notice the use of media queries. To learn more about responsive design and about CSS media queries, check this article.
If you want to learn more about the technologies mentioned above, check the links below:
HTML and CSS
Blogger Template Code
In this article, we examined why and how to modify blogger templates. This is a big topic, so the article also listed a few links to resources you might find useful when modifying your template. If you think of any other resource that would be useful for blogger template modifications, feel free to suggest them and I might add them to the list.
I hope you have found this post useful. Feel free to comment or share it on your social networks.