Responsive design also reduces loads and even an seo friendly. But the main question is we can design website template as responsive but Responsive design also reduce loads and even an seo friendly. But the main question is we can design website template as responsive but can we design Blogger based template as a responsive? Yes you can. Blogger becomes a big CMS platform for blogs development. Even blogger has many great features compared to WordPress. Template designing is much easier in blogger as compared to WordPress. But we always think that blog themes are not such professionals like WordPress themes but I don't think so. For attractive theme designing we need HTML, CSS, JS, jQuery, Ajax like few designing languages which are enough to design an attractive theme and these are compatible with Blogger.
Today I will teach you how to convert your current design into a responsive blogger template.
Which is best Responsive Design or Mobile version?
Responsive Design are SEO Friendly as compared to separate Mobile version.
Responsive design adjusts itself according to all dimensions Like on Smartphone, Tablet or other devices.
Responsive Design reduces site loading speed that means your overall performance will increase.
Responsive Designs also increase your earnings and you can use responsive adsense ad unit to maximize your earnings.
To Check or Test Responsiveness of your design. You need to any tool I suggest
Test Responsiveness
Convert Your Current Blogger Template Into Responsive
Just Login to your Blogger Profile and select your blog.
Now go to Dashboard > Template > Edit HTML.
Click anywhere inside the code area, then press the CTRL + F keys and search for this code
Now Find Code <head>
Now <head> just after that, paste this code
Today I will teach you how to convert your current design into a responsive blogger template.
Which is best Responsive Design or Mobile version?
Responsive Design are SEO Friendly as compared to separate Mobile version.
Responsive design adjusts itself according to all dimensions Like on Smartphone, Tablet or other devices.
Responsive Design reduces site loading speed that means your overall performance will increase.
Responsive Designs also increase your earnings and you can use responsive adsense ad unit to maximize your earnings.
To Check or Test Responsiveness of your design. You need to any tool I suggest
Test Responsiveness
Convert Your Current Blogger Template Into Responsive
Just Login to your Blogger Profile and select your blog.
Now go to Dashboard > Template > Edit HTML.
Click anywhere inside the code area, then press the CTRL + F keys and search for this code
Now Find Code <head>
Now <head> just after that, paste this code
Code:
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" />
- Now Find Code ]]></b:skin>
- Now ]]></b:skin> just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
Code:
@media screen and ( max-width : 1280px ) { /* For Screen Size Less than 1280 ---*/ @media screen and ( max-width : 1280px ) { #main-wrapper { width:100%; margin:0px auto; } .header-wrapper { width:100%; } #content { margin-right:0; width:100%; float:left; } #sidebar { display:yes; } #footer-wrapper { display:yes; } } @media screen and (max-width : 480px) { /* For Size Screen Less than 480 ---*/ @media screen and (max-width: 480px) { #main-wrapper { width:100%; margin:05px auto; } .header-wrapper { width:100%; } #content { margin-right:; width:100%; float:left; } #sidebar { display:yes; width:100%; } #footer-wrapper { display:yes; width:100%; } } @media screen and (max-width : 320px) { /* For Size Screen Less than 320 ---*/ @media screen and (max-width: 320px) { #main-wrapper { width:50%; margin:0px auto; } .header-wrapper { width:50%; } #content { margin-right:0; width:50%; float:left; } #sidebar { display:yes; } #footer-wrapper { display:yes; } }
Now Save Template
Now you Have a mobile Version
Enjoy It
Posts
