How To Make Your Blogger Mobile Pagelist Drop Down Menu Display Like Webview

The default mobile view of any blogger template offers you a drop down menu Pagelist.

Most visitors finds it difficult to Navigate the blog since they expect to see same pattern of page list they see on the desktop view, and this makes it difficult for them to observe the dropdown page list on mobile.

This however reduces the user friendliness of your blog and somehow affects your page views. So there’s need for you to change this to look exactly like that of the desktop view and that’s what am going to teach you in this tutorial.

Lets get it started:

• Login to your blogger dashboard
• Click on template ==> Edit HTML, then Search for <b:widget id='PageList1'. Using CTRL F
• Or you simply use the jump to widget option to navigate to Pagelist1 widget code.

Then look for the following code:

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

Then replace the highlighted code with the following code.

<div align='center' class='tabs-outer'>
<strong>
<b:loop values='data:links' var='link'>
<span> <a expr:href='data:link.href'><data:link.title/></a> </span><!--separator-->
</b:loop>
</strong>
</div>
<div class='clear'/>

==> then Click "Save Template"

Next Step:

==> Go to "Template" > "Customize" > "Advanced" > "Add CSS"

==>Then  Copy and paste the below code, in the "Add CSS" box

.mobile .tabs-outer {
color: #333;
text-align:center;
width:auto;
overflow:hidden;
margin:0;
padding:0px 0px 0px 0px; }
  .mobile .tabs-outer span a {
color: #fff;
padding:0 7px;margin:0;} .mobile .tabs-outer span a:hover {text-decoration:none;color: #fff;font-size:1.0em;padding:0 5px;margin:0;}

Finally Click on “Apply to Blog”

And that’s all about it; you should have a desktop like page list on your mobile view if you have followed the above steps correctly.

DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST