Sign up for PayPal and start accepting credit card payments instantly.



Wednesday, March 26, 2008

Drop Down Label

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;

  1. Sign in to your Blogger account at www.blogger.com

  2. Select the blog you wanted to change in the list and click layout.

  3. Click Edit HTML in the submenu at the top

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

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









Subscribe to My Journey To Recovery

A candle loses nothing by sharing its flame.

6 Responses to "Drop Down Label"

Lesa McMahon said...

this is a fantastic hack, if only we could hierarchy the Labels like this...

Mathematics
-Algebra
-Basic
-Calculus
-Trigonometry

Anonymous said...

Мy dеveloper іs trying to
peгsuаde me tο move to .nеt fгom PHP.
I have alωауѕ disliked the iԁeа because of the еxpеnsеs.
But he's tryiong none the less. I'vе been
using Movable-tyρе on sevеrаl webѕіtes for about
a уear and аm concerned about swіtching to another platfoгm.

I haνe hеаrd good things abοut blogengine.
net. Is there a way I can impoгt all my wordpгess content into it?
Any help wοuld bе really appreciated!


Ϻу page :: lose belly fat

Anonymous said...

Wоnderful blog! Do you have any tips and hіnts
for aspiring wrіters? I'm planning to start my own blog soon but I'm a
little lоst on everythіng. Would you
propoѕe starting wіth a free platform like Woгdρгess οr
go for а paid option? There are so many chοiceѕ out there that I'm completely confused .. Any ideas? Kudos!

Here is my webpage: simple wood projects

Anonymous said...

Howdy! I simply want to give a huge thumbs up for the
great information you have right here on this post.
I can be coming again to your blog for extra soon.


Feel free to visit my blog; current weather conditions in seoul south korea

Fangyaya said...

ray ban sunglasses
cheap air jordans
nike blazers shoes
nike air max 90
true religion jeans
gucci handbags
gucci outlet
gucci belts
ray ban sunglasses uk
louis vuitton outlet
replica rolex watches
louis vuitton purses
true religion jeans
oakley sunglasses
ray ban sunglasses
kate spade
jordan retro 11
burberry handbags
kobe 9
oakley outlet
kevin durant shoes 7
coach outlet
louis vuitton purses
toms shoes
christian louboutin shoes
louis vuitton outlet
nike uk
nike trainers uk
nike store
nike sb janoski
20150507chenenen

dada24 Xu said...

discount oakley sunglasses
cheap air max
louis vuitton outlet
michael kors uk
adidas nmd r1
adidas superstars
nike tn pas cher
ugg boots outlet
timberland shoes
yeezy boost 750
skechers outlet
black timberland boots
nike air max 95
christian louboutin outlet
coach outlet online
coach factory outlet online
babyliss hair dryer
ugg outlet online
oakley sunglasses for sale
oakley vault sunglasses
tiffany and co outlet
ugg outlet online
designer handbags wholesale
coach factory outlet online
nike trainers
nike air max
coach outlet online
lacoste polo shirts
jimmy choo outlet store
oakley sunglasses outlet
polo ralph lauren outlet
coach factory outlet
nike store uk
rolex daytona
burberry outlet online
michael kors outlet online
louis vuitton purse
tory burch outlet online
2016826caiyan

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

PS - Word verification has been enable. Sorry about that [Sept 3rd, 2013].



Back To Top