Thursday, September 13, 2012

Create a Dropdown Labels Widget In Blogger Blog

Author: Gagan Masoun
Create a Dropdown Labels Widget In Blogger Blog
A labels widget are important for all blogs.It displays your blog posts labels.When you click on label then you land on a page containing posts which fall under that label. Labels help you to find similar post for you. If you are adding labels in huge amount then after some time you will see a lot of labels on your blog's sidebar widget.

On this stage many bloggers choose only few labels but other labels miss from widget.Don't worry here is the solution for you, shrink the widget -by converting it into a dropdown.Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.In this tutorial you will learn "How to Create a Dropdown Labels Widget In Blogger Blog".

Worth Reading:
Note: Please Make Sure You Have Installed Label Widget
  • Go to Dashboard > Template > Back Up Your Template
  • Edit HTML > Proceed
  • Make Sure You DO NOT Tick The Expand Widget Templates Checkbox
  • Press (Ctrl+F) & Find Given Below Code.
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
  • Replace Above Line With Given 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/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
  • Save Template & Its Done 

Customization: 

  • Change the width of the widget by changing 100% to any percentage, or pixel (px).
  • You can change “Click To Choose A Label” with your own title.
Your sidebar space is increase now, You can simply add more widgets on your blog's sidebar now.If you need our help ask via comments.Stay blessed.

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

2 comments:

  1. Wow great post! You make it sound so easy.

    Any ideas of how to turn the blogger "link list" into a dropdown box or a collapsing list?

    Many thanks, Sarah

    ReplyDelete
    Replies
    1. Thanks for liking our post.

      I will publish tutorial on your topic soon. Keep in touch...!!

      Gagan Masoun

      Delete