How to Remove Drop down Menu from Blogger Mobile View | Zealmat Tech Blog

Friday

How to Remove Drop down Menu from Blogger Mobile View

Share... ☂

Share on Facebook
Share on Twitter
Share on Google+
The awesome template created by Tina has being one of the best template and it has a Google layout and background and easy to customize

Most time your blogs new visitors find it difficult to to view most pages on your site and you don't expect all your visitors to be a blogger mostly on the entertainment niche but we have to make things more easier because 70% of our visitors or internet users today are using mobile device to access the net  so today  we  are going to be working on this with the following steps below and you after this we will want to know how you perform this if successful or not




Step 1
First you need to sign into you blogger dashboard the select your preferred blog from the list



Step 2
Now move your arrow down




Step 3
Click on "Theme" 



Step 4
Backup your template




Step 5
Then click on Edit HTML'



Step 6
Press ctlr F and search for this code below

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





 

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



Step 8
Click "Save Template"



Step 9
Now go to "Template" > "Customize" > "Advanced" > "Add CSS"



Step 10
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;
}


Step 11  
 Finally click on the "Apply to Blog" button






And that's all you need your visitors can now access your pages easy and faster and keep visiting zealmat.com for more tips
Share :

zealmatblog

2 comments:

  1. Do you think it's really better than the usual drop down menu field?

    Anyway it depends on the template one is using. My template is such that the drop down menu is best for Mobile view. While the full menu is awesome for PC view.

    ReplyDelete



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.