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.
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
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:
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
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'.
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Obrigado! Fiz e funcionou. Não sei que raios que eu estava tentando colocar o código ANTES do BODY.
ResponderExcluirVai entender... vou espalhar por aí.
Um abraço!
Olá Alexandre! Não há de que amigo.
ResponderExcluirGrande abraço
Obrigada !!!! Foi facil de enteder!!! Conseguiiiiii!!!
ResponderExcluirOlá Mariângela, bem-vinda!
ResponderExcluirDe nada. Fico feliz que conseguiu.
Abraços
Ah! Funcionou! Que emoção! *___*
ResponderExcluirObrigada.
Agora... Como será que eu mudo a cor da letra...?
Olá Srta. Bibliófila
ResponderExcluirTem 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!
Tem como trocar a cor de fundo no a hover ?
ResponderExcluirquando passa mouse o fundo de meu template é preto fica roxo,
queria colocar preto quando passasse o mouse
Continuo com uma dificuldade...no meu blog as postagens aparecem pretas, destacando apenas as figuras...o que eu faço para alterar...obrigada
ResponderExcluirmeu blog é juntospelaalfabetizacao.blogspot.com
Obrigado marcelo,
ResponderExcluirfoi muito útil.
Um abraço!
Bruno Rocha,
do site:
www.ciclosamsara.blogspot.com
De nada, Bruno.
ResponderExcluirQue bom que o post lhe ajudou.
Volte sempre e sucesso com o blog!
Abração
Olá!!
ResponderExcluirGostaria 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
Olá Flávia, seja bem-vinda!
ResponderExcluireste 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
Oi Marcelo, obrigada pela resposta, e com relação ao tamanho das imagens do linkwithin, dá para editar e elas ficarem menores?
ResponderExcluirFlávia
Olá Flávia
ResponderExcluirEu 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
Marcelo,
ResponderExcluirObrigada pelas respostas tão rápidas...
Quero diminuir o tamanho dos quadrados do linkwithin.
Flávia
ResponderExcluirInfelizmente 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
ótimo tutorial, parabéns, o melhor que achei por enquanto! Funcionou tudo perfeitamente!
ResponderExcluirObrigado pelo comentário Torricelli. Fico feliz que tenha gostado e dado certo para ti.
ResponderExcluirAbraços
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...
ResponderExcluirGrato se souber me responder
cara parabéns você foi o unico que me ajudo com esse artigo parabéns
ResponderExcluirÓtimo! Aquele: ''Também poderia gostar de'' Não era muito legal :)
ResponderExcluirsera que vc pode me ajudar como colocar este linkwithin bem explicado por favor
ResponderExcluirVALEU AI ..COLOQUEI NO MEU SERTO..CONTINUA ASSIM
ResponderExcluirTEM MUITOS AI QUE POSTA E NÃO TESTA ...
((http://androidnovidadesnoticias.blogspot.com.br/))
APP E APKS GRÁTIS ANDRPOID JAVA
Muito bom tutorial, parabéns!
ResponderExcluirPo, 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.
ResponderExcluirGostei muito deste post. Achei muito útil e super simples!
ResponderExcluirOBRIGADOOOO AMOREEE ... FOI DE MUITA AJUDA .... DEUS TE ABENÇÕE BJUS
ResponderExcluir