How To Convert Blogger Template Into Responsive Or Mobile Version

 


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
  • <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.
  • @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; }

    }
    Note:- If You Want sidebar Hide sidebar from mobile Version
  • Now Save Template
  • Now you Have a mobile Version
  • Enjoy It
Previous Post Next Post

 

Advertisement