Blogger : How to modify Pages widget / gadget for mobile template

blogger modifying pages gadget template thumbnail

When you want to add some external links to your sidebar for your Blogger website, you can use the Pages widget / gadget for that purpose. The problem with this gadget is the way it is displayed for the mobile devices. It is displayed as a dropdown menu containing the links, which might not be what you want. In this article, I will show you how to modify the template code for the Pages gadget, so that it is displayed the same way as in the desktop version.

This is how the Pages gadget looks like in desktop and mobile version. Three of them were added to the sidebar:

blogger sidebar pages gadget  on desktop

Pages gadgets on Desktop

blogger sidebar pages gadget on mobile

Pages gadgets on Mobile

As you can see, the mobile version of Pages gadget is displayed as a drop down menu containing external links plus the current page as the default option. To make that gadget look the same as in desktop mode, we need to modify the template code.

Go to Dashboard > Template and click on "Edit HTML" button. Template code should now be displayed.

Note: To make any modifications of the template code visible for the mobile version, you need to select "Custom" mobile template. Check my other article about Modifying Desktop & Mobile Template on how to do that. This article also has useful information for those who have never edited a template before.

Step 1 - Locate the Pages Gadget in the template

Click on the button "Jump to widget" and select PageList widget as shown below:

blogger edit template jump to widget

Now, look for a line that looks something like this:

There should be a black arrow on the left side. Click on it, so that the code inside it expands. You should see the following code:

This line also has a black arrow, so expand that as well. Inside it, there should be this code:

The code above contains two parts. First part is for mobile devices (lines 2 - 11), the second is for desktop (lines 13 - 21).

Step 2 – replace mobile template code with desktop part

First, we replace the content of mobile code (inside <b:if cond='data:mobile'>) with the desktop code, so the end result should look like this:

If we now check the mobile version, it will look something like this:

blogger sidebar pages gadgets on mobile after replacing it with desktop code

We got rid of the drop down menu, but it is still adding current page, as is evident in the above image with "home" link. In the next step, we will go to get rid of that, so only external links will be shown.

Step 3 – Modify the code, so it will skip the current page

To achieve that, we need to replace the code inside <b:loop values='data:links' var='link'> (lines 4, 5, 6 from the previous step) from:

to this single line of code:

That way, the current page will be removed and only our external links will be shown.

The whole mobile part of the code for the widget should look like this:

And the end result should look like this in a mobile version:

blogger sidebar pages gadgets on mobile finished version

Other changes

There are other changes we can do with the Pages widget.

Removing the title

If you don’t want to show title for external link in mobile template, simply remove or comment off the following line:

The line is located just above the <b:if cond='data:mobile'> line.

Changing CSS for mobile version

To modify the styles of the Pages gadget, simply add the following rule inside the <b:template-skin> located at the beginning of the template before the </head> end tag, which among other things contains the CSS styles.

After removing the title and using the above CSS styles, the Pages widgets in mobile version will look like this:

blogger sidebar pages gadgets on mobile finished version after removing titles and modifying styles


With Blogger, we have a nice collection of Gadgets to modify our website. One of those is Pages gadget, useful for adding external links to our sidebar. The only problem is the way it is displayed in mobile devices. It is shown as a dropdown menu containing the external links and it also adds the current page as an option. If we simply want to display the external links as they are in the desktop version, the modification of the template code is required.

I hope you have found this article useful. Did you also have a problem with the Pages gadget or any other gadgets in mobile version? Drop a comment and let us know.

Share this page


Add a Comment

Back to Top