It is sometimes difficult for visitors to find their contact page, except that the drop foot down, if you added a link to contact us here.
Google AdSense is another important thing to consider placing ads in a drop-down orientation is a violation of the AdSense. Consequently, many recent ads below that point at the hearing was the driver of a blogger at the bottom.
Well, you can delete the combined mobile view and show it in the same way that appears on your terms. This tutorial will guide you on how to do it.
How To Get Started
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.
==> Scroll down and look for the following codes :
<select expr:id='data:widget.instanceId + "_select"'>
<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'>&#9660;</span>
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.
==> Scroll down and look for the following codes :
<select expr:id='data:widget.instanceId + "_select"'>
<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'>&#9660;</span>
==> 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'/>
==> 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;
}
==> Click "Apply To Blog"
That's all.
View your blog on mobile and you should see that the dropdown menu displaying as it does on web view.
What's your take on this?.
0 Replies:
Post a Comment