How to Remove Drop down Menu from Blogger Mobile View

Get Free SEO Tips

2017_03_18_17_09_45
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me

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

About Mathias Amodu 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

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

  2. you're really a excellent webmaster. The site
    loading pace is amazing. It sort of feels that you are doing any
    unique trick. Furthermore, The contents are masterpiece.
    you've performed a fantastic task on this topic!

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]