Widget Vanessa S.
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! 😉
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á.
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.
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.
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.
@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.
Bom dia!
Eu quero na verdade colocar no lugar do nome do mês o nome do arquivo…
Você sabe como fazer isso!
Desde de já agradeço.
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;}
Ótimo! Deu certinho!
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.
João Elias
Muito bom. Obrigada pela dica e agradeço tb pela visita 😉
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.
Nossa adorei seu template, muito bonito, um pouco pesado, mas muito bonito.
Bernadete
Fico feliz que tenha dado certo. Obrigada pela visita e pelo comentário.
Olá Clau,
Foi minha primeira visita e já me beneficiei de sua dica.
Fiz na mesma hora, ficou ótimo.
Obrigada
Állefy Max C. Meneses
Lamento, mas não tenho como te ajudar, pois os códigos variam muito de template para template.
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.
Otimo muito bom! aqui só ficou um pouco deslocado para a direita… nada que atrapalhe muito o design do Blog
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 😉
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 🙂
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.
Agora, com essa propriedade
.BlogArchive .zippy {
display:none;
list-style:none outside none;
}
Os links dos meses e anos não se expandem…
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.
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?
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 🙂
Max
Pois é né? fucei tanto que saiu até um "algo a mais"..rs
Jô
Manda brasa mesmo =)
gerardown.net
Fique a vontade =)
Massa, gostei vou personalizar o meu depois!
òtimo!!! Adorei, amiga! muito obrigada!! Já vou fazer no meu template!! Obrigada, de novo. Beijos!
Oi, Clau
Muito bom mesmo. De quebra, resolveu o problema de espaço que o arquivo ocupa quando aberto. Parabéns!
Abraços