Friday, February 1, 2013

How To Change the Labels Widget to Drop-Down Menu in Blogger

Happy Friday friends!  I'll bet you have some fun plans in the works for the weekend.  In case you are planning a weekend at home by the computer and feel like tinkering around on your blog - you might be interested in this tutorial.  When I shared my new blog design someone asked how I made the drop down menu for the labels/categories widget.  It was super easy and I believe it helped the sidebar look a little less cluttered which was my goal.  You can actually google just about anything that you want to do to your blog and get the answer - some tutorials are easier to understand than others.

To change the labels widget on blogger, here is what you do:

Disclaimer - always back up your template before making changes to html or you might end up with a huge mess on your hands.  Been there :(

  1. Log into your blog.
  2. Click design tab.
  3. Then click edit html.
  4. press the ctrl key and f simultaneously which will give you a search option.  Type in label to quickly locate this code: <b:widget id='Label1' locked='false' title='' type='Label'/>
  5. Replace this code <b:widget id='Label1' locked='false' title='' type='Label'/> with the following:
<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'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose</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>


If you would like to change the width of the menu, change the percentage higher or lower (coded in purple) to fit your sidebar.  As always, preview before saving.  Viola!  You now have more space on your sidebar!  I hope this helps!


If you like this sort of thing and would like to learn more, let me know.  I'm no expert, but have certainly wasted spent a lot of time educating myself and have more to share if you are interested.


***My wish for you this weekend is that you have time to reflect, to laugh, to love, and to be loved.  Enjoy my dears!  

15 comments :

  1. Thx Rene. I think I'm going to do this. Happy Weekend!

    ReplyDelete
  2. Wonderful information my daughter would be very interested in this post. Thank you so much.

    ReplyDelete
  3. Thank You! You don't know how timely this is for me! I just finally got brave enough to add the HTML widget to my sidebar and have been having fun adding things and enlarging photos. Next task was to change my menu bar and there was your post! So happy!

    ReplyDelete
  4. This is great information, and you are soooo righting about backing up first. It has not happened to me but I am paranoid after hearing about it happening to others. Have a great weekend!

    xo, Tanya

    ReplyDelete
  5. Thanks...I'm going to bookmark this for future info.I wish I was more of a tech-y but its all mud to me!

    ReplyDelete
  6. Well, hello, Rockstar. Thank you. I have been meaning to get around to cleaning house on the blog but have yet to do it. Will use this for sure. Thanks!!!!

    ReplyDelete
  7. Ok, don't tell me you did your own blog redesign??? Hats off to you!!

    Wishing you a lovely weekend too!
    xo~Jill

    ReplyDelete
  8. And it's nice to see some spam comments hitting you to - tee hee ;(...
    Jil

    ReplyDelete
  9. Thanks for the great tip, little clever cookie!

    ReplyDelete
  10. Great tutorial! Thank you. NOw I need to be brave enough to try this!

    ReplyDelete
  11. Thanks for the tip. I'm computer illiterate, so any step by step blogger instructions are super fantastic for this gal. I'll take any you want to share. :)

    ReplyDelete
  12. So I went to try this just now because I think it is a great idea and I can't even figure out how to edit html in the new blogger template. I'm hopeless :(

    ReplyDelete
  13. Thank you for this, Rene. Finally got mine changed!

    ReplyDelete
  14. Thank you so much for this. It's so easy to do. I do with all of my new designs!!

    ReplyDelete
  15. Thanks so much! Great info, and really easy to follow!

    ReplyDelete

I love your comments and read each and every one. Your questions will be answered here or you can email me at cottageandvine@triad.rr.com

Related Posts Plugin for WordPress, Blogger...