December 09, 2016

How To Make Your Blogger Blog Desktop Gadget Display on Mobile Template


Recently i changed my blog to a cool one and when trying to add gadgets to my new template, i notice that all my gadgets aren't showing on mobile view but only on desktop view. I felt sad because most visitors of a blog make use of phones which gives mobile view. After some minutes i decided to contact my friend "Google". I mentioned my problem and he fixed it for me by directing me to a top tech blog in Nigeria "Ogbongeblog".

All bloggers loved to add gadgets to their bloggers blog to make them cool. But my question is that did you just install a new template to your blog and after adding some gadgets you noticed that these gadgets are not showing on mobile view but only on desktop view. You are at the right place, i am here to fix the issue for you. Note :this problem occurs in most templates.

Yes after adding a gadget to your blog via layout section, it won't show. Why? Why is because you haven't enabled it to show on mobile view. So i have made everything easy in this article.

If you want any blogger blog widget to display on the mobile view of your blog, you will have to activate a "custom" mobile template instead of using one of the default Blogger mobile templates. Like below snapshot :

The easiest way to do this is by adding mobile=’yes’ to the <b:widget> tag of the widget, right inside your blog's html template while editing.

Now, let's assume you have used the HTML/Javascript gadget to add an advertisement to your Blogger blog but it not showing on mobile view, and you want it to display on the mobile view of your blog, just read through :

Step 1 : Firstly, you need to get the id of the widget that isn't showing on mobile view. You can read how to get id of any Blogger widget for better understanding.


As seen in above snapshot, the widget id is HTML5 .

Step 2 : Next, is to go to "Template" >> "Edit HTML"
Step 3 : Click on the "Jump To Widget" button on the edit template page and click on the id of the widget you want to show on the mobile view of your blog and it will automatically taken to the <b:widget> tag of the widget.


example :
<b:widget id='HTML31' locked='false' title='' type='HTML'>....</b:widget>

Step 4 : inside the tag and type mobile='yes' in front of the 'false'. Now your new code should now like like this:
<b:widget id='HTML31' locked='false' mobile='yes' title='' type='HTML'>....</b:widget>





Am sorry if the layout id is different from the template own. Just skip image error. 

Step 5 : Click "Save Template" to save your template. Now go to your site using mobile view by adding ?m=1 in front of your blog url e.g www.horlartechgist.com?m=1

The widget will now show in mobile view. You can also apply this method toto other widget which you want to allow it display on mobile view. Is this helpful? Drop your comments below!

5 comments:

  1. The mobile applications with smooth navigation receive welcoming response from customers across globe. Make money

    ReplyDelete
  2. Amazing idea. I would love to give it a go.
    https://mdasdrne7.wixsite.com/mysite

    ReplyDelete

Please drop your comments before you leave. Your comments are highly appreciated. Click HERE to learn how to Comment On Our Horlartechgist. You can also GET IN TOUCH with us via our Social Media Platforms.