|
|
How To Create Drop-Down Label?
There was a comment from a fellow blogger on my Flag-Ship. Technoraz was asking how do I changed the label to drop-down menu's style.
I realized the label on both of my blogs were getting longer, and I needed to shorten it. Or else one side of the side-bar will be occupied by labels only. Furthermore I've purposely created only one post per page and I'm afraid the side-bar contents will be longer than the post.
As you well know, labels on Blog*Spot are the same as categories. But, Blog*Spot only supports label as a list of links. Not like Archives which support other options beside a list of links like Drop-down Menu and the Hierarchy type which can be expanded or collapsed.
I assumed that you have already added a page element for labels in your sidebar.
Below, I shall show you how it was done, the drop-down menu for label;
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
And replaced the tag of codes in red with the following code;
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
After replacing the tag of codes, save the template and voila, you got yourself a drop-down label.
Well, that's it for today. I hope you like it. Before I'm off again, here's a news about a Blogger Shares a Debt-Riddance Secrets which was brought to you by The News Room. Enjoy it and have a good day.
I realized the label on both of my blogs were getting longer, and I needed to shorten it. Or else one side of the side-bar will be occupied by labels only. Furthermore I've purposely created only one post per page and I'm afraid the side-bar contents will be longer than the post.
As you well know, labels on Blog*Spot are the same as categories. But, Blog*Spot only supports label as a list of links. Not like Archives which support other options beside a list of links like Drop-down Menu and the Hierarchy type which can be expanded or collapsed.
I assumed that you have already added a page element for labels in your sidebar.
Below, I shall show you how it was done, the drop-down menu for label;
- Sign in to your Blogger account at www.blogger.com
- Select the blog you wanted to change in the list and click layout.
- Click Edit HTML in the submenu at the top
- Before you change anything, look for a link at the top that says Download Full Template. Click it and save the .xml file in a folder where you can remember. This step is very important. We might need to upload it again if anything goes wrong. This .xml file is some sort like a back-up.
- Find the following section of code in the template.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
And replaced the tag of codes in red with the following code;
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
After replacing the tag of codes, save the template and voila, you got yourself a drop-down label.
Well, that's it for today. I hope you like it. Before I'm off again, here's a news about a Blogger Shares a Debt-Riddance Secrets which was brought to you by The News Room. Enjoy it and have a good day.
Technorati Tags:
Back To Top
Subscribe in a reader
Subscribe via email
0 Responses to "Drop Down Label"
Post a Comment
I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.
God's willing, all comments will be followed and replied.
p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.
~ ArahMan7