How to Make Blogger Widget Display on Blogspot Mobile Template - No. 1 Information Portal How to Make Blogger Widget Display on Blogspot Mobile Template | No. 1 Information Portal

How to Make Blogger Widget Display on Blogspot Mobile Template

How to make blogger widget display on blogspot mobile template when viewed with mobile devices can be implemented easily. But for the newbies out there, it might seem pretty much harder unless you follow some step by step tutorials. In blogger, the mobile template are stripped down of other sections and widgets displayed on desktop view unless you particularly order these sections or widgets to display on mobile template.

mobile devices blogger widget

Most blogger widget when added manually, are only visible on desktop view while they remained invisible on mobile devices. But you can still order these widgets to display on blogger mobile template when viewed with mobile devices.
I have used this tutorial to make Google Adsense Ads display under the header section of my blog when viewed on mobile devices. In other to make widgets visible on mobile template of your blog when viewed on mobile devices, just follow these step by step tutorial below.

How to Enable Blogger Widgets to Display on Mobile Devices

First of all, you have to add the widget you want to display on your blog mobile template by following this steps below. Lets use propellerads for example.

1. Login to Blogger dashboard and click on Layout,

2. Then click "Add a gadget" and choose "HTML/Javascript"

3. Copy and Paste your propellerAds banner Ads code you generated or any other code you want to make it display on the mobile template of your blog. Whether Google Adsense or Affiliate Banners.

4. Then save the widget.

5. Check whether the widget appears on desktop. If it appeared, check on mobile view too. If it doesn't, then follow these steps below.

6. Still in Blogger dashboard, click to open the widget you want to use and then click on the address bar to get the widget HTML number at the end of the Address. The below picture we have HTML5.

display mobile devices

7. Now click on Theme, and then click on Edit HTML.

8. Use the "Jump To Widget", to find the widget you want to use. Here we are looking for HTML5. You will see a similar code like the one below;

<b:widget id='HTML5' locked='false' title='' type='HTML'>

9. To show this HTML5 widget on mobile devices, just add the code mobile='yes' to the above line. It will now look like this;

<b:widget id='HTML5' locked='false' mobile='yes' title='' type='HTML'>

10. Then save your template. You can simply do that to any widget you wish to display on mobile device from your blog.

After enabling the widgets to display on mobile devices and saving the changes, now return to the Template or Theme page again.

11. Click on the "gear" icon under the MOBILE preview shown below.
mobile devices display

12. You will see two options. "On mobile devices, show a mobile version of your current template".
Yes. Show mobile template on mobile devices. (choose this option)
No. Show desktop template on mobile devices.

13. Then click to choose  "Yes. Show mobile template on mobile devices."

14. On mobile template, click and choose "CUSTOM".

blogger widget display

15. Custom makes your template customization visible on mobile. Make sure you preview your template before you save.

After saving the changes, you can now view your blog on mobile device to see if customization is properly implemented which it should. The widgets you enabled will now be displayed on the mobile device. You can make any widget on your blogger blog show on mobile device using these steps in our tutorial above.

I hope you find this post helpful. Please like and share if you do. Also drop us a comment below we will appreciate it. Cheers!

You Might Also Like:


No comments:

Post a Comment

We love comments. Please do not leave without giving us one. We will appreciate it. Spammers Beware! Spam comments will be removed immediately. Thank you