Why Responsive Template Design is the Most Important Feature Of Webbsite
So why you need to make your blogger template responsive because there are number of mobile and tablets users and different screen size of devices the layout of your blogger blog will not be displayed properly across all the devices with different screen sizes when you make your blog template responsive it will automatically resize itself to render properly in the devices with different screen sizes and it also increase search engine ranking .
How To Make Blogger Template Responsive
The advantage of Responsive site is no need to built separate mobile site and google recommends responsive site and blogs in search results. So firstly you have to add "viewport" meta tag in your blog template the working of viewport meta tag is when your blog open in browser it tell to browser resize itself according to screen size so fallow steps to add viewport meta tag in your blog template:
1) Go to Blogger Dashboard > Template > Edit HTML.
2) Paste the code given below between <head>and</head> section in your blogger template:
<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>
<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>
Make Blog Responsive With Media Queries
/* For Desktops and Laptops*/
@media only screen and (max-width : 1280px) {
/* If device width is less than or equal to 1280px */
}
/* For Tablets*/
@media only screen and (max-width : 1024px) {
}
/* For Small Tablets*/
@media only screen and (max-width : 768px) {
}
/*For iPhones */
@media only screen and (max-width : 640px) {
}
/* Mobiles */
@media only screen and (max-width : 480px) {
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
}
So this was how to make blogger template responsive if you like this tutorial then please share with other blogger users.