How To Make Your Blogger Template Responsive with CSS & Meta Tag

Are you thinking that creating a Responsive templates is troublesome ? But, making a Blog completely responsive is some what difficult to do it. However by following my technique you’ll be able to build your responsive for higher than 80-85%. Responsive templates are required as a result of we’re living within the world of tablets and iPod. And these new devices have made us to make responsive templates.

$Are you thinking that creating a Responsive templates is troublesome ? But, making a Blog completely responsive is some what difficult to do it. However by following my technique you'll be able to build your responsive for higher than 80-85%. Responsive templates are required as a result of we're living within the world of tablets and iPod. And these new devices have made us to make responsive templates. I like to recommend you to possess responsive template for your blog. A responsive template will it's job by adjusting the sizes of the example by itself to the specified size of that particular device. In different words, if somebody browse your site in mobile then your site template ought to conscious of that device resolution. How to make your Blogger Template Responsive In your Blogger Dashboard go to Template section There click "Edit HTML" Then search ]]></b:skin> Once you finished searching ]]></b:skin> then paste the following code just above ]]></b:skin> @media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } } Now save your template ! That's it ! Need Any Help ? This is the easiest method for creating your blogger template into an responsive one. I simply hope I did justice with the post by creating it as simple as attainable. If you're facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7. Share your thoughts in comments ! script source : Blogshear$

I like to recommend you to possess responsive template for your blog. A responsive template will it’s job by adjusting the sizes of the example by itself to the specified size of that particular device. In different words, if somebody browse your site in mobile then your site template ought to conscious of that device resolution.

How to make your Blogger Template Responsive

In your Blogger Dashboard go to Template section
There click “Edit HTML“
Then search ]]></b:skin>
Once you finished searching ]]></b:skin> then paste the following code just above ]]></b:skin>

@media screen and (max-width: 1230px){
#header { float:none; max-width:none; text-align:center; }
#header-inner { margin-bottom:0px; }
#header h1 { margin-right:0px; }
#header p.description { margin:0; }
#header-right { position:relative; right:0; text-align: center; margin : 0 !important; }
.header-right-inner { margin: 0 30px ! important; }
.main-nav-top{ clear:both; float:none; }
.main-nav-main { margin:10px 0 0 0; }
#nav-search { float:none; margin:0; }
}
@media screen and (max-width: 960px) {
.sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; }
.subscribe_outer { margin: 0 -20px; }
.main-wrapper{ margin-right:0; width:100%; min-height: 0px; }
.ct-wrapper{ padding:0 15px; }
#content { padding: 5px; clear: both; border-radius: 0; }
.sidebar-wrapper .sidebar{ margin: 15px; }
.sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; }
}
@media screen and (max-width: 768px){
.header-wrapper { margin-right: 0; min-height: 0; width: 100%; }
#header { text-align: center; width: 100%; max-width: none; }
#header-inner { margin:30px 0 0; }
#header h1 { font-size:35px; }
.main-nav-top, .main-nav-main,
.main-nav-top ul, .main-nav-main ul{ text-align:center; }
.related-post { width:auto; }
#comment-editor { margin:10px; }
.footer { margin:15px; width:auto; }
.footer-credits .attribution{ display:none; }
}
@media screen and (max-width: 500px){
#header img { width:100%; }
}
@media screen and (max-width: 420px){
#header h1 { font-size: 30px; margin: 10px; }
.main-nav-main ul li{ margin:4px 10px; float:none; }
.comments .comments-content .datetime{ display:block; float:none; }
.comments .comments-content .comment-header { height:70px; }
}
@media screen and (max-width: 320px){
.ct-wrapper{ padding:0; }
.footer .footer-inner { padding: 45px 10px 10px 10px; }
.comments .comments-content .comment-replies { margin-left: 0; }
}

Now save your template !
That’s it !

If you’re feeling not good with the above script then try the below one! This code may help you to look your blogger template responsive. Just follow me,

Using Meta Tag

Step 1: Go To Blogger >> Template >> Backup Your Template
Step 2: Click Edit HTML >> Search For <head> tag and Paste the following Code below/after <head>.
Step 3: Once you finish just Save you template.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>

Step 4: Then again search for ]]></b:skin> then paste the following code just above ]]></b:skin>

@media screen and (max-width : 1280px)
{/* CSS FOR DESKTOP OR ABOVE 1280 PIXEL—-*/}
@media screen and (max-width : 1024px)
{/* CSS FOR TABLETS WITH BIG DISPLAY ————*/}
@media screen and (max-width : 768px)
{/* CSS FOR TABLETS WITH SMALL DISPLAY————*/}
@media screen and (max-width : 640px)
{/* CSS FOR SMARTPHONES / IPHONE ————*/}
@media screen and (max-width : 480px)
{/* CSS FOR MOBILES ————*/}
@media screen and (max-width : 320px)
{/* CSS FOR SMALL RESOLUTION MOBILES ————*/}

Step 5: Now just save your template and enjoy!

Need Any Help ?

This is the easiest method for creating your blogger template into an responsive one. I simply hope I did justice with the post by creating it as simple as attainable. If you’re facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7. Share your thoughts in comments !

script source : Blogshear,Bloggeryard