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:
Pages gadgets on Desktop
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:
Now, look for a line that looks something like this:
If we now check the mobile version, it will look something like this:
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:
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:
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.