How to Make your Blogger Blog Template Responsive

Tweaking Blogger Blog's template with CSS media queries to make it responsive so that it fits any screen or size, be it TV or mobile it will just fit it right

How to make your blogger blog's template responsive via geniushowto.blogspot.com responsive web design with css media queries

Making Blogger Responsive

Responsive Web Design (RWD) has become the intergral part of the web with Internet now accessible via many multi-screen sized platforms like mobile, TV and tablets/ipad. In such a case it is crucial for websites to switch to a responsive web design so that they can extend their reach on multiple platforms optimizing the viewing experience, ease of reading and a flexible navigation which are crucial for both SEO and user experience.

Talking about responsive websites, there are millions of Blogger blogs which although have a separate mobile site feature, they fail miserably when it comes to bigger screen sizes like Tablet, TV, etc.

In this How to you will learn how you can make your blogger blog responsive using CSS @media queries that allows you to customize your blog and site's appearance to automatically adjust to the screen based on the media screen query made which also includes making your images scale down to fit their respective containers and hiding of sidebar elements when the screen size detects a mobile platform. Let's get started with the responsive tutorial.

Instructions to Follow:

Testing your Site's Responsiveness:

Now if you are not sure what responsiveness is go to your site and change the browser window's size by dragging on the ends and see if your content fits the screen or the content shows up partially which needs to be scrolled horizontally to access the full content.

If it's the former than your site is already responsive and if it's the latter then it's non-responsive and you need to proceed further in this howto to make it responsive.
Media Queries for TV screens

With the growing Internet technology people can now browse websites while they enjoy their TV shows at the same time and in fact is a growing trend next to mobile platforms.

To make your site fit to TV screens use the below code in your CSS file (only if you are using an external CSS file) or

go to your Blogger template → Click edit HTML → Search for </b:skin> tag and immediately after it place the below code.
```
<style type="text/css">
/* all your CSS media queries will go in between these style tags geniushowto.blogspot.com script*/
</style>
```
You will be placing all the media queries in between the above style tags in the green highlighted area. Now place the below media query code for TV just before the ending </style> tag in above code.
```
@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;}}
```
This will make your site fit in the TV screens.

Media Queries for Desktop screens

For desktop screens add the below code just before the </style> tag that is after the TV screen media query code.

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

Media Queries for Laptop Screens

For laptop screens add the following code just before the style tag as done before for TV and desktop screens.

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

Media Queries for Tablet/Ipad Screens

For tablet/ipad screens add the following code just before the style tag as done before for other screen sizes as all the codes stack up one after the another in a queue.

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

Media Queries for Smartphones/High End Mobile devices

For Smartphones and other high end mobile device screens add the following code just before the style tag as done before in previous steps. This code removes the sidebar giving an elegant post body view to these mobile devices with faster rendering.

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

Unaffecting Blogger's Mobile Site

The last code for Smartphones and other mobile devices will affect the appearance of your blogger's mobile site only if you have switched it's theme to custom theme and in case you wish to avoid the change of appearance for your mobile site (in custom theme)then enclose the above style tag in desktop only conditional tag for Blogger which will altogether look something like the below code.
```
<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>
```
Remove the code marked in blue in case you are not using custom theme for your blogger mobile site. That's all save your template and check for it's responsiveness as shown in step-1 to enjoy as your site fits to whatever screen resolution you switch to.

Additional Method: Meta Redirection to Mobile Site using Media Queries

<link expr:href='data:blog.url + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate'/>

href="url of your separate mobile site"

You can also put the above codes in a external CSS file by removing the style tags and just placing the codes in a notepad document with .css extension and then upload it to some file storage service like Google drive or dropbox and then connect it using the link tag like in the below code and place it after the /b:skin tag.

<link href='url of your hosted css file' type='text/css' rel='stylesheet'/>

That's all just follow the above steps and make your blog site responsive to multi-platform screens as media queries take care of the font sizes(readability),images(appearance) and sidebar(navigation). In case you are putting Adsense Ads inside your blog posts then make sure to switch to responsive Adsense ads for higher CTR. For a live demo check our site by changing size of your browser.

Sunday, 10 August 2014