How To create Blogger Mobile Pagelist drop Menu show Like Webview (updated)

(UPDATED)

Blogger default templates on mobile should certainly offer you a drop menu pagelist.

This has extremely created it tough generally for guests to search out your contact page, except they scroll right down to the footer if you’ve got superimposed the contact link there.

Google Adsense is another vital issue to contemplate, putting ads below a drop navigation could be a violation of Adsense policy. Therefore, of recent several ads below that spot on blogger mobile read were force to the lowest.

Well, you’ll eliminate the drop pagelist on mobile read and let it show in identical manner it seems on webview. This tutorial can guide you on the way to do therefore.





How To Do it

Before you get started, please, BACK UP YOUR TEMPLATE so you can easily reverse should in case you mess up your blog’s code.

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

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

Now replace above code with this one

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

Read Also: How to Center Title and Description of Blogger Blog

pagelist widget code blogspot design 
==> 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; 
}

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}



Click on “Apply To Blog 

Don’t thank me now thank me later.

Read Also  How To Submit Your Blog To Bing In 6 Steps | Blogger

Written by Yusuf Bitrus

I'm a Digi-Preneur, Affiliate Marketer, SEO intermediate and Blogger by heart.
I Help bloggers and business by writing and providing solutions digitally via my blogs, social media, and online/offline events.

2 Comments

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

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