Thursday, 3 May 2012

Create Dropdown Menu For Labels Widget

Label is a blogger widget offered by blog. It makes your readers to surf
your categories easily. The posts which you have written can be added under your label. label contains all the posts which you have written on it and leads to the reader smile. If you have more posts then your labels might be more and sooner or after they may cover your blog space.
A sustainable solution for it is to convert the labels widget to a drop down menu. Your labels will only be visible when readers click it. Whole the covering of sidebar will be saved and this changes the widget to just a single line.
Definitely this is a great idea. But before implementing this you should have label widget already installed. If you don't have then you can create a new. Go to Design>Page Elements and click "Add A Gadget" link and select label gadget.
If you have desire to change it to drop down menu then, follow this tutorial:

  • Go to Dashboard > Design > Edit HTML.


  • Back up your template.


  • Make sure you DO NOT tick the Expand Widget Templates checkbox.


  • Look for the following lines in your HTML code:


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

  • Replace that line 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/>
    (<data:label.count/>)
    </option>
    </b:loop>
    </select>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    • Change the width of the dropdown menu by changing 100% to any percentage, or pixel (px).
    • You can change “Click to choose a label” phrase in line 8 to your preferred phrase.
    • Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.
    • Then save the template.
    • Congratulation, now you have transformed your bulky label gadget to single lined category gadget.
    Enjoy your new gadget.!!

    No comments:

    Post a Comment