How To Change Blogger Mobile Navigation Menu To Webview Menu - MasterGBlog MasterGBlog: How To Change Blogger Mobile Navigation Menu To Webview Menu
Featured Featured
NookReporters
[Checkout] NookReporters.Com News Website
NNUIncome Program
How To Earn #50,000+ Monthly On Your Phone With NNU Income Program


Thursday, August 31, 2017

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


Copy the link below and Share with your Friends:

Download Our Official Android App on Google Playstore HERE
OR
Download from another source HERE



2 comments:

  1. thanks for letting us know that this post is so much helpful......

    hope to give you more!

    ReplyDelete