sexta-feira, 29 de julho de 2016

Drop Down Labels Widget Blogger

drop-down-labels-widget-blogger-2016

Dropdown labels é um widget que faz a diferença para o Blogger uma vez que isso facilita na busca de informações para os visitantes que desejam encontrar conteúdo por labels ao clicar ele mostra a categoria isso pode ser visualizado aqui no nosso Blog ele também é atrativo e muito usado para economizar espaço no template do Blog o que também ajuda a aumentar views

Para adicionar dropdown labels widget no seu Blogger siga os passos

Faça login no seu Blogger então siga o caminho.

Blogger >> Template >> Layout >> Add a Gadget >> Labels)

Depois de adicionar isso precisamos adicionar o Código CSS no template

Vá no menu modelo então editar HTML/JavaScript com as teclas combinadas CTRL+F
busque por ]]></b:skin>  e antes disso adicione o seguinte código.

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

O próximo passo é adicionar o código HTML no template.

então procure por esse código:

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

Então substitua o código acima pelo Código.

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

Então salve o modelo do template e confira o resultado.



NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner