Blogger : How to modify Desktop / Mobile Template

Last updated: July 18, 2013

Modifying a template in Blogger is 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 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 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 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.

    Layout of this blog has room for 2 gadgets in the header.

    Layout of this blog has room for 2 gadgets in the header.

  • 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 </body> tag.

Modifying a Template

To modify a template either for desktop or mobile devices, you have to do the following:

  1. 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.
  2. After you made a backup, you are now ready to start with modifications. Go to Dashboard > Template tab and click on Edit HTML button.
  3. 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.
  4. 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.
  5. 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 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:

  1. Mobile Settings Button

    Click on Settings button which is located below Mobile.

  2. This will open new window and once there, choose Custom mobile template under Choose mobile template.

  3. Mobile Template Preview after clicking Save Button

    Click Save and now your mobile part of the template is ready to accept any changes and additions that you make.

Mobile code in the template is located inside statements like these:

<b:if cond='data:mobile'>
To test your modifications, you don't need to check your blog on a mobile device, you can just add ?m=1 at the end of the URL and the browser will display mobile version of your site.

Useful Resources

If you want to learn more about the technologies mentioned above, check the links below:

Conclusion

In this article we examined why and how to modify blogger templates. This is a big topic, so the article also listed few links of 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.

Share this page

41 Comments

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top