How To Make Dropdown Menu For Labels Widget In Blogger?



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.

Sharing is Caring

Related Posts

Previous
Next Post »

10 comments

comments
February 11, 2012 at 9:12 PM delete

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
avatar
February 11, 2012 at 9:37 PM delete

@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
avatar
February 11, 2012 at 9:39 PM delete

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

Reply
avatar
February 12, 2012 at 9:34 PM delete

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

Reply
avatar
February 13, 2012 at 4:14 PM delete

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

Reply
avatar
February 13, 2012 at 5:54 PM delete

@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
avatar
February 23, 2012 at 10:03 PM delete

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
avatar
Anonymous
April 17, 2012 at 3:20 PM delete

Nice info U ve provided.....

Reply
avatar
April 30, 2012 at 10:39 AM delete

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
avatar

Thank you for your comment.