• Open Account
  • Premium
  • Tuesday 6 January 2015

    How To Make a BloggerTemplate Responsive

    Make a BloggerTemplate Responsive

    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) {
    /* CSS FOR NETBOOK AND DESKTOP ------------*/

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

    Sifiso Nkwanyana

    Author & Editor

    I hope you have recieved all the information you seek and thank you once more for browsing our website we hope to hear from you soon.


    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. This comment has been removed by a blog administrator.

    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

    8. Good post. happy to visit your blog. Thanks for sharing.
      selenium training in chennai

    9. Great article. This is very useful. Thanks for sharing.

      digital marketing training

    10. Great article. Thanks for sharing such a useful post.

      digital marketing training

    11. I have read your blog its very Interesting. Thanks for sharing. Call for low cost ERP software. ERP in Chennai | ERP Software in Chennai

    12. Interesting post! This is really helpful for me. I like it! Thanks for sharing!
      WebDesign Lüdenscheid

    13. This information is impressive. I am inspired with your post writing style.Thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic..
      B.Com Project Center in Chennai | B.Com Project Center in Velachery


    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!