make your blog ready for mobile user make your blog ready for mobile user

How To Make Your Blogger Blog Ready For Mobile Phone

I think it’s really necessary to make every blogger mobile friendly. You might ask why. So here is a clear statement for you.

Mobile users are increasing dramatically because of so much cheap internet packages from the operators. Actually, the mobile internet cost is half or even lower than a wireless or broadband connection. So a lot of people choose to surf the internet using their mobile phones.

Blogger.com has feature for blogger blogs with which you can give a different view of your blog to the mobile web users. Now you can enable the mobile template for your blog which shows your blog in a more simple way without any big images, animations, and advertisements on mobile devices.

You don’t have to make any changes to your current blogger template, all you need to do is enable the setting on your blogger dashboard if you’re using on your blog responsive theme.As you know, millions of people use their mobile phones to access the internet. The mobile internet speed is also very fast these days.

so we can say many of your readers are coming to your blog through mobile phones…But, if you don’t make your blog mobile-friendly, you may lose all your mobile readers because in a mobile phone, a normal blog takes lot’s of time to load your blog posts and there are other issues that your site not fitting properly on the mobile screen.

so in this article, you will learn how to make your blog ready for mobile user as you know thousand of people use the mobile phone to access the internet because I say lots of your reader coming to your blog through mobile phone
if you do not make your blog mobile you may lose your mobile readers …

 How To Make Your Blogger Blog Ready For Mobile Phone

 

To make your blog ready for mobile user follow these step  

#Step 1

  1. Visit blogger and then navigate to template
  2. Click on the Gear icon shown below the mobile template
  3. And then Choose “No, Show desktop template on mobile devices”
  4. Now save.

Disable Default Blogger Template

if you are using a resposive blogger theme your blog design now will be mobile-friendly you  don’t need to follow the second step

Step 2

  • log in you account
  • click on the template
  • click on the edit HTML
  • now find the blow code to find it press CTRL+F
<head>
<b:if cond='data:blog.isMobile'> 
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
<b:else/> 
<meta content='width=1100' name='viewport'/>

Replace the above code with the below code. – This code will help us set the rules and the template what to show on  certain devices.

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

Save the template. This is just the first few steps and this code above gives information to the web browser about the screen size of the mobile device or tablet.

Adding Mobile Friendly Breakpoints For Blogspot blogs

After disabling the default mobile templates, and setting the browser breakpoint rules, now it’s time to make our template fit into all screen sizes and do note that whatever to add to the below breakpoints will on work at that breakpoint. e.g when you set a breakpoint on 1024px, any code you add will work on all breakpoints below 1024px except you set a lower breakpoint to let us say 580px which will then exclude CSS and codes below 580px from the earlier rule of 1024px.
Note that we have used CSS3 Media Queries by Keeping Apple Devices as a standard for simplicity but the breakpoints below cover all major brands like Samsung, Blackberry, Nokia, Windows Phone, Kindle, Nexus and so on.
1. Go To Blogger >> Template >> Backup your template
2. Click Edit HTML
3. Search for  “]]></b:skin”
<style>
/* ########  Responsive Cheat Sheet ########### */
/*-----Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:320px) {
}
/*-----Tablet Devices ZONE2 ----------*/
@media only screen and (max-width:480px) {
}
/*-----Small Laptops ZONE3 ----------*/
@media only screen and (max-width:568px) {
}
</style>

and paste the following CSS Code just below it.

Make BlogSpot Template Fit Mobile Devices.

Now in the device breakpoint above, we are going to be selecting ZONE2 which is for mobile devices with big screens like the iPhone 5, 6, blackberry 10 devices, Nokia Lumia and any other device with a big screen.
So now, I have configured my test blog to fit perfectly to the size 568px. Now all you have to do is replace the unit for Mobile phones (ZONE2) with the below codes.
/*-----For Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:568px){
}.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}}
}

Make BlogSpot Template Fit Tablet Devices.

After mobile devices, the next zone is for Tablets which are ranked at ZONE2. The codes below will make any blogger template fit into all kinds of templates. Simply use the below codes to replace the unit in ZONE2 above.
/*-----Tablet Devices ZONE2 ----------*/ 

@media only screen and (max-width:800px){
.main-inner .column-center-inner {padding: 0px;}
.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}
.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}
.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}}

Make BlogSpot Template Fit Small Laptops

Final zone works well for small laptops and tablets in horizontal view. Simply replace the unit with ZONE3 above with the following codes.
./*-----SmaLL laptops ZONE3 ----------*/
  @media only screen and (max-width:1010px) {
body .navbar {height: 0px !important;}
body{min-width:0!important;width:100%!important;padding:0!important}
.content{width:100%!important;min-width:0!important;overflow:hidden!important}
.header-outer{width:100%}
.fauxborder-left{width:100%!important}
html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}
.header-inner .section{margin:0;width:100%!important}
.footer-outer{width:100%!important}
.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}
#sidebar-right-1{width:100%!important}
.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}
.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}
#sidebar-right-1 a img{max-width:100%!important}
.post-body img, .post-body .tr-caption-container {
    max-width: 100%;
    height: auto;
}
}

Now save your Blogspot template you have successfully optimized your blog, your blog now ready for mobile phone

if you feel this post is helped you please do share it with your friends on Facebook, Twitter, Google+ and let me know if you face any problem in optimizing your blog

  1. The information you shared through your post is functional. I admire your work. Wish you all the luck for all your blogging efforts.

Leave a Reply