Type in key words and search my blog here:

Loading

Thursday, October 1, 2009

Label drop down menu

Bree one of my favorite digi-scrappers asked me how to create a label drop down menu. I said I don’t know but I will learn. I did and I love it…thanks Bree!

Resource: BloggerUniversity

Step 1 – Add a labels gadget to your blog.

Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET and select LABELS.

Label_DropDownMenu_1

Step 2 – Decide if you want labels alone or label counts. If you want labels with the count beside them proceed to Step 3. If you only want labels skip to Step 5.

Step 3 – Back up your template. You can learn how to do that HERE.

Step 4 – Find and replace code.

Label_DropDownMenu_2

Go to CUSTOMIZE/LAYOUT/EDIT HTML AND using your CTRL+F (find key) find the following code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

You will replace it with this code:

<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'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

You can preview and save. The nice thing is that you can always choose to delete the gadget if you don’t like it. You can also change the word Labels to something else if you prefer.

Step 5 – If you only want the labels:

Go to CUSTOMIZE/LAYOUT/EDIT HTML AND using your CTRL+F (find key) find the following code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

and replace it with this code:

<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'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

For Word Document Instructions click HERE.

 

3 comments:

  1. Girl you are much too kind! Thank you so much for the tutorial! :) xoxoxo

    ReplyDelete
  2. Thank you Jeanette for all your help. I have just used my latest creation to scrap my blog thanks to your suggestion in my comments. I now have a three coulmn blog with a scrolling marquee and a brand new header. I could not have done it with out your tuts. I am sending you lots of hugs and love.

    ReplyDelete
  3. hi sweety
    thanks for your wonderfull message on my blog
    but i have followers on my blog
    on the right side when you scroll down a bit

    i wish you a wonderfull weekend
    hugs Leonie
    aka miss tatty

    misstatty

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template