How to Create Labels As Drop Down Menu Inside The Blogger Google Blogspot

Why Do I Need To Use Labels As Drop Down Menu:

To Get More Space

Looks Like Professional Blog

Easy To Access For Your Visitor

                                            How Looks Normal Label Tag.

How Looks After This  Label Tag.

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.

How To Create Labels Drop Down Menu in Blogger:

Method 1.

1. Sign in to your blogger dashboard and locate layout.

2. Click on layout  and find Add Gadget.

3. Click on Add gadget and scroll till you find Labels.

4. Add label and drag it to where you want it to display and click on Save.

STEP 2

1. Go to Dashboard > Design > Edit HTML.

2. Back up your template


3. Make sure you DO NOT tick the Expand Widget Templates checkbox.

4. Press CLTR key + F key.

5. In the box paste this code and press ENTER key 

<b:widget id='Label1' locked='false' 

6. Look for the following lines in your HTML code.
 <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

7. Erase it all and Replace that line with this code:

<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>Click To 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>

8. click Save and you are done.

HOW TO COSTOMISE  THE GADGET

1. If you want change the width of the drop down menu then change this value width:100% to any percentage, or pixel (px).

2. To change the phrase “Click To Choose a Category” then find this line Click To Choose a Category  and replace it with your preferred phrase.

3. If you do not want to show post count at the end of each label then delete this line (<data:label.count/>) .

Can you see it so simple adding blogger label in drop down, Common it is your turn to give it trial and lets see your deduction in the comment box below and never forget to use the share button too.
  

How To Create Labels As Drop Down Menu  Category as drop down menu Inside The Google Blogspot 

Mothod 2

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:  Carefully Before That Make your Theme Backup.

Code Is Following. All Blue Clour just copy and paste.

/* 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
}

Step 3: 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 Code by press Ctrf+f. you will see as many as many you have addes label gadget already which you want to replace as dropdown menu just replace code below in blue color

<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 the above code with the following code:

<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>

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

I hope you like it and done perfectly if you have any problem just comment i will assist you ..