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

29/06/2012

NOVO: Personalizar LinkWithin (cores)

Veja também o novo modelo de personalização. Clique aqui.

Estava outro dia falando com minha irmã (sim, Denise, estou citando você, menina do "Balde de Glitter") que a gente deve ser ninja que não é possível... Hehehe...
Anteontem estava olhando as atualizações dos blogs que sigo (sim, eu olho todos) e vi no Spazio DM a possibilidade de mudar as cores do LinkWithin. Não sei o que foi, mas no meu querido DSM o código não "funfou" muito bem... não que ela tenha feito o código errado, ao contrário!!! Agradeço por ter feito a postagem que me ajudou hoje.
Como vocês sabem bem, eu não sou nem nunca vou ser daquelas que usa um código e quando não funciona simplesmente esqueçe. Tratei logo de acionar meus "poderes ninja" (auxiliada pelo querido Inspecionar do Firefox) e futucar os códigos do LinkWhitin. Depois de olhar um pouco, acrescentei quatro códigos (veja como está maior que o original), retirei algumas coisas e cheguei ao resultado atual, que ficou assim:


Agora me diz: eu sou ou não sou ninja??? Hehehe...

Personalizar as cores do gadget LinkWithin:

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. Se você souber mexer em HTML pode até mudar outros aspectos, se quiser.

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ê salve 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: left !important;
    font-weight: bold !important;
}

.linkwithin_inner {
    margin: 0px !important;
    border: 0px none !important;
    padding: 0px !important;
    width: 477px !important; /*Tamanho do seu LinkWithin*/
    background: none repeat scroll 0% 0% mistyrose !important; /*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;
    color: palevioletred !important; /*Cor da fonte do título maior*/
    font-size: 18px !important; /*Tamanho da fonte do título maior*/
    font-family: Coming Soon !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;
    box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
}

.linkwithin_title {
    margin: 0px 0px 0px !important;
    border: 0px none !important;
    padding: 0px !important;
    color: palevioletred !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: 1px dotted palevioletred !important; /*Borda entre os posts*/
    padding-right: 0px !important;
    background-image: none;
}

.linkwithin_posts a:hover{
   background-color: white !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". 

Amanhã teremos os "Blogs do Mês", não perca!!!

Mil Sweetkisses,
29 Comentários
Comentários

29 comentários:

  1. Está aí, algo que ainda não tinha tentado.
    No meu blog não tem, pois se eu colocasse queria personalizar. Mas, deixei isso quieto, nem tentei.
    Vou ver se faço da próxima vez que mudar o lay.
    Obrigado, pelo ótimo tutorial. E parabéns por ser ninja! :)
    Beijos, moça:*

    ResponderExcluir
  2. Olá..

    Venha participar do sorteio!

    http://coisinhasbrasil.blogspot.com/

    Boa Sorte!

    ResponderExcluir
  3. - * Usei o nome sim flor rs, eu amei e me incentivou a criar um novo blog, obg por seguir e sera sempre bem vinda por lá ♥ Confissões de uma blogueira

    ResponderExcluir
  4. Muito boa a postagem! Gostei da dica.
    Beijos bom fim de semana!
    Pri
    http://www.metamorfoseparalela.com.br/

    ResponderExcluir
  5. POst muitcho bom flor.
    Fika a dik.bjuuus
    Bom final de semana
    http://so-pra-teens.blogspot.com.br/

    ResponderExcluir
  6. Fica dica flor:
    Aumente um pouco a sua parte de posts ok?
    Beijão,muito bom o tuto.bjs
    http://so-pra-teens.blogspot.com.br/

    ResponderExcluir
  7. Sheilinha a Titia não tem mais idade pra digerir tanta informação. Na verdade esta tia chata já está ultrapassada. Acredita??
    Portanto vou deixar as mudanças futuras por conta do Wesley e do Alê que estão com as cucas fresquinhas.
    Um xero,um excelente final de semana e Salve Maria!!!

    ResponderExcluir
  8. Hoje é dia de São Pedro, o fundador da nossa igreja.

    ResponderExcluir
  9. Olá conheci seu blog artavés de outro blog e vim e conhecer já estou e seguindo passa lá no meu cantinho para vc conhecer será muito bem vinda:
    http://nossoapezinhofeliz.blogspot.com.br/

    ResponderExcluir
  10. Olá Sheila! Nossa, gostei muito desse post, bem legal!
    Adoro receber a sua visita lá no meu cantinho, obrigada e volte quando quiser!
    Um final de semana MARAVILHOSO para você! Mil beijos, saúde e sucesso sempre.
    laylafonseca.blogspot.com

    ResponderExcluir
  11. Bom diaaaa Super Sheila, me ajudaaaaa lembra que uma vez eu te perguntei como inserir a bendita setinha de volta ao topo, enfim eu não consigo me ajudaaaa, e pior em nenhum dos blogs que eu gerencio,Eu sou a DERROTA pode falar rsrsrs , bjus um lindo sábado

    ResponderExcluir
  12. Amiga obrigada pela visita, eu estou completamente apaixonqada pelo DSM, como eu faço para receber as postagens por email e não perder nenhum post? Ele é a minha cara. Agora vou correr e trabalhar, estava tão entertida aqui, ai o telefone tocou e cair na real.

    Beijos
    http://diariovirtualdaane.blogspot.com.br/

    ResponderExcluir
  13. Como faço para deix=a-lo centralizado igual ao seu?

    ResponderExcluir
    Respostas
    1. Troque .linkwithin_inner {
      margin: 0px !important;


      por:

      .linkwithin_inner {
      margin: 0px auto !important;

      Excluir
  14. Sheila, muito obrigada pela ajuda!!
    Irei colocar os créditos!!
    Beijo! (:

    ResponderExcluir
  15. Aah Sheila, eu não consegui colocar esse Link Within...
    Ah n sei, mas deu td errado e não apareceu nem no blog...
    Kisses
    mme-meumundoencantado.blogspot.com

    ResponderExcluir
  16. Sheila querida, HELP!!!
    Fiz tudo certinho tanto para mudar as "cores" como também a posição do LinkWinthin, mas nada acontece. Consegui trocar o nome e só. Me ajuda por favor.
    Bjks.

    ResponderExcluir
  17. AMEI esse gadget, ele demou pra começar a funcionar mais agora ta e bonito...
    Só q to com um probleminha como faço pra mudar o titulo do LinkWithin, Como vc fez no seu: Gostou do post? Veja também: Gostou do post? Veja também:

    Obrigada, Adoro seu blog sempre dou um pulinho aqui...

    bjs...

    http://mimiycosmeticos.blogspot.com.br/

    ResponderExcluir
  18. Oie Sheila... EU coloquei o Link Within no meu blog jah faz um tempinho... Não apareceu até hoje... Fiz este tuto agora pra ver se aparecia e nada...
    Me ajudaa!! O que aconteceu?
    mmencantado.blogspot.com

    ResponderExcluir
  19. Sheila me ajuda por favor, meu linkwithin parou de funcionar e o html dele sumiu e quando coloco de novo só aparece a frase: Poderá também gostar de: sem nenhuma postagem.
    O que eu faço???


    Obrigada desde já

    Bjuss...
    http://mimiycosmeticos.blogspot.com.br/

    ResponderExcluir
  20. lindo adorei a dica, fiz lá editei bem pouquinho, beijos e parabéns

    ResponderExcluir
  21. Oi!!! Sheila
    Obrigado Por Dividir Seus Conhecimentos
    Esta Ajudando Muitos Aqui
    Tutorial Nota 10
    Você Sabe Como Tirar Esse Texto: LinkWithin
    Que Fica a Direita Logo Abaixo, Veja Se Possível:
    http://baixaogratis.blogspot.com.br/2013/03/age-of-empires-ii-hd.html
    Desde Já AGRADEÇO.

    ResponderExcluir
  22. Obrigada pelo tuto. Mas as imagens não apareceram pra mim, tem alguma coisa q eu possa fazer?? obrigada e parabéns pelo cantinho

    ResponderExcluir
  23. A Imagem Que Aparece é a Que Tem na Postagem
    Tem Imagem na Sua Postagem?

    ResponderExcluir
  24. Minha flor! Adorei o seu post! Obrigada. Ajudou-me muito. Incluí os posts relacionados personalizado. E usei a tabela: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

    Beijos!!!

    www.myqueenside.blogspot.com

    ResponderExcluir
  25. não consegui centralizar, e nem mudar o tamanho das imagens, mudo os valores, mas nada acontece com as imagens.....

    ResponderExcluir
  26. não consegui centralizar, e nem mudar o tamanho das imagens, mudo os valores, mas nada acontece com as imagens.....

    ResponderExcluir

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