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 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 the 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:

<b:widget id='PageList3' locked='false' title='My Page' type='PageList' version='1' visible='true'>

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:

<b:includable id='main'>...</b:includable>

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

<b:if cond='data:mobile'>
  <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:link.isCurrentPage'>
        <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
      <b:else/>
        <option expr:value='data:link.href'><data:link.title/></option>
      </b:if>
    </b:loop>
  </select>
  <span class='pagelist-arrow'>&amp;#9660;</span>
<b:else/>
  <ul>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
      <b:else/>
        <li><a expr:href='data:link.href'><data:link.title/></a></li>
      </b:if>
    </b:loop>
  </ul>
</b:if>

The code above contains two parts. The 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:

<b:if cond='data:mobile'>
  <ul>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
      <b:else/>
        <li><a expr:href='data:link.href'><data:link.title/></a></li>
      </b:if>
    </b:loop>
  </ul>
<b:else/>
  <ul>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
      <b:else/>
        <li><a expr:href='data:link.href'><data:link.title/></a></li>
      </b:if>
    </b:loop>
  </ul>
</b:if>

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 a 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:

<b:if cond='data:link.isCurrentPage'>
  <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>

to this single line of code:

<b:if cond='data:link.isCurrentPage == &quot;false&quot;'>

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:

<b:if cond='data:mobile'>
  <ul>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:link.isCurrentPage == &quot;false&quot;'>
        <li><a expr:href='data:link.href'><data:link.title/></a></li>
      </b:if>
    </b:loop>
  </ul>
<b:else/>

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:

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>

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.

.mobile .PageList{
background:#000;
padding:10px;
margin:0;
}

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

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

Conclusion

With Blogger, we have a nice collection of Gadgets to modify our website. One of those is the Pages gadget, useful for adding external links to our sidebar. The only problem is the way it is displayed on 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 the mobile version? Drop a comment and let us know.

Tags:

25 Comments

Click HERE to add your Comment
  1. New Frau of Berlin
    October 6, 2016
    • admin
      October 6, 2016
  2. Tamaska
    May 1, 2017
    • admin
      May 1, 2017
  3. Subudhi AN (TEACHERSGUIDE)
    July 5, 2017
  4. karan patel
    July 11, 2017
  5. NYSC
    July 23, 2017
  6. Shahzaib
    September 23, 2017
  7. BLOGGING GURU
    August 12, 2018
  8. SmartyTricks
    January 13, 2019
  9. JioTech
    May 9, 2019
  10. Waec Shortlist
    July 12, 2019
    • admin
      July 13, 2019
  11. Matthew
    August 23, 2019
  12. Busayo Adejayan
    September 19, 2019
  13. Subham Roy
    December 27, 2019
  14. Kulbir Singh
    May 9, 2020
  15. Rachel
    June 25, 2020
    • admin
      June 25, 2020
  16. Eric
    March 30, 2022
    • admin
      April 1, 2022
      • Eric
        April 2, 2022
        • admin
          April 2, 2022
  17. Loyola
    August 3, 2022
    • admin
      August 3, 2022

Leave a Reply to New Frau of Berlin Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.