Make Drop Down Menu In Labels On Blogger

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>


Rishabh Singh

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. Bake With Paws4 January 2018 at 12:54

    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. Rishabh Singh4 January 2018 at 21:26

      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. Erga Kandly19 January 2019 at 21:19

    Thank you so much, you help me a lot!!

    ReplyDelete

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

Subscribe to: Post Comments (Atom)