How to show blogger gadgets on mobile veiw

Blogger provides loads of intresting tools for users to fine-tune or to make blogs function more than its expected to be or gadgets that increase readers engagement. There are many gadgets to choose from which each have different uses to blogger.
Gadget like;

Click to read my prev. Post on tips to write SEO friendly post

- popular posts displays the most read contents all the time, weekly and yearly to readers.
- Featured post gadget also displays a stand alone post to readers. Also there is an intresting gadget called html/javascript gadget which is used to display a third-party html function to blogs. A third-party html code like adsense, affiliate, or any html codes.

See how to increase reader engagement using basic blogger widgets

All gadgets added to blogger blog are restricted to show on desktop or pc view. A blogger monetizing his blog through adsense or affiliate needs to disply ads to visitors through ads codes which it should be added to blogger template or with the use of gadget (html/javascript). This ads will only show on desktop view but not on mobile version.

Showing blogger gadget on  mobile view is a best practice all blogger must know about if you want to increase your readers engagement, ad earnings, and so on.

How to enable blogger gadgets on mobile version

It is very simple and easy with the use of just a very short code [mobile='yes']. This tells the browser to show that particular gadget when it is viewed on  any kind of mobile device.

Now let see how to get that done.

Step 1
You must have set your template to show mobile template version
To get that done, click template from blogger dashboard

In the TEMPLATE page, click on the "gear" icon under the MOBILE preview shown.
We have two options at "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.

Click to choose "Yes. Show mobile template on mobile devices."

Choose a preffered mobile template (dynamic, picture window, awesome...) or choose "CUSTOM" to show the mobile version of your template.

Note:-
Custom adapts your template customization to mobile. Be sure to preview your template.

Click SAVE.

Once that is done we move to the next step.

Step 2
In the same blogger dashboard, click on layout to add a gadget anywhere you wan it.

Step 3
Assuming you are adding Html/javascript gadget, a page opens automatically where you will have to insert html codes to your blog

Now pay attention to the gadget id. To get the id, just chech its address bar, you see the link to that particular gadget, at the end of the link you see the id 'HTML 8' if you choose to add gadget for html/javascript its id will be something like HTML 4, HTML 6, HTML10, HTML 8, and so on just note down the ID and save your settings.

Step 4

To display Blogger gadget viewable on desktops to also appear on mobile devices, do the following:

1. Still the same blogger dashboard, click on Template and then on Edit HTML

2. Once the template editor opens click "Jump To Widget", click on the widget you are interested to be viewable on mobile... using HTML 8 for example.

We'll come to a code that looks like the one below. Its the codes automatically added by blogger to make it function after adding the gadget

<b:widget id='HTML 8' locked='false' title='Adsense' type='Label' visible='true'>

To show this widget on mobile devices, just add "mobile='yes'' immediately after ...locked='false' . So it now looks like:

<b:widget id='HTML 8' locked='false' mobile='yes' title='Adsense' type='Label' visible='true'>

Note- there should be just a single space before putting the code.

Repeat the above steps for any other gadgets which you would like to display on mobile devices.

3. After enabling all the gadgets you need, SAVE TEMPLATE

Just go ahead to view your blog with those gadget showing on mobile devices.

After saving the changes, open the blog on mobile device and check. The widgets you enabled will now be displayed on the mobile device . This includes widgets such as popular posts, labels, others and even Google Adsense code added through HTML/JAVASCRIPT widgets.

Dont forget to share to fellow bloggers. In a sentence, there is love in sharing.