Marcadores em menu suspenso elegante (Drop Down)

Yo! Yo queridos bunnie's! O tutorial de hoje é sobre marcadores (label), uma área que usamos muito no blogger, mas são poucos os recursos para sua personalização. Então venho trazer um tutorial que vai deixar seus marcadores, muito lindos e ainda em foma de menu suspenso. Então sem mais demora vamos ao tutorial? Créditos no rodapé.

1. Adicione um marcador padrão do blogger. 

2. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, procure por  ]]></b:skin>, e acima dele cole:

Códigos

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

3.Agora vamos adicionar o HTML para que o modelo funcione em seu marcador. Ainda dentro do HTML procure pelo código abaixo. Procure pela parte destacada em vermelho: 

Códigos

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

4. Se você encontrou, selecione toda essa parte e apague subistituindo por essa:

Códigos

<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.  Depois que tudo for feito, pressione "Salvar modelo" para concluir.

Créditos: My Blogger Lab