How To: Make Blogger Gadgets Visible on Mobile Friendly Themes

If you are just getting started on this blogging journey for whatsoever your reasons may be, you may have encountered situations in which you have to tweak your page(s) theme in order to get things just were you like them. 
I decided to write this post because while attempting this task in the past, I searched the web for solutions on how to make blogger gadgets visible on mobile devices while using a mobile friendly theme for our blog. 
Nevertheless I seemed to encounter the same issue with " all " of the blogger help post encountered, until I was able to resolve the issue on my own with some trial and error. 

As you follow the steps below we will reveal the solution to this agonizing issue and hopefully make the steps a little much clearer.

Step 1. Access your blogger home page and click on theme on the left hand sidebar. Once you have accessed your theme you will proceed to click on " Edit HTML" next to the customize. 

Step 2. You will then have access to your themes entire HTML code. Click on "jump to widget" button and you will get a drop down list of widgets you may have already created. These are the widgets that you created when personalizing your blog page. 

In this example we wanted to make our widget #HTML 35 visible on mobile and or handheld (phones,tablets etc..) devices.  

Note: If you do not know the number of the widget, then you must go back to your Layout page in blogger home and give your widget a "Title". This way when you access the Edit HTML Theme you will be able to identify the widget # by simple searching for the name or title you gave it. 

The image above shows were you will place the conditional tag known as { mobile='yes' } (Do not use the brackets). This piece of code is straight forward letting mobile theme know you want to show this gadget in mobile devices. 

If you want a particular gadget to appear ONLY in mobile devices (phones,tablets etc.) and NOT in web browsing such as PC's then you simply replace 'yes' with the word 'only'.

Note: Do not change anything else in the HTML code.

Some mobile devices like tablets still show web or PC viewing versions regardless of this option. 

Step 3. As mentioned above, when you have located the gadget proceed to placing the mobile='yes' code or mobile='only' code 
between the piece of code shown as { 'false' title= }
eg: { 'false' mobile='yes' title= } (Do not include brackets). 

Very Important: Please note the error message in red in the above image ( Could not load theme preview: Error parsing XML, ......)
This is the area that took a while to figure out after getting error messages. As shown below you must make sure that when adding the mobile='yes' or mobile='only' code, there is a space between the'false'(space here)mobile='yes'(space here)title= 

eg: 'false' mobile='yes' title=  or  'false' mobile='Only' title=

Step 4: Once you have added the code appropriately, first hit the " Preview" button to to make sure you don't get any errors. 

If all is well, you should be safe to click the "Save theme" button. 

You are Done !

Proceed to you blog page on your mobile device (phone) and view your changes. 

Please leave us some feedback as to whether this helped. Find It...Love It... Share It !