How To Add CSS Drop Down Function On Labels In Blogger

0
How To Add CSS Drop Down Function On Labels In Blogger
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.
<ul>
  <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>
Step 4. Now Replace all of the above code with the following below code.
 <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 */
.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}
Step 7. Now Save your Template...Done !
learn trick to create a beautiful stylish drop down menu label responsive widget in blogger template,install add show display unique drop down button on blogger categories,category.
Hello Folks,Today in this article we are going to explain a How to Add a Smooth label Categories...
SUMMARY

learn trick to create a beautiful stylish drop down menu label responsive widget in blogger template,install add show display unique drop down button on blogger categories,category.

You Might Also Like:

We hope this article helped you to learn How To Add CSS Drop Down Function On Labels In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add CSS Drop Down Function On Labels In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand