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
- 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
- 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.
United tech engg new web marketing company in hyderabad, which provides different internet marketing srvices
ReplyDeleteunited tech engineering hyderabad
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
ReplyDeleteThe 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.
ReplyDeleteweb designing course in chennai|web designing training in chennai
This comment has been removed by a blog administrator.
ReplyDeleteit will be great if you make this tutorial on video like this: https://www.youtube.com/watch?v=rg-plkkl9hE
ReplyDeletesadly it wrote on Indonesian Language Y_Y
it will more easy to understand for begginer like me
regards
Mugianto
wow useful article thanks for sharing... recruitment executive search
ReplyDeleteGood post. happy to visit your blog. Thanks for sharing.
ReplyDeleteseo training in Chennai
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.
ReplyDeleteWebsite Design Company in Bangalore | Web Development Company in Bangalore
Good post. happy to visit your blog. Thanks for sharing.
ReplyDeleteselenium training in chennai
Great article. This is very useful. Thanks for sharing.
ReplyDeletedigital marketing training
Great article. Thanks for sharing such a useful post.
ReplyDeletedigital marketing training
Thank you for your nice post. Keep updating.ERP software chennai|Leather ERP software chennai|Construction ERP software chennai|ERP for Trading|ERP for hospital management
ReplyDeleteI have read your blog its very Interesting. Thanks for sharing. Call for low cost ERP software. ERP in Chennai | ERP Software in Chennai
ReplyDeleteInformative and impressive. Keep Updating
ReplyDeleteWebdesign Deutschland
Interesting post! This is really helpful for me. I like it! Thanks for sharing!
ReplyDeleteWebDesign Lüdenscheid
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..
ReplyDeleteB.Com Project Center in Chennai | B.Com Project Center in Velachery