How To Change Blogger Mobile Navigation Menu To Webview Menu

Some Blogger default templates on mobile devices like (Awesome Inc, Dynamic Views, Simple) always show a drop down navigation menu enclosed in a box.
This has truly made it hard now and again for guests to discover your contact page, aside from they look down to the footer on the off chance that you have included the contact page url there. 
Google Adsense is another imperative thing to consider, setting promotions underneath a drop down navigation is an infringement of Adsense Policy. In this way, numerous promotions underneath that spot on blogger mobile view were placed after blog posts. 

However, you can Change Blogger Mobile Navigation Menu To That of Webview Menu. like that of this blog. This post will guide you on the best way to do as such. 


How To Get this Done 
Before you begin, it would be ideal if you firstly Backup Your Template so you can without much of a stretch re-upload it on the off chance that you disorganized your blog’s xml code.
==> Click on “Template” > ‘Edit HTML’ , Click anywhere in the box and press Ctrl+F key and enter 

****Also, you can use the “Jump To Template” option to easily get to the PageList1 widget code.
==> On getting there, 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>

READ ALSO  Best Hosting Recommended for All Bloggers

==> On seeing 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’/>



==> Finally Click “Save Template”
==> Go to “Template” > “Customize” > “Advanced” > “Add CSS
==> 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;
}

==> Then, Click “Apply To Blog
Its Simple right?. Check your blog on mobile device and you will see that the navigation menu is displaying as it does on web view. 

Should you have any issue? Drop your comment!
READ ALSO  What is the difference between padding and margins?

Comments(2)

  1. August 31, 2017
  2. August 31, 2017

Leave a Comment

%d bloggers like this: