Make Drop Down Menu In Labels On Blogger

Labels gadget in blogger lets your visitors to see desired posts. Labels is a must have gadget for blogger but with increase number of posts labels also increase. So if your blog has a lot of labels and they are eating up a lot of space in your blog then you can set drop down menu to it without losing any of you label.



Labels Screenshot

The above screenshot demonstrates how it will look on your blog.

Steps to follow



  • Open blogger
  • Go to 'Layout' and select 'Add a gadget' and choose 'Labels'


Note If you already have labels gadget then jump this step.



Labels Gadget



  • Now, go to 'Template' and select 'Edit HTML'
  • Then select 'Labels' gadget in jump to widget drop down


HTML Editor



  • You'll see something like this


HTML Editor



  • Now, replace that code 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'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
undefined<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


  • Save template and visit your blog to see live changes.



Customize


Change the text that will appear in box.

<option>Click to choose a label</option>


I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

3 comments:

  1. Hi, thank you so much for sharing this information. It is very useful and worked in my blog. Do you know how to change the Popular Posts to smaller thumbnails? Currently, the Popular Posts/Recipes on my blog is too big and taking a lot of space. My blog is www.bakewithpaws.com

    Thank you:)

    ReplyDelete
    Replies
    1. Hey Yeanley,

      Thanks for leaving comment.

      Your blog is not working without www so please add all the A records in your domain control panel for the domain to work perfectly.

      About the thumbnails, you can change the size through CSS. :)

      Delete
  2. Thank you so much, you help me a lot!!

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.