How To Make Blogger Widget To Show On Mobile View
You’ve got some widgets showing on your website when in
desktop view but wouldn’t display on mobile devices. Don’t worry, we are going
to work on that now.
desktop view but wouldn’t display on mobile devices. Don’t worry, we are going
to work on that now.
Some of the widgets that automatically shows on mobile view includes
the Header, Profile, AdSense, Pagelist and some other ones.
the Header, Profile, AdSense, Pagelist and some other ones.
If you desire any other Blogger widget to show on the mobile
view of your website which is Blogger based, you will need to activate
a “custom” mobile template rather than using any of the default
Blogger mobile templates.
view of your website which is Blogger based, you will need to activate
a “custom” mobile template rather than using any of the default
Blogger mobile templates.
After you are done with that, the next thing to do is to add
[mobile=’yes’] to the below tag of the widget, inside the Blogger’s html.
[mobile=’yes’] to the below tag of the widget, inside the Blogger’s html.
<b:widget>
The “mobile” attribute allows you to determine
which of the widgets should be available for mobile view. To determine this,
there are about four options to choose, this includes:
which of the widgets should be available for mobile view. To determine this,
there are about four options to choose, this includes:
- ‘default’
- ‘only’
- ‘yes’
- ‘no’
Now, getting back to the reason why we are here, follow the
below steps:
below steps:
WARNING: Before you embark on this journey ensure you back up
your Template.
your Template.
Step 1: Go and get the ID of the widget you wish to display
on mobile phones.
on mobile phones.
ALSO READ: How Locate Widgets in Blogger Templates to have more
knowledge on step one.
knowledge on step one.
Step 2. Go to “Theme” > “Edit HTML”
Step 3. Click on “Jump To Widget” and select ID of
the widget in question. You will see a similar code like the below starting
with the <b:widget> tag of the widget.
the widget in question. You will see a similar code like the below starting
with the <b:widget> tag of the widget.
<b:widget
id=’HTML11′ locked=’false’ title=” type=’HTML’>
Step 4. Click inside the code and type mobile=’yes’
<b:widget
id=’HTML11′ locked=’false’ mobile=’yes’ title=”
type=’HTML’>
Step 5. Click “Save Template”
You are done.
Share your experience via the comment box.