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

 Conclusion

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.

30 comments:

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  4. This comment has been removed by a blog administrator.

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

    ReplyDelete
  6. 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
    regards
    Mugianto

    ReplyDelete
  7. Good post. happy to visit your blog. Thanks for sharing.

    seo training in Chennai

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

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

    ReplyDelete
  10. Great article. This is very useful. Thanks for sharing.

    digital marketing training

    ReplyDelete
  11. Great article. Thanks for sharing such a useful post.

    digital marketing training

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

    ReplyDelete
  13. I have read your blog its very Interesting. Thanks for sharing. ERP Providers in Chennai | ERP Software Company Chennai. We provide best quality cost effective ERP software applications and end to end enterprise solutions to all the industry verticals with the affordable cost.

    ReplyDelete
  14. Thank you for this valuable information. I have got some important suggestions from it. Get your business to the next level in simple steps.
    erp software company in chennai | erp software providers in chennai.

    ReplyDelete
  15. Thank you for this valuable information. I have got some important suggestions from it. Get your business to the next level in simple steps. ERP Providers in Chennai

    ReplyDelete
  16. I would like to say thank you for the amazing details and concepts you are sharing in this.
    Webseiten Gestaltung Lüdenscheid

    ReplyDelete
  17. I would like to say thank you for the amazing details and concepts you are sharing in this.
    Webseiten Gestaltung Lüdenscheid

    ReplyDelete
  18. Your website content nice nice and interesting to observe.
    ssd festplatte

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

    ReplyDelete
  20. I found a lot of interesting information here. A really good post
    WebDesign Lüdenscheid

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

    ReplyDelete
  22. The website is looking bit flashy and it catches the visitors eyes. A design is pretty simple .
    arguments against big bang theory

    ReplyDelete

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!