Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1503007350
Vida do cache: 1503050550
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Personalizar o gadget Arquivo do Blogger

Eu já publiquei um tutorial ensinando uma forma de personalizar o Widget Arquivo em Forma de Calendário.
Já ensinei também como incluir ícones ao lado dos links da sidebar, mas se você notar, esse links não se aplicam ao gadget de arquivo.
E esta foi a grande dúvida da @joangel1, quando ela me perguntou se era possível incluir mini ícones nos links do gadget arquivos também.
Na verdade ela queria personalizar os links deste gadget de forma diferenciada dos demais links já personalizados na sidebar. Queria saber como incluir um ícone diferente apenas no gadget arquivo.
Eu resolvi testar para descobrir como resolver essa questão.
Atendendo o pedido da @joangel1, neste tutorial vou demonstrar como incluir ícones nos links do gadget arquivos, substituir aquela setinha por um ícone e também, como incluir uma barra de rolagem no gadget, tudo na base de inserção de CSS.
Simples e fácil!

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

1. Incluir ícone ao lado dos links e substituir a setinha por um ícone

Entre na aba “design” >> “editar html” >> não precisa marcar a caixinha “expandir modelos de widgets, copie o código abaixo e cole-o ACIMA de ]]></b:skin>


.BlogArchive #ArchiveList a{
background: url(URL-DO-ICONE) no-repeat scroll 10px center;
font-size:14px; /*--edite tamanho da fonte--*/
color: #000; /*--edite cor da fonte--*/
padding:5px 3px 5px 25px; /*--edite espaçamento se quiser--*/
text-indent:0px;
list-style-type:none;
}
.BlogArchive .zippy {
display:none;
list-style:none outside none;
}

Bom, antes que me perguntem, se você notar na imagem demonstrativa, vai perceber que, apesar de eu ter conseguido substituir a “setinha” por um ícone, por hora, não consegui encontrar uma solução para fazer com que aparecesse apenas um ícone, no Mozilla Firefox. No Chrome e no IE aparece 1 ícone, mas quando visualizado no Mozilla, aparecem 2. Entretanto, o 1º ícone está substituindo a setinha, se clicarmos em cima dele, ele se expandirá normalmente, já no Chrome e no IE, ele não se expande.
Se alguém souber como solucionar isso, por favor, me informe nos comentários.

2. Incluir barra de rolagem no gadget de arquivo

O gadget de arquivo ocupa bastante espaço na sidebar, principalmente se no seu blog existir muitas publicações. Mas também ficar sem ele não é uma boa opção, afinal, o gadget arquivo, contem algumas palavras-chaves e é muito importante, para que suas páginas apareçam nas buscas.
Para resolver esse problema de espaço, você tem a opção de configura-lo como “Menu Suspenso”, mas se não quiser configurar dessa maneira, você pode incluir uma barra de rolagem e assim determinar a altura que você deseja, economizando bastante espaço na sidebar.

Entre na aba “design” >> “editar html” >> não precisa marcar a caixinha “expandir modelos de widgets, copie o código abaixo e cole-o ACIMA de ]]></b:skin>


#BlogArchive1{
border:1px solid #000; /* ---Coloque borda se quiser ---*/
padding:5px; /* ---edite as medidas ---*/
background-color:#FFFFFF; /* ---Coloque a cor de fundo se quiser---*/
width:auto; /* ---defina a largura se quiser ---*/
height: 200px; /* ---edite a altura ---*/
overflow: auto;
}

Edite as cores de acordo com seu gosto.
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget arquivo ultrapassar os 200px. Se quiser, edite esse valor.

Bom, é isso! 😉



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

28 Comentários

  1. Guilherme disse:

    Olá
    no meu blog a função “arquivo do blog” não mostra os posts ao clicar na setinha. Sabe como corrigir isso? Obrigado desde já.

    • Vanessa disse:

      Alguns recursos podem variar de template para template, ou podem apresentar conflitos. Lamento, mas não tenho como te ajudar. Sendo assim, eu sugiro que vc reporte este problema diretamente no fórum oficial do Blogger, de qualquer forma agradeço pelo comentário.

  2. Laís disse:

    Olá.
    Adorei seu blog, conheci ontem e já me beneficiei com algumas dicas. Eu sou nova nesse assunto e fiquei com dúvidas nesse tutorial.
    Gostaria de saber se posso tirar as partes que estão entre asterísticos, como por exemplo a parte “coloque borda se quiser”, e se eu tirar, se vai alterar no resultado.
    Beijos e parabéns pelo excelente blog.

  3. Joana Cabral disse:

    Oie como eu coloco esse estilo de comentário no meu blog. Essa caixa de comentários… achei bem legal! muito diferente da do blogger.

    • Vanessa disse:

      @Joana:
      Este estilo é do wordpress, assim que eu tiver um tempinho vou dar uma fuçada para ver se há possibilidades de adaptar um estilo parecido para o blogger. Publico um tuto.

  4. Flávio Soares disse:

    se nao quizer que o título role junto como o resto … o codigo se reduz a isso:
    #BlogArchive1 .widget-content{height: 140px;overflow: auto;}

  5. BiaBloom disse:

    Ótimo! Deu certinho!

  6. Nelson Palmerston disse:

    Deu todo certo. Já coloquei no blog e foi ótimo. Fui em vários sites e não estava entendendo como fazer. No seu foi simples.obrigado.

  7. .:: Clau ::. disse:

    João Elias
    Muito bom. Obrigada pela dica e agradeço tb pela visita 😉

  8. João Elias disse:

    Oi Clau,
    Acompanho seu blog faz um tempo.
    Se colocarmos "#BlogArchive1 .widget-content{", podemos deixar o titulo de fora da caixa.
    Parabéns pelo blog.

  9. gadarf disse:

    Nossa adorei seu template, muito bonito, um pouco pesado, mas muito bonito.

  10. .:: Clau ::. disse:

    Bernadete
    Fico feliz que tenha dado certo. Obrigada pela visita e pelo comentário.

  11. Bernadete disse:

    Olá Clau,

    Foi minha primeira visita e já me beneficiei de sua dica.
    Fiz na mesma hora, ficou ótimo.

    Obrigada

  12. .:: Clau ::. disse:

    Állefy Max C. Meneses
    Lamento, mas não tenho como te ajudar, pois os códigos variam muito de template para template.

  13. Állefy Max C. Meneses disse:

    Excelente blog Srtª Clau.

    Eu não consegui resolver o problema, mas consegui deixar 'tudo expandido' (os posty's dos meses de cada ano tudo expandido).

    Eu queria saber se você saberia qual é o código e onde devo botar/substituir para editar, separadamente, o tamanho da fonte do ano, mês e dia do mês.

    Já que minhas postagens estão todas expandidas, com barra de rolagem, seria muito interessante e melhor editar o tamanho da fonte separadamente.

    Afinal, uma hierarquia fica bem melhor com os elementos hierográficos com fontes separadas, como um índice.

    Aguardo resposta.
    Grande abraço, sucesso.

  14. Ricmail_Gp disse:

    Otimo muito bom! aqui só ficou um pouco deslocado para a direita… nada que atrapalhe muito o design do Blog

  15. .:: Clau ::. disse:

    Beto Default
    Se substituir o trecho todo, conforme vc falou, os ícones dos demais links somem. Fica aparecendo apenas icones nos links "ano e mês", nos links individuais não.
    Testei incluir este trecho, ao invés de substituir, mas nada alterou, continuou aparecendo 2 ícones ao lado dos links "ano e mês". Entretanto, só fica visualizado desta forma (com os 2 ícones) no Mozilla, no Chrome aparece só um mesmo.
    De qualquer forma obrigada pela sugestão, mais uma vez.
    Acho que ficou bem claro pro pessoal, assim, fica a critério deles, se querem substituir ou incluir o trecho q vc sugeriu. Ai já vai de cada um né?
    Valeu 😉

  16. Beto Default disse:

    Clau, no css que você deixou acima para os leitores, está assim :

    .BlogArchive #ArchiveList a{

    Tente trocar por este outro :

    .BlogArchive #ArchiveList a.toggle{

    O acréscimo dessa classe toggle (.toggle) é a parte essencial.

    Fazendo assim o ícone só vai aparecer uma vez em cada item e o efeito estará ativo ainda :)

  17. .:: Clau ::. disse:

    Beto Default
    Eu testei incluir o trecho que vc sugeriu, mas percebi que se incluir este trecho, ao clicar no ícone o link do "ano" não se expande.
    Mas de qualquer forma, agradeço sua sugestão e deixo ai a sua dica, para os leitores do MB que quiserem implementa-la. Valeu 😉

    ?u?
    Testa e vê se dá pra centralizar incluindo o código que vc quer no mesmo trecho onde se inclui a barra de rolagem.

    Silas Yudi
    No artigo eu já deixei um aviso que não sei como solucionar isso, dá um relida, por favor.

  18. Silas Yudi disse:

    Agora, com essa propriedade

    .BlogArchive .zippy {
    display:none;
    list-style:none outside none;
    }

    Os links dos meses e anos não se expandem…

  19. Silas Yudi disse:

    No meu caso deu tudo certo, o problema é se eu tirar essa propriedade:

    .BlogArchive .zippy {
    display:none;
    list-style:none outside none;
    }

    Pois sem ela fica com dois ícones no link do ano e do mês.

  20. ?u? disse:

    Show de bola! Já personalizei o meu também, obrigada! =)

    Clau, tenho uma pergunta a respeito desse gadget de arquivos… tem como eu centralizá-lo na sidebar?

  21. Beto Default disse:

    Fácil :)

    Clau, basta adicionar esse "trechozinho" :

    a.toggle{display:none !important;}

    Testei em um blog meu que está parado, e la pegou certinho , blog em que testei http://linuxrepositorio.blogspot.com/

    Valeu Clau e parabéns pelo blog novamente :)

  22. .:: Clau ::. disse:

    Max
    Pois é né? fucei tanto que saiu até um "algo a mais"..rs


    Manda brasa mesmo =)

    gerardown.net
    Fique a vontade =)

  23. gerardown.net disse:

    Massa, gostei vou personalizar o meu depois!

  24. Jô Angel disse:

    òtimo!!! Adorei, amiga! muito obrigada!! Já vou fazer no meu template!! Obrigada, de novo. Beijos!

  25. Max Martins disse:

    Oi, Clau

    Muito bom mesmo. De quebra, resolveu o problema de espaço que o arquivo ocupa quando aberto. Parabéns!

    Abraços

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.