January 01, 2017

How To Make Blogger Mobile Pagelist Drop Down Menu Display Like Desktopview


If you are a blogger using a blogger blogging platform and using a blogger default template like mine, you should notice that the mobile view of your blogger blog must surely give you a drop down menu pagelist.

This, has made it unfortunate for blog visitors to find a particular page in your blogger blog, only if you have added them at the footer page of your blog.

Also, google adsense is another essential thing to consider, placing ads below a drop down navigation is a violation of Adsense policy. Though Google has an article on where you can place ads on your blogger blog.

Now are you ready to change your blogger drop down pagelist on mobile view and let it display the same way it appears on desktopview. This tutorial will guide you on how to do so.


How To? 

First of all, backup your blogger template because you might make a mistake getting code error at end of the article.

==> Go to "Template" > 'Edit HTML' and search for <b:widget id='PageList1 '. Alternatively, you can use the "Jump To
Template" option to easily navigate to the PageList1 widget code.

==> Scroll down and look for the following codes :

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


==> Once you find the above codes, replace them with the codes below:

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



==> Click "Save Template"

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

==> Copy and paste the code below, 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;
}

==> Click "Apply To Blog"

That's all.
Now, view your blog on mobile and you should see that the dropdown menu displaying as it does on desktopview.

No comments:

Leave a comment

Please drop your comments before you leave. Your comments are highly appreciated. Click HERE to learn how to Comment On Our Horlartechgist. You can also GET IN TOUCH with us via our Social Media Platforms.