Friday, September 2, 2016

How To Make Your Blogger Blog Template Responsive

  /     /   No comments   
Designing a unique blogger blog template for your personal blog or website has been the crazy stuff for everyone. But making the blogger blog template responsive has always been tough job to do as a blogger to give that feel of responsiveness to their site. Internet now can accessible via multi-sized Tablet, Laptop, PC or Smartphones. In this way it has been crucial for website to transform into responsive web to take the desire look on different platforms, optimizing the viewing experience, ease of reading or smooth navigation which are crucial for both SEO and user experience. In this post we are going to take cover this topic of making our blogger blog responsive by using some CSS @media queries that will allows us to customize our blog's appearance or will automatically adjust the screen width of particular platforms.

# HOW TO MAKE YOUR BLOGGER BLOG TEMPLATE RESPONSIVE 

Before heading to the optimizing part. First you should know about what is the responsiveness is all about. For checking the responsiveness of your blog site you just have to visit this site mobiletest.me and check how does your site fit on different size of platforms. See whether your right sidebar has been chopped up to the down or not showing the content properly or showing the content partially. If you think all things are showing properly like only the sidebar has shifted to downside and all other navigation menus are on its place then your site is responsive. But still you want to make it more responsive depending on the different screen sizes then follow the below instructions.
Make Your Blog Responsive

# STEPS TO FOLLOW:-

With growing technology internet has been the primary part of everyone to use it in their lives at regular basis. They always seek to news, info on their mobile or desktop. If you want to make your Blog responsive for these platforms then use these CSS files (if you are external CSS files) or to use these CSS codes in your Blogger template by navigating Click edit HTML → search for </b:skin> tag after this ( means just below this code) just paste the below CSS code.

For using these codes you have to use <style> tag to use all your CSS media codes within it and after placing these CSS codes within </style> tag according to your requirements. Means on which screen size you want to show your site responsive then place this CSS codes just below the </b:skin> tag.

# USE THIS MEDIA QUERIES FOR LAPTOP SCREENS:-


 For Laptop screens add the following code just before closing </style> tag.
  1. @media(max-width:1295px){
/* For Laptop Screen */
body{min-width:1020px;}
h1{font-size:35px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:215px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1020px;max-width:1020px;_width:1200px;}}

#USE THIS MEDIA QUERIES FOR TV SCREENS:-


 For Tv Screens add this codes just before the closing </style> tag like you have done earlier for Laptop screens.
  1. @media(max-width:1960px){
/*For TV screen */
body{min-width:1660px;}
h1{font-size:60px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:280px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1660px;max-width:1660px;_width:1900px;}}

# USE THIS MEDIA QUERIES FOR DESKTOP SCREENS:-

 For Desktop screens use this code before closing the </style> tag.

  1. @media(max-width:1380px){
/* For Desktop Screen */
body{min-width:1120px;}
h1{font-size:50px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:240px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1120px;max-width:1120px;_width:1300px;}}

# USE THIS MEDIA QUERIES FOR TABLET/IPAD SCREENS:-


 For Tablet/iPad screens use this code before closing the </style> tag.

  1. @media (max-width:1050px){
/* For Tablet/Ipad screens */
body{min-width:880px !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:840px !important;max-width:880px !important;_width:880px !important;}
img{max-width:100%; height:auto;}
h1{font-size:21px;}
}


# USE THIS MEDIA QUERIES FOR ANDROID OR HIGH-END SMARTPHONES:-

 For Android or High-End Smartphones screens use this code before closing the </style> tag.

  1. @media (max-width:800px){
/* For Smartphone/high end mobile devices */
body{min-width:100% !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:100% !important;max-width:100% !important;_width:100% !important;}.sidebar .sidebar.section .widget, .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer  {display:none !important;}.main-inner .columns {
          padding-left: 0px !important;
          padding-right: 0px !important;
        }
        .main-inner .fauxcolumn-center-outer {
          left: 0px !important;
          right: 0px !important;
        }
img{max-width:100%; height:auto;}
h1{font-size:18px;}
h5{font-size:12px;}
}

# EFFECTIVE CODE FOR BLOGGER'S MOBILE SITE:-


 The last code will affect the Blogger's mobile site to change the appearance of blog if you have chosen the custom theme for your mobile appearance in your blogger template section like those options are " Yes, Show mobile template on mobile devices" or "No, Show desktop template on mobile devices". if you'll use this code after placing the above CSS code then you'll see the mobile affecting view regardless of choosing this option " Yes, Show mobile template on mobile devices" .

    

  1. 

    <b:if cond='data:blog.isMobile != &quot;true&quot;'>
<style type="text/css">
/*code for TV*/
/*code for Desktop*/
/*code for Laptop*/
/*code for Tablets/Ipad*/
/*code for Smartphone/other mobile devices*/
</style>
</b:if>
    

    

    2. 








Remove the blue code if you are not using the custom template for your blogger blog. If you are using the leave it as it is. Just the save these code and done.. !!



Final Words !!



So these were the CSS media queries codes to make your blogger blog template responsive on various devices. Codes has been taken from the geniushowto blog. And these are working perfectly while applying on various templates. So use these codes to make your blog responsive.

0 comments:

Post a Comment