How To Change Dafault Blogger Label Widget Into A Dropdown Menu. - Web Freaks (Where Noobs Become Pros)


Wednesday, 5 June 2013

How To Change Dafault Blogger Label Widget Into A Dropdown Menu.

Sample image of dropdown menu

In this posts i'm going to teach step by step on how to replace/change the default blogger label widget into a dropdown menu, you can add this any where you like in your blog.

Sample image of dropdown menu

1.First thing to do is login to your blogger account and add a LABEL widget.
2.Then navigate to LAYOUT.

3. Click on Add A Gadget.

4. Under the Basic Menu Choose Label, don't forget to Save.

5. After adding a label widget navigate to Template then click Edit HTML.
"Do not click on Expand Widget Templates" just let it unchecked!

6. Search the below code "Label widget recently added.

<b:section id='labelsmenu' maxwidgets='1'> <b:widget id='Label1' locked='true' title='Labels' type='Label'>

7. Now copy the below code and replace the above code.

<b:section id='labelsmenu' maxwidgets='1'> <b:widget id='Label1' locked='true' title='My Blog Labels' type='Label'> <b:includable id='main'><select class='postform' id='cat' name='cat' onchange='location=this.options[this.selectedIndex].value;' style='font:12px Arial;color:#444;text-transform:normal;border:2px solid #000;padding:1px; margin: 8px 10px 0px; float:right'> <option>Click To Choose A Label</option> <b:loop values='data:labels' var='label'>    <option expr:value='data:label.url'><>      (<data:label.count/>)    </option> </b:loop> </select> </b:includable> </b:widget> </b:section>
 8. Now save your template and you're done!

No comments:

Post a Comment