Dicas, truques, tutoriais, reviews, promoções e informação

terça-feira, 21 de dezembro de 2010

Mudar nome do título do widget LinkWithin - Posts Relacionados

Quem tem um blog sabe que é importante adicionar um widget com Posts Relacionados aos artigos no rodapé dos posts. Instalar um widget deste é muito simples.

No entanto, muitos preferem utilizar o widget personalizado com imagens fornecido pelo serviço LinkWithin.

Alterar titulo do linkwithin

Só que muitos utilizadores do LinkWithin não gostam muito do título padrão aplicado ao widget "Poderá também gostar de:".

Mas é muito fácil alterar este título e colocar um de sua preferência.

Como Mudar o Título do Posts Relacionados do LinkWithin

1. Vá em Design > Editar HTML.

2. Pressione as teclas Ctrl + F e procure por <body>

3. Exatamente embaixo (depois) de body adicione o código abaixo:

<script>linkwithin_text='SEU TEXTO PERSONALIZADO:'</script>
Clique aqui para copiar o código

4. Aonde está escrito SEU TEXTO PERSONALIZADO digite o título que você quer que apareça no widget.

5. Agora clique em Salvar Modelo e pronto!

Exemplo:

Trocar titulo linkwithin

Mudando a cor, tamanho e fonte do widget com CSS

Você também pode alterar a cor, tamanho e fonte do título do LinkWithin.

► Vá em Design > Editar HTML. Tecle Ctrl + F e procure pela tag ]]></b:skin>

► Exatamente antes dessa tag acrescente todo este código abaixo

.linkwithin_text {
color:#555555;
font-weight:bolder;
font:bold 16px "Droid Sans", Arial, Helvetica, sans-serif;
text-decoration:none;
margin:0 0 10px;
padding:15px 0 0;
text-shadow: #bbbbbb 1px 1px 1px;
} 

See the Pen vtGxl by Seu Tutorial (@marcelost) on CodePen



► Depois clique em Visualizar para ver se está tudo certo. Estando ok, clique no botão Salvar Modelo e pronto!

Nas linhas 2 e 8 do código altere para a cor desejada. Exemplo: troque o #555555 e o #bbbbbb pelos códigos das cores que você quer. Veja aqui uma tabela de cores HTML.

Na linha 4 altere para o tamanho de pixel desejado (tamanho da fonte do título). Exemplo: troque o 16px pelo tamanho que quiser (como 15px, 20px, 13px, etc). Porém, tome cuidado para não aumentar muito o tamanho da fonte. Coloque um tamanho que seja adequado ao layout do seu blog ou site.

Demonstrações

alterar-cor-do-titulo-linkwithin

personalizar-widget-link-within-mudar-cor-doslinks-linkwithin

Mudando a cor de fundo

Para mudar a cor de fundo do widget basta adicionar a linha abaixo antes de ]]></b:skin>

.linkwithin_posts a {
background:#fff !important;
border:1px solid #FFFFFF !important;
padding:10px !important;
margin:0 2px !important;
}

.linkwithin_posts a:hover {
background:#fff !important;
padding:10px !important;
}

See the Pen nCxdz by Seu Tutorial (@marcelost) on CodePen



Altere a o código #fff da linha 2 pelo código da cor que desejas.

Caso queira mudar a cor de fundo só quando o leitor passar o mouse, adicione este código abaixo.

Altere a linha 2, do segundo código, pela cor que prefere em 'background'.

27 comments:

  1. Obrigado! Fiz e funcionou. Não sei que raios que eu estava tentando colocar o código ANTES do BODY.
    Vai entender... vou espalhar por aí.

    Um abraço!

    ResponderExcluir
  2. Olá Alexandre! Não há de que amigo.

    Grande abraço

    ResponderExcluir
  3. Obrigada !!!! Foi facil de enteder!!! Conseguiiiiii!!!

    ResponderExcluir
  4. Olá Mariângela, bem-vinda!

    De nada. Fico feliz que conseguiu.

    Abraços

    ResponderExcluir
  5. Ah! Funcionou! Que emoção! *___*
    Obrigada.
    Agora... Como será que eu mudo a cor da letra...?

    ResponderExcluir
  6. Olá Srta. Bibliófila

    Tem como alterar a cor da letra do título também. Basta adicionar um simples código CSS.

    Nós atualizamos o tutorial e adicionamos o CSS. Por favor, releia-o e veja que acrescentamos o "Mudando a cor, tamanho e fonte do widget com CSS" no artigo.

    Realize os passos descritos lá para mudar a cor do título.

    Abraços e ótima semana!

    ResponderExcluir
  7. Tem como trocar a cor de fundo no a hover ?
    quando passa mouse o fundo de meu template é preto fica roxo,
    queria colocar preto quando passasse o mouse

    ResponderExcluir
  8. Continuo com uma dificuldade...no meu blog as postagens aparecem pretas, destacando apenas as figuras...o que eu faço para alterar...obrigada
    meu blog é juntospelaalfabetizacao.blogspot.com

    ResponderExcluir
  9. Obrigado marcelo,
    foi muito útil.
    Um abraço!

    Bruno Rocha,
    do site:
    www.ciclosamsara.blogspot.com

    ResponderExcluir
  10. De nada, Bruno.
    Que bom que o post lhe ajudou.
    Volte sempre e sucesso com o blog!

    Abração

    ResponderExcluir
  11. Olá!!

    Gostaria de saber se tem como diminuir o tamanho do "quadradinho", ou seja da imagem? Veja este blog como usa imagens pequeninas.
    Olha no final do post em "Artigos Semelhantes", há 4 imagens pequenas uma sobre a outra. Como fazer isso?

    http://www.pipocablog.pop.com.br/post/9293/tom-felton-revela-segredos-sobre-o-novo-planeta-dos-macacos

    Grata
    Flávia

    ResponderExcluir
  12. Olá Flávia, seja bem-vinda!
    este blog que você postou não trabalha com o serviço LinkWithin. O widget deste blog já vem integrado com a plataforma POP (servidor que hospeda o referido blog). Pois também não é Blogger!

    Abraços

    ResponderExcluir
  13. Oi Marcelo, obrigada pela resposta, e com relação ao tamanho das imagens do linkwithin, dá para editar e elas ficarem menores?

    Flávia

    ResponderExcluir
  14. Olá Flávia
    Eu vou dar uma mexida no código para ver se consigo acrescentar algo referente ao tamanho das imagens para você, e depois lhe respondo, pode ser?

    Mas me diz uma coisa: você quer diminuir o tamanho dos quadrados do widget de um modo geral, ou somente das imagens presentes dentro dos quadrados?

    Abraços

    ResponderExcluir
  15. Marcelo,

    Obrigada pelas respostas tão rápidas...

    Quero diminuir o tamanho dos quadrados do linkwithin.

    ResponderExcluir
  16. Flávia

    Infelizmente não tive sucesso na tentativa de alterar o tamanho do widget. Tentei inserir tudo quanto é tipo de tag referente ao tamanho do mesmo, mas nenhuma deu certo.

    De qualquer forma, vou tentando, se eu conseguir algo eu lhe informo e acrescento ao tutorial, ok?

    Abraços

    ResponderExcluir
  17. ótimo tutorial, parabéns, o melhor que achei por enquanto! Funcionou tudo perfeitamente!

    ResponderExcluir
  18. Obrigado pelo comentário Torricelli. Fico feliz que tenha gostado e dado certo para ti.
    Abraços

    ResponderExcluir
  19. Se souber me responda essa também, tem como auterar o tamanho dos quadrados das imagens que aparecem no gadget artigos relacionados que você usa no seu blog, pq as imagens são muito pequenas, se não me engano são 72x72,só que no código não tem esse valor e já tentei de tudo e não consegui aumentar a imagem...

    Grato se souber me responder

    ResponderExcluir
  20. cara parabéns você foi o unico que me ajudo com esse artigo parabéns

    ResponderExcluir
  21. Ótimo! Aquele: ''Também poderia gostar de'' Não era muito legal :)

    ResponderExcluir
  22. sera que vc pode me ajudar como colocar este linkwithin bem explicado por favor

    ResponderExcluir
  23. VALEU AI ..COLOQUEI NO MEU SERTO..CONTINUA ASSIM
    TEM MUITOS AI QUE POSTA E NÃO TESTA ...
    ((http://androidnovidadesnoticias.blogspot.com.br/))
    APP E APKS GRÁTIS ANDRPOID JAVA

    ResponderExcluir
  24. Po, muito explicadinho parabéns. Gostaria apenas de saber como centralizar o linkwithin, retirar os separadores e as bordas das imagens e principalmente alterar o tamanho das miniaturas. É possível? Diz que sim? Abraço.

    ResponderExcluir
  25. Gostei muito deste post. Achei muito útil e super simples!

    ResponderExcluir
  26. OBRIGADOOOO AMOREEE ... FOI DE MUITA AJUDA .... DEUS TE ABENÇÕE BJUS

    ResponderExcluir