Site icon Roar IT Loud

How to Show Blogger Gadget-Widget on Mobile View BlogSpot

Blogger is a free blogging service provided by Google. I have Already discussed the Best Free Blogging Platforms and Blogger is one of them. I like blogger because you don’t have to pay a single penny for your blog (i.e. pay for web hosting or domain name, Privacy Protection etc) except your internet connection. You can easily Get Google AdSense Account Approval with Blogger Blogspot blogs to monetize your blog and Earn Money with Google AdSense. You can Apply for AdSense from Blogger and place AdSense ads on your blog. Besides this, you have to customize your blog yourself. Thus, you have to make some changes to display or show blogger gadget on mobile view for mobile users.

As blogger is free and awesome but there are some weak points too. You have to customize your blog for best user experience and also in terms of SEO. When you create your blog, by default the setting of the blog is not customize. You have to check and edit the setting according to your need.

Display-Show Blogger Gadget on mobile view

One of them is to show and enable your blogger Gadget on Mobile View. By default, all the Gadget are not Visible or are not shown to the visitor who visits your blog on a mobile phone. They are automatically redirected to the mobile version of your blog. You can also check you blog by visiting with your mobile phone, you will notice ?m=1 at the end of your blog URL. (see the picture below)

Roar IT Loud blogspot Mobile version view show gadget on mobile view

There are no Gadget in the mobile version of your blog. To Show HTML/JavaScript gadget,Labels gadget, Popular Post gadget etc on your mobile version view.

Steps To Show and Display Blogger gadget on Mobile Phone View

  1. Add Gadget
  2. Select “HTML/JavaScript” Gadget
  3. Paste the HTML/JavaScript code or simply write text and Save it
  4. Click the ‘Edit gadget’ which you recently added
  5. Copy Gadget ID
  6. Edit “HTML Template” and Save “HTML template”
  7. Select respective ‘mobile’ attribute

Add Gadget

show blogger gadget on mobile view steps by steps

Select “HTML/JavaScript” Gadget

Select “HTML/JavaScript” Gadget

Paste the HTML/JavaScript code or simply write text and Save it

Paste the HTML/JavaScript code or simply write text and Save it

Click the ‘Edit gadget’ which you recently added

Click the ‘Edit gadget’ which you recently added

Copy Gadget ID

Copy Gadget ID

Edit HTML Template and Save “HTML template”

In my case, I copied HTML1 and it will be different in your case. After copying the text, Open the “Edit HTML Template” and Find for the copied/selected text. Click anywhere inside the Template editor and press Ctrl+F and search for HTML1 (in my case). You will find something like this.

<b:widget id='HTML1' locked='false' title='Show Gadget on Mobile' type='HTML' visible='true'>

You have to add Mobile attribute in this line by just adding mobile=”yes” and save the Template.

<b:widget id='HTML1' mobile="yes" locked='false' title='Show Gadget on Mobile' type='HTML' visible='true'>

add mobile=yes to show gadget on mobile view version.jpg

Select respective ‘mobile’ attribute

mobile=”yes” – This will show and display the gadget both in Mobile view and Desktop view.

mobile=”no” – This will not allow a gadget to show or display in the mobile view.

mobile=”only” – This will allow a gadget to display or show only on the mobile view.

Still Not Showing Blogger Gadget on mobile view version?

If you are still unable to display the gadget on Mobile View then it means you have not selected the Custom option on Mobile theme which will customize your desktop view and show it also on mobile view.

Exit mobile version