Skip to main content

How to Create Labels Drop Down Menu In Blogger

How to Create Labels Drop Down Menu In Blogger
In the past, we have shown you how to display labels in Blogger, How to style Labels in Blogger and How to Rename Labels in Blogger. Recently, one of our users asked us about How to create Labels Drop Down Menu in Blogger. If your blog has a lot of labels, then showing a Label widget in your sidebar would take a lot of space. Therefore, a Label or category drop Down menu will easily hold more than hundreds of labels without taking a large space. In this article, we will show you how to create labels drop down menu in Blogger.

Why to Use Labels Drop Down Menu:

You might have used the default Label widget provided by Blogger but if you have a lot of labels, then it would take a lot of space on your blog. Therefore, it will make your blog look unprofessional and untidy at the same time.

The main purpose of using labels drop down menu is to save your blog space and make your blog look more professional and presentable. Therefore, if you want to add Label drop down menu in Blogger follow the tutorial below.

Create Labels Drop Down Menu in Blogger:

  1. The very first thing you need to do is to Add a Labels Widget to your blog (If you have not added already). We'll convert the default Label widget into a Drop Down Menu. Hint: (Go to Blogger >> Template >> Layout >> Add a Gadget >> Labels).
  2. After adding the Labels widget, you need to add CSS codes to your Blogger template. Therefore, Go to Blogger >> Template >> Edit HTML and search for skin tag. After finding the skin tag, just above it paste the following code:
  3. /* Dropdown Label */
    .dropmedown select {
        outline: none;
        cursor: pointer
    }
    .dropmedown {
        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
    }
    .dropmedown:before,
    .dropmedown: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
    }
    .dropmedown:before {
        border-bottom-style: solid;
        border-top: none
    }
    .dropmedown: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
    }

  4. The next thing we'll be doing is to add HTML codes to your template so labels can function as drop down menu. In your template, search for this:
  5. <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>

  6. Now replace the above code with the following code:
  7. <div class="dropmedown">
    <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>

    5. Once everything is done, press "Save Template" to complete.

We hope this tutorial has helped you in learning how to create labels drop down menu in Blogger. If you like this post, please share your thoughts in the comments section below.

Comments

Popular posts from this blog

Top 4 Best Email Marketing Tools to build your blog Audience

You can either make one time sales, or you can accumulate wealth, wealth disguised as Emails, and keep making money forever, your choice.  If you passed your 5th grade in one go, I'd say you're smart enough to go with option #2. Well, that's a good choice. But people won't just give you their E-mails, right? You need to have a system in place, to scrape it off of them, without pissing them off, so that they actually pay attention to your Emails in their inboxes. Now, you can use a variety of tools for the task. But what makes most of the impact is, the design. That's what people notice before they notice anything else, ofcourse you need to have advanced options too. In this article, we will show you the top 4 best Email marketing tool to build your blog audience so you can make most of every user. 1. GetResponse: The reason for me listing GetResponse right at the top is pretty simple. Cause, it's the best. As far as feature, service and the price is concerned. ...

Watch LIVE | Polls Closed | NA120 Election

LIVE POLLS RESULT NOW STREAMING