Tuesday, 6 January 2015

How To Make a BloggerTemplate Responsive

Posted By: Sifiso Nkwanyana - 12:00


& Comment

A couple of days ago I shared a guide about how to create a blogger template from scratch which is a good article which you cannot afford to miss as it will give you a great understanding about template designs and editing. the post is mostly created for Bloggers to give them an understanding of the basic construction of their templates and on how they should modify their blogger templates to work the way that suites them the most. I have decided to give you some special tips about how you can make your blogger template responsive just by adding some code to your template.

Most people don't know about the importance of responsive web design and we are here to share with them some important things that they should know regarding their Blogger templates. When speaking about responsive design we are basically talking about a feature on a website that will allow it to fit into every screen which I can probably call screen optimisation because you are optimising your website to fit into any type of Screen whether flat screen, Desktop, tablet ,Smartphone device or any other device you should use a responsive template will work for you.

How to Make Blogger Template Responsive

  • STEP 1

Log into your blogger template and go to template and edit HTML as shown in the image below

how Make a BloggerTemplate Responsive

  • STEP 2

Left click any where on the template  and press the  CTRL + F keys to open the search box as in the example before

 Make a BloggerTemplate Responsive

  • STEP 3

Just below <head>  add the code below

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

  • STEP 4

Now save your template which will lead to the second part whereby you will need to edit the CSS of the template

  • STEP 5

Now search the following CSS codes in your template and edit the widths as shown below

@media screen and (max-width : 1280px) {

@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/

@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/

@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/

@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/

@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/

Search using the words that are written in red  and make the width changes according to the way shown above.

  •  STEP 6

Save your template to apply the changes


A Responsive template helps blog readers to be able to access your blog in different devices making your chances of making money from your mobile Ads.

About Sifiso Nkwanyana

Sifiso Nkwanyana is a full-time blogger and Forex trader who loves to explore blogging. He has a passion for helping newcomer bloggers make their blog noticeable and make money. The Main Purpose of this site is to bring reality with a taste of entertainment


  1. United tech engg new web marketing company in hyderabad, which provides different internet marketing srvices
    united tech engineering hyderabad

  2. Its Really very Informative ,information for me..I have a search the lots of blogs in how to make the RWD in my Blogs..but I have a getting the exact information in your blog..thank you for sharing the useful information....Website Design Companies in Bangalore | Website Development COmpanies in Bangalore

  3. The main thing which i like about web designing is that it needs creativity and we need to work differently acccording to our clients need this needs a creativity and innovation.
    web designing course in chennai|web designing training in chennai

  4. Nice piece of information on HTML5. With the expansion of smartphones and other portable gadgets, the demand for responsive website design that go comfy on all devices keeps on increasing. This leads to invention and expansion of HTM5 web technology. PHP Training in Chennai

  5. it will be great if you make this tutorial on video like this: https://www.youtube.com/watch?v=rg-plkkl9hE

    sadly it wrote on Indonesian Language Y_Y
    it will more easy to understand for begginer like me

  6. Good post. happy to visit your blog. Thanks for sharing.

    seo training in Chennai

  7. Responsive is the latest feature that all website should have. Ultimez technology the best Web Design Company in Bangalore which have experience in delivering responsive web solutions.
    Website Design Company in Bangalore | Web Development Company in Bangalore


Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep it in mind that we respect all comments by our readers but all spam comments and spam links will be deleted. Thanks for understanding!

Copyright © 2013 Ajaxsurf™ is a registered trademark.