10How To Make Dropdown Menu For Labels Widget In Blogger?

Posted by Harwinder Kumar at 2/11/2012 Posted in:

Dropdown Menu for Labels Widget
Hello friends!! Today I'm gonna tell about creating drop down menu for labels widget in blogger. As archive widgets provide this feature by default, but for labels widget, you would've to manually implemented it.

A labels widget displays your post labels. By default, it displays post labels as "Lists" or "Cloud" only. Displaying labels with lists or cloud menu is good enough for new blogs or blog with few posts and labels, but as your posts increase, so will your labels too. So it will occupy a lot of space in blog's side bar. Using this hack, labels widget size will be reduced to just one line & will only expand into a full list when you click it.

Follow these simple steps:
  • Login to blogger.
  • Backup your template.
  • Go to Design> Edit HTML
  • Check “Expand Widget Templates".
  • Look for the code:
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
  • Replace it with:
    <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>
  • Preview it & then Save.
  • That's all, now you have reduced space for your labels widget.
Hope You Liked It. Receive Latest Posts Directly To Your Email
Get Free Updates:
Click On The Confirmation Link Sent To Your Inbox Or Spam

10 comments so far:

Ritro Blog said on 2/11/2012 9:12 PM:

not working ...
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section-contents" must be terminated by the matching end-tag "".

[Reply]
Harwinder said on 2/11/2012 9:37 PM:

@Ritro Blog: dude its not problem with this code, its ur another template issue, even b:section-contents is not a part of it!!

Try again n keep in mind to not to change other code!!

[Reply]
Harwinder said on 2/11/2012 9:39 PM:

@Ritro Blog: or look for b:section-contents n ended it with

[Reply]
Ritro Blog said on 2/12/2012 9:34 PM:

have not change anything with code...tried it as written in posts.

[Reply]
Harwinder said on 2/12/2012 9:37 PM:

@Ritro Blog: then it wud be ur template issue!!

[Reply]
RocFilling said on 2/13/2012 4:14 PM:

have done like this... & tried in 3-4 diff blog ,all are giving same error...

[Reply]
Harwinder said on 2/13/2012 5:54 PM:

@RocFilling: which error?? pls mention the error!! u can see an example on my site!! or if u need further help, then do invite me on gtalk!!

[Reply]
Ritro Blog said on 2/23/2012 10:03 PM:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section-contents" must be terminated by the matching end-tag ""

[Reply]
Anonymous said on 4/17/2012 3:20 PM:

Nice info U ve provided.....

[Reply]
Pawan Sharma said on 4/30/2012 10:39 AM:

Bro : <b:widget id='Label1' locked='false' title='Labels' type='Label'/" to </b:widget" part should be replaced else this code not worked and give parsing <b:section error.

[Reply]

We love to hear from you! Leave us a comment:

© 2014 Learn The Basics Of Ethical Hacking About | Site Map | Privacy Policy | Contact