Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

09/05/2013

Personalizar as Cores do LinkWithin (Novo Modelo)

O gadget LinkWithin é um dos mais utilizados pelos blogueiros, e o que melhor mostra (até agora) as postagens relacionadas do seu blog.
Aqui no DSA eu já ensinei a vocês como se pode mudar a posição dele (colocando-o depois do rodapé da postagem), o texto do título e também como mudar as suas cores. Hoje também colocarei um código de personalização das cores do LinkWithin, sendo que é num novo modelo, que pode não ser muito diferente do anterior, mas tem seu encanto. Eu, sinceramente, acho esse bem mais bonito.
Se você seguir o tutorial da forma correta, seu gadget ficará assim:


Gostou? Você poderá colocá-lo na cor que quiser, basta trocar os códigos para a cor desejada.
Ah, eu havia recebido uma solicitação de um leitor para que fosse incluido ao tutorial a possibilidade de retirar o link do LinkWithin que fica no canto inferior direito. Gente, eu até poderia fazer isso, sei exatamente qual é o código que o retira e tudo mais. O problema é que, como estamos usando o serviço deles de graça, não custa nada deixar os créditos. Como você se sentiria se pegassem uma postagem sua e nem deixassem o seu link como fonte? Pois é, não abusem!

Personalizar as Cores do LinkWithin (Novo Modelo):

Para quem não sabe ou não se lembra, eu já tinha feito um tutorial de personalizar o texto e a posição do LinkWithin, ou seja, como trocar o texto daquele título maior de cima e como colocar o gadget abaixo do rodapé de postagem (pois antes o meu ficava em cima do "Leia Mais" e eu achava super esquisito).
Mas agora vamos aprender de uma forma bem simples como mudar as cores e as fontes desse gadget para um novo modelo de cores que é maravilhoso. Se você souber mexer em HTML pode até mudar outros aspectos, se quiser.
Ah, se você já usa a personalização antiga, é necessário que se retire o código antigo. Para saber como achar códigos no novo"Editar HTML", clique aqui.

Lembrando que antes de fazer qualquer mudança no HTML de seu blog, recomenda-se que se faça antes num blog de testes ou que você faça um backup do seu template atual.


  1. Entre em Modelo > HTML;
  2. Clique em qualquer parte de seu HTML e aperte "Ctrl + F" no seu teclado;
  3. Copie o seguinte código: ]]></b:skin> cole-o na caixinha que abriu (Search) e aperte a tecla "Enter";
  4. Antes do trecho destacado, cole o código seguinte:

.linkwithin_text {
     margin: 0px !important;
     border: 0px none !important;
     padding: 10px 5px 8px !important;
     text-align: center !important;
     font-weight: bold !important;
     background: #523E78 !important; /*Cor do fundo do título maior*/
     color: #fff !important; /*Cor do fundo da fonte maior*/
     border-radius: 0.5em 0.5em 0em 0em !important;
     -moz-border-radius: 0.5em 0.5em 0em 0em !important;
     -webkit-border-radius: 0.5em 0.5em 0em 0em !important;
}

.linkwithin_inner {
     margin: 0px auto !important;
     border: 0px none !important;
     padding: 0px !important;
     width: 565px !important; /*Tamanho do seu LinkWithin*/
     background: #E3E3E3 !important; /*Cor do fundo do gadget*/
     border-radius: 0.5em 0.5em 0.5em 0.5em !important;
     -moz-border-radius: 0.5em 0.5em 0.5em 0.5em !important;
     -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em !important;
     box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
     -moz-box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
     -webkit-box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
     font-size: 18px !important; /*Tamanho da fonte do título maior*/
     font-family: Arial Black !important; /*Fonte do título maior*/
}

.linkwithin_img {
     width: 100px !important; /*Largura das imagens dos posts*/
     height: 100px !important; /*Altura das imagens dos posts*/
     margin: 0px !important;
     border: 0px none !important;
     padding: 0px !important;
}

.linkwithin_title {
     margin: 0px 0px 0px !important;
     border: 0px none !important;
     padding: 0px !important;
     color: #523E78 !important; /*Cor da fonte dos títulos dos posts*/
     font: 10px Arial Black !important; /*Tamanho e fonte dos títulos dos posts*/
     text-align: center !important;
}

.linkwithin_posts a {
     border-right: 0px dotted #523E78 !important;
     padding-right: 0px !important;background-image: none;
}

.linkwithin_posts a:hover{
     background-color: #F3EFFB !important; /*Cor do fundo dos posts quando passamos o mouse*/
}

.linkwithin_title:hover {
     color: black !important; /*Cor dos títulos dos posts quando passamos o mouse*/
     text-decoration: none !important;
}

Os códigos em negrito são os que você pode personalizar de acordo com seu gosto (as explicações estão ao lado de cada um), só mexa nos outros códigos se você tiver certeza do que está fazendo. Os códigos em verde deixam as bordas redondas e os em azul colocam sombra nos lugares especificados. Se não quiser algum, é só apagar.
Visualize para ver se funcionou e depois clique em "Salvar Modelo".

Veja também:
Personalizar LinkWithin (texto e posição)
Personalizar LinkWithin (cores)

Beijinhos Alados,
6 Comentários
Comentários

6 comentários:

  1. Fica muito melhor personalizado, mas essa semana ainda tirei fora o Linkwithin porque ele não estava funcionando direito, parecia "travado"... vai entender, hehehe.

    ResponderExcluir
  2. Respostas
    1. legal ficou massa no meu, parabéns pelo post..

      Excluir
  3. Oi, flor!
    Seu tuto ajudou muito! (rs) Eu tinha deixado totalmente personalizado, mas achei que ficou carregado demais. No fim, experimentei colocar somente os códigos que queria e gostei do resultado! Haha. Obrigada!
    Ah, como posso fazer para deixar centralizado como você deixou o seu?
    Beijo carinhoso, Sheila!

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados