How to Make Blogger BlogSpot Layout As Responsive Template

How to Make Blogger BlogSpot Layout As Responsive Template

Are you working on Blogger BlogSpot?As we all know, BlogSpot Layout is not Responsive but still using Blogger, Here is a solution to make a Blog mobile Friendly Template and responsive layout.

There are two ways to make your Blogspot Responsive, so simply follow these steps to customize Your Blogger Blogspot Template. As well, you can use recently Blogspot Introduced New Responsive themes or mobile-friendly templates to make your blog responsive.

1.First Way to make BlogSpot as Mobile Friendly Template

• Go to the Blogger Dashboard and Select the Custom View Button, then Choose Mobile Theme.

• Now, go to the Theme and search for the widget which you want to display in Mobile View.

• Copy and paste this code into your blog HTML template-<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>

 

• Now Save your Theme and test Your Blog on the Mobile-Friendly Test Site.

2.Second Way to Make Your BlogSpot Theme as Responsive

• In this method, we have to add code below the Skin Tag.
• Go to blogger Dash Board, select Theme.

• Click on Edit Html Button.

• Find Below the skin Tag code and paste it into your HTML template code.

]]></b:skin>
---------------------------
    <style type='text/css'>

@media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer,
.region-inner {
width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}

 body.navbar{height:0!important;}
      .footer-inner{padding:30px opx!important;}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;margin-right: 0!important;}
}

   </style>

• Now, Save and Activate the Theme. Drag your BlogSpot Layout in closely to check the output.