Create Labels widget with Dropdown menu

Unknown | 01:31 | 0 comments

When you write a blog post you categorise that post under a some name. That names are called as "Lables", "Tags" or "Categories". And that list of names (Lables) shhow in a widget called as lable widget.You can style your blog's label widget from different ways like adding cloud label styles.

But sometimes Label links get more space that blog can't hold.You can interlink up to 2000 labels in a blog with 20 labels per post.So in a situation like that you can use drop down lable widget to save more space.I describe how to make drop down label widget and add it on your blogger blog.Each label titles array alphabetically with number of posts.

  1. Sign in to your blogger account. 
  2. Then go to Layout at blogger left pannel and add lable widget. 
  3. Then go to Template-->Edit HTML.
  4. Click anywhere on the template editor and press Ctrl+f(windows) or Command+f(Mac).Then find Label1 code in your template.Now you will see a block of code like below.
 <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now replace that codes using below code block.
<b:widget id='Label1' locked='false' title='Categories' 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>Choose a Category</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>

Formating
  1. Replace Red color Categories with your desired title of the label drop down menu.
  2. width:100% define the width of drop down menu and you can change it with pixels.
  3. Change the title of the drop down menu instead of Choose a Category.
  4. If you don't want to display number of posts,remove above green color(<data:label.count/>) code.

Category: ,

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

0 comments