Blogger : How to modify Desktop / Mobile Template

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.

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

    Click image to enlarge
  • 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 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:

  1. Click on Settings button which is located below Mobile.

    Mobile Settings Button

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

    Template mobile setting

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

    Mobile Template Preview after clicking Save Button

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.

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:

blogger - modifying theme without mobile settings button

Click image to enlarge

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.

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 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.

Tags:

50 Comments

Click HERE to add your Comment
  1. EboolinkBD
    July 17, 2013
    • admin
      July 18, 2013
  2. Watesh
    October 27, 2013
  3. bee
    June 2, 2015
    • admin
      June 20, 2015
  4. yinyin
    June 29, 2015
  5. Frog
    June 7, 2016
    • admin
      June 9, 2016
    • Maninder Singh
      November 7, 2020
      • admin
        November 7, 2020
  6. Frog
    June 10, 2016
  7. Gabby
    August 28, 2016
    • admin
      August 28, 2016
      • Gabby
        August 29, 2016
        • admin
          August 29, 2016
  8. Gabby
    August 29, 2016
  9. Kasia
    September 29, 2016
    • admin
      September 29, 2016
  10. vijaya
    March 4, 2017
  11. Techie Pen
    May 16, 2017
  12. M.S
    August 22, 2017
    • admin
      August 22, 2017
  13. yael
    September 14, 2017
    • admin
      September 15, 2017
      • yael
        September 16, 2017
        • admin
          September 16, 2017
        • yael
          September 17, 2017
  14. admin
    September 17, 2017
    • yael
      September 17, 2017
      • admin
        September 17, 2017
        • yael
          September 17, 2017
  15. Sophie
    October 2, 2017
    • admin
      October 3, 2017
  16. Joe
    December 9, 2017
  17. Frks
    January 21, 2018
    • rvwv
      January 31, 2018
  18. Sandra L.
    February 3, 2018
    • admin
      February 3, 2018
  19. Sandra L.
    February 4, 2018
    • admin
      February 4, 2018
  20. Sandra L.
    February 4, 2018
  21. Arpan
    May 18, 2018
  22. plusnet
    April 26, 2019
  23. Bhawesh
    January 31, 2020
    • admin
      January 31, 2020
  24. Tommas
    November 28, 2020
    • admin
      November 30, 2020
  25. Pavan Teja
    July 11, 2021
    • admin
      July 11, 2021

Leave a Reply to Frog Cancel reply

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