X Close
T Sunday, May 31, 2015

How To Optimize Blogger Blog For Mobile Phones

fahim raza 10 Comments so far
how-to-optimize-blogger-blog-for-mobile-sites

Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site. 

Initially all blogger mobile sites have simple or default templates which allow only specific gadgets such as: 
  • Header(logo)
  • Footer(powered by blogger)
  • Page list
  • Blog(posts)
  • Adsense
  • Profile
So you can't get full benefit of your mobile site until you have optimized it. So in this post I will help you to optimize your blog for mobiles so that you could get benefit from your mobile visitors.

In this post you will learn following things:
  • How to optimize mobile template(basics).
  • How to hide all useless things in mobile site which shouldn't appear on mobile site.
  • How to show essential gadgets in mobile template(Related posts, Ads, Follow/Share buttons, Search box).
So lets begin, we will start from optimizing mobile template.

Optimizing Mobile Template In Blogger:

Blogger has many mobile templates e.g simple, dynamic, picture view, Awesome inc, Water mark tec.

mobile-templates-blogger-101helper

And all the templates have different views, all blogger templates have an awesome look but they do not give you full benefit as they don't allow ads and other custom gadgets. So you can't add related posts widget(which is essential to increase page-views). 

So you need to use custom template and optimize it. Follow below steps to switch on your custom mobile template.

Step 1: Go to template and click on the icon shown below mobile template.

How-to-optimize-blogger-blogs

Step 2: Choose the custom template and click on save.

Blogger-mobile-template-101helper

Congratulations! you have successfully switched on custom template for your blogger mobile site.

Hiding Things In Blogger Mobile Site:

Every blog has something that should be only on desktop such as a gadget. But when a blogger mobile template is switched to custom every thing you have added in your blog template will start appearing in mobile view too. Here I have to mention that only those things appear in mobile sites also if you have added it in template, but if you have added something in layout as a new gadget, it won't appear in mobile site until you have enabled it. So here I am going to show you how to hide something in mobile view of blogger by using xml.

Step 1: Go to template and click on edit html.

Step 2: Click inside the code and search for something which you want to show only in desktop and hide it in mobile site.


OR

Add something to your template for example a gadget or a comment or a picture.

Step 3: Now just before the code which you want to hide in mobile site paste the following piece of code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

and after the code(which you want to hide in mobile site) type </b:if>

Explanation:

For example you have following code and you want to hide it in your mobile site:

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

Then according to above method your code should look like below code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html> 
</b:if>

Gadgets For Blogger Mobile Site:

Blogger gadgets created by blogger or other websites aren't compatible with mobile sites so you have to use special gadgets for blogger mobile site you can find some mobile site gadgets here.

Showing Things Only In Blogger Mobile Site:

If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>

and after it just add this piece of code:

</b:if>

For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
I am fahim, you can call me FK
</b:if>

Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.

Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!

Hope you like this post. If you have any question please help me know by leaving a comment below.

Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper


10 comments :

  1. Nice tips named “”. Thank you for posting this necessary article.
    If you have time please take a glance on my site hemlarm .

    ReplyDelete
  2. it is very nice and informative post. I benefited this post, now I know how to optimize blogger blog for mobile

    ReplyDelete
  3. Thank you for long waited demand for rensponsive mobile tutorials. Looking for more from u!

    ReplyDelete
    Replies
    1. Thanks for your feedback Azli ! Sure I will share more about blogger mobile if you have any suggestions tell me..

      Delete
    2. You know if we can edit the post style in mobile version of blogger? Centered the title and post?, More bigger font or if we can remove the arrow?

      Delete
    3. Yes you can do it by CSS. If you don't know css give me your blog's url I will do it and give you the code

      Delete
  4. Hey I have two questions-
    1) How do I make the images appear in the mobile site? It only shows the thumbnails for some posts due to the size. How do I fix this using css?
    2) You said that Adsense appears on its own on the mobile site. But it doesn't on my mobile. Where should I place the ad code for it to appear on mobile? :)

    ReplyDelete
    Replies
    1. You need to add a css code like this:

      .post-body img {
      width:value;
      height:value;
      }

      make sure to show the css code only in posts because if you show the code in homapage and other pages, images will become larger.

      And Adsense ads appears in the mobile you don't need to show them they will show on their own. You can see Adsense ads in my blog I haven't added any code or script. Though I can stop showing it but to show Ads I don't need to add any code.

      However if you are adding ad code directly above post footer or below header you need to add a code and also use custom template for mobile!

      Delete