X Close
T Thursday, July 31, 2014

How To Show A Widget In Mobile View In Blogger

fahim raza 12 Comments so far

How to show a widget in mobile view in blogger | 101Helper

Adding a gadget in blogger is very easy but the gadgets don't appear in mobile view until they are enable for mobile. Gadgets are added in blog to help visitors read your blog e.g search box to find posts, popular post gadget to help them read popular posts, related post gadget to help them read similar posts etc. But when a gadget is added in blogger it will show up only in Desktop. What about mobile visitors? now a days many people read blogs through smartphones so if there is no search box how will they search posts? if there is no related posts gadget how will they read similar posts? and so on. A most common problem of every blogger is low traffic and for increasing it bloggers are doing hard work such as working on traffic exchanging sites to exchange traffic, paying for traffic, adding gadgets(relates posts, popular posts, recent posts, random posts) but they are forgetting about mobile visitors.


Traffic isn't that which you get from desktop but mobile visitors are also important. You can engage visitors with your blog for a long time by enabling gadgets in mobile view. So visitors which reads blogs through mobile phones could find your blog helpful. 



How to show widgets in mobile view in blogger:

It is very easy to enable gadgets in mobile view in blogger. Follow the below steps to enable gadgets in mobile view.


(1). Go to blogger and login to your account.


(2). Click on template and edit it.


(3). After editing you blog's template click on Jump to widget.

(4). Now select the widget which you want to show in mobile view. I am selecting Html4(search box) in this tutorial. 

Make sure to name your gadget in the Layout while adding it because naming gadget before editing Html will help you to find the gadget easily.

(5). After selecting your widget you will see a code similar to below piece of code:

  <b:widget id='HTML4' locked='false' title='Google search' type='HTML'>

(6). Now after finding code similar to above just write mobile='yes' after Locked='false' as shown in below image(it will enable your widget in mobile view).

How to show a widget in mobile view in blogger | 101Helper

(7). Click save template and all is done! open your blog in mobile by using this link http://www.your blog name.blogspot.com/?m=1.

How to show a widget only in mobile view in blogger:

Showing a gadget in mobile view only is similar to showing a widget in mobile, like above we add mobile='yes' to show a gadget in blogger mobile view, here we have to do something similar to above. So now if you want to show a gadget only in mobile view and not on the desktop you have to use mobile='only' instead of mobile='yes'. Say that you are trying to show search box only in mobile view now you have to use above method to jump to the widget and then you have to type mobile='only' and click on save template. That's it! the overall code should be similar to the below piece of code:

<b:widget id='HTML4' locked='false' mobile='only' title='Google search' type='HTML'>

Note: When a widget is shown only in mobile by adding mobile='only' to its code then that widget is shown in mobile only but a problems rises that is blogger layout doesn't let you to grab gadgets, so you can't move any widget after adding mobile='only' to any widget code so if you wish to grab/move a widget you must remove mobile='only' first. Blogger will allow you to grab widgets only after you remove mobile='only' from widget's code.

If the widget which you are trying to show in mobile site is not appearing then first enable custom template for mobile site as show below steps:

Step 1: Go to blogger dashboard, navigate to template and edit the mobile template by clicking on the wheel below it.


Step 2: Switch your template to Custom from simple or default template.

how-to-change-mobile-template-in-blogger

Step 3: Click on save and you are done.

I hope this post was helpful to you, if you have any problem ask me in comments.

Share this post and help my blog grow.

Follow and subscribe for latest news.




Tags: how to make gadget widget show on mobile view of blogger blog, How to show a widget in mobile view in blogger,how to add widgets to mobile site in blogger,show widget only in blogger mobile view,popular post widget,related post widget in blogger mobile


12 comments :

  1. I have tried this
    but still nothing appear (popular posts)
    My blog
    http://www.liga4u.com/?m=1

    ReplyDelete
    Replies
    1. Its because you haven't used custom template on your blog. First use custom template for mobile site and then follow this post. I recommend you to read this post http://101helper.blogspot.com/2015/05/how-to-optimize-blogger-blog-for-mobile.html

      Delete
  2. showing an error message xml persing error. and telling to close my b widget tag with :/> but it already closed.

    ReplyDelete
    Replies
    1. Refresh your page and try again you should'nt see any error like this because we are not adding any xml code here. Make sure to add mobile='yes' or mobile='only' exactly as they are don't mistake it and i am sure you will not see any error.

      Delete
  3. I've done everything stated here and I still can't get the gadgets to show up on mobile. My blog was set to Custom already and I did exactly as stated with the mobile='yes' part in html script. Still nothing.

    Would that fact that I have a customized domain make any difference?

    ReplyDelete
    Replies
    1. No it doesn't matter if you have a custom domain. Make sure that you have enabled custom mobile template in your blog. If still you can't see any gadget appearing then reinstall your template and try again. I personally have followed this post and its working fine you can view my site from mobile to see.

      Delete
  4. Dear sir how to remove this ad from mobile view (site: cetjob.com...pls help and see attached image; Help me.. pls send me solution at dr.irfan.mansuri@gmail.com

    ReplyDelete
  5. Thanks, using the tips here I could fully customize my mobile look of the blog.

    ReplyDelete