How To Convert Blogger Template Into Responsive Or Mobile Version
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
- 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.
- Now Save Template
- Now you Have a mobile Version
- Enjoy It
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
@media screen and (max-width : 1280px) {
/* For Size Screen 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; }
}