Creat dropdown label gadget blogger blog

Today we will create a dropdown label gadget on our blogger.com blog. Look at the images below. First picture is a normal state of a label gadget. We will change it as the second image.

Normal label gadget look like this

Customised dropdown/ popup label gadget.

Why we do this? Why do we changed that label gadget? Only for one reason. Because the new dropdown or popup like label menu will save space on sidebar of a blog. If you use many many tag, label or category for your blogposts, then I must suggest you to do it. This is not much hard as you think. Just change a line of code in blogger blog's template (Html Page).

How do we change our normal label gadget to a dropdown menu.

• Log in blogger.com with google id and password.
• At first create a 'Label gadget' on 'Page Elements' tab.
  
• Now directly go to " Design> Edit Html"
• Remember that : Don't tick on "Expand Widget Templates"
• Now find the code below:
  

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

• Delete this line. Paste the codes below in this empty place. That means paste the codes below instead of the line above.

• <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>Label Gadget Name</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>

• Preview your blog. If everything is normal then you will view a preview of newly customised dropdown or popup label gadget menu.
• If you satisfied, then 'SAVE TEMPLATE'.
  
• 
  
• Customisation:
• Change 'width:200px' to any number as per your blogs sidebar width.
• Change Label Gadget Name as your choice.
• Don't write any name on gadget's title area. Look at the second image I uploaded in this post. The name "Labels" still remain. We normally don't except it here.
• Thanks. I wish you can make it with no hassle.