Como personalizar o gadget Arquivo

|| ||
Olá sweetes! 
Antes de começar o tutorial gostaria de perguntar se algo estranho está acontecendo com os seguidores de vocês ou é só comigo? Porque ontem eu olhei estava com 854 seguidores, antes de dormir eu dei mais uma olhadinha e já tinha sumido 2 seguidores e hoje quando entrei estava com 823 e agora com 820 se já não diminuiu, mas que caramba está acontecendo.


Bem, agora vamos ao que importa.
O tutorial de hoje ele é de Como personalizar o gadget Arquivo, sim aquele gadget que eu acho ele um pouco feio, pois ocupa muito espaço e assim personalizado ele não ocupa tanto espaço assim.
Exemplo de como ficará ele personalizado:
Esse é do meu blog Flores ao Chão

Se caso não tiver ainda o gadget Arquivo no blog vá em Layout>>Adicionar um Gadget>> e escolha Arquivo do Blog depois disso é só selecionar o modo Menu Suspenso, salve o gadget e arraste para onde quer que ele apareça e Salve organização.

Agora vamos em Modelo>>Editar HTML>> Agora vamos localizar o gadget do arquivo. Clique em Ir para um widget e clique no item BlogArchive1, assim como aparece na imagem abaixo:
Clique dentro da caixa de código e aperte Ctrl+F e procure por:
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
Aparecerá algo mais ou menos assim:
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
Então você irá substituir tudo isso por:
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' style='width: 200px;font-size:12pt'> <option value=''>Histórico deste Site</option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/></option> </b:loop> </select>
Você pode mudar o que está em negrito:
  • (width: 200px) é a largura da caixa
  • (font-size:12pt) é o tamanho da font
  • (Histórico deste Site) você pode mudar por outra coisa por exemplo: Arquivo do Blog.
Agora vá em:
]]></b:skin>
E cole acima dele o seguinte código:
#BlogArchive1_ArchiveMenu {
background: #ff3b79;/*--cor de fundo do arquivo--*/
font-size: 14px;/*--tamanho da fonte--*/
color: #fff;/*--cor da fonte--*/
padding: 10px 8px 10px 8px;
width: 100%;
border: none;
outline:none;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
}
Já está explicado no código.
  • border: você pode colocar a borda do jeito como você quiser por exemplo:(1px solid #000)
Visualize para ver se deu certo, se caso deu clique em Salvar Modelo.

Espero que tenham gostado e até o próximo post.