Blogger How To Modify Pages Widget

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. 

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:

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:

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

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:widget id='PageList3' locked='false' title='My Page' type='PageList' version='1' visible='true'>

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: 

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:

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:

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.