Hello Folks,Today in this article we are going to explain a How to Add a Smooth label Categories Widget in blogger template.This widget is very useful for labels of blogger website or blog.If your template do not have a drop down function on category then it's very hard to display all the categories of the website.In this label gadget all the category of your blog comes under it and you can show all the topics,categories and sections of your website.However you can see still so many websites does not have drop down label widget.Few days back one of our precious visitor asked for drop down widget and today we are here with this awesome label widget.We have used CSS to look widget more beautiful and some html to make work perfect.So to grab this blogspot label widget follow the steps mentioned below.
How to create a drop down label menu in blogger template
installations steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the following below code in your template.
Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD + F (Mac)
Step 6. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the following below code in your template.
<ul>Step 4. Now Replace all of the above code with the following below code.
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(
<data:label.count/>)
</li>
</b:loop>
</ul>
<div class="dropdownlabel">
<select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
<option> Search 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>
</div>
Customization:
To change the Search category with your desired name like choose category etc. change the above highlight text.
Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD + F (Mac)
Step 6. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Dropdown Label widget by www.bloggersstand.com */Step 7. Now Save your Template...Done !
.dropdownlabel select{outline:none;cursor:pointer}
.dropdownlabel{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropdownlabel:before,.dropdownlabel:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropdownlabel:before{border-bottom-style:solid;border-top:none}
.dropdownlabel:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}