Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498464358
Vida do cache: 1498507558
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 Widget de Postagens Recentes

No outro artigo eu ensinei como incluir na sidebar uma lista com as ultimas postagens publicadas recentemente no blog, através de um gadget que utiliza seu próprio Feed, disponibilizado pelo próprio Blogger: Lista de Posts Recentes na sidebar.
Mostrei também que é possível utilizar este mesmo gadget para exibir uma lista de postagens recentes por marcador.

A Isabella perguntou, através dos comentários, como personalizar este widget, aplicando estilos CSS a ele.
Pensando nos outros leitores que possam ter a mesma dúvida , neste tutorial, veremos como aplicar estilos á lista de links exibidos no gadget de postagens recentes.
Veremos , como incluir ícones ao lado dos links, alterar a cor e tamanho dos links, e como incluir bordas abaixo dos links.

Uma nota importante:

Se você já personalizou os links da sua sidebar de acordo com este tutorial:
Personalizando os links da sidebar, caso já tenha incluído ícones ao lado dos links,não será necessário incluir icones novamente, pois as configurações aplicadas aos links da sidebar serão aplicadas automaticamente aos widgets que utilizarem links.

Mas se este não for o seu caso e você queira incluir ícones ao lado dos links apenas neste widget, entre na aba “design” >>”editar html“, não precisa clicar em “expandir modelos de widgets” e procure por:
]]></b:skin>

E cole logo ACIMA dela:


#Feed1 li {
background: url(ENDEREÇO-DA-IMAGEM) no-repeat left;
line-height:1.5em;
margin:0;
padding:0 0 3px 20px; /*ajuste as margens se precisar*/
font-size: XXpx; /* tamanho da fonte */
border-bottom: 1px solid #XXXXXX; /* edite cor e tipo de borda */
}
#Feed1 ul {
margin:0;
padding:0;
list-style-type: none;
}
#Feed1 li a{
color:#XXXXXX; /* cor do link */
}

Vá visualizando para ver se está da maneira que você quer, e se for necessário, edite os valores em “padding” e salve!



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.

9 Comentários

  1. Garota de All Star disse:

    Ah obrigada, deu certo ;D

  2. .:: Clau ::. disse:

    Garota de All Star
    É só vc incluir:
    #Feed1 li a:hover{
    color:#XXXXXX; /* cor do link */
    }

  3. Garota de All Star disse:

    Oi Clau, olha deu tudo certo, mas quando passo o mouse, fica da mesma cor, gostaria de saber se dá pra aplicar o efeito hover.

  4. .:: Clau ::. disse:

    Natanael
    Neste widget não.

  5. Natanael disse:

    gostaria de saber se da para colocar miniaturas de imagens

  6. Caio disse:

    Muito bom

  7. VISUAL ARTE disse:

    Olá, Clau! Gostei muito do seu blog! Apesar de vagar pela net um bom tempo, só agora encontrei vc.
    O que eu gostaria de saber é como colocar Postagens Recentes numa página do blog. Quero criar uma página principal em meu blog, onde quero que, sempre que eu criar uma nova postagem, ela apareça lá, pois a página com postagens quero deixar oculta e, nessa nova página, só os links dos marcadores, com imagem apreceram. Essa segunda parte eu já sei como fazer. Sei que vc pode me ajudar, obrigado!

  8. .:: Clau ::. disse:

    Isabella F.
    Agora tu conseguiu personalizar né? =P

  9. Isabella F. disse:

    Eu te amo Clau *__*

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

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