Veja também o novo modelo de personalização. Clique aqui.
Estava outro dia falando com minha irmã
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.
- Entre em Modelo > HTML;
- Clique em qualquer parte de seu HTML e aperte "Ctrl + F" no seu teclado;
- Copie o seguinte código: ]]></b:skin> cole-o na caixinha que abriu (Search) e aperte a tecla "Enter";
- 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;
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*/-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: 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,

Está aí, algo que ainda não tinha tentado.
ResponderExcluirNo 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:*
Olá..
ResponderExcluirVenha participar do sorteio!
http://coisinhasbrasil.blogspot.com/
Boa Sorte!
- * 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
ResponderExcluirMuito boa a postagem! Gostei da dica.
ResponderExcluirBeijos bom fim de semana!
Pri
http://www.metamorfoseparalela.com.br/
POst muitcho bom flor.
ResponderExcluirFika a dik.bjuuus
Bom final de semana
http://so-pra-teens.blogspot.com.br/
Fica dica flor:
ResponderExcluirAumente um pouco a sua parte de posts ok?
Beijão,muito bom o tuto.bjs
http://so-pra-teens.blogspot.com.br/
Sheilinha a Titia não tem mais idade pra digerir tanta informação. Na verdade esta tia chata já está ultrapassada. Acredita??
ResponderExcluirPortanto 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!!!
Hoje é dia de São Pedro, o fundador da nossa igreja.
ResponderExcluirOlá 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:
ResponderExcluirhttp://nossoapezinhofeliz.blogspot.com.br/
Olá Sheila! Nossa, gostei muito desse post, bem legal!
ResponderExcluirAdoro 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
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
ResponderExcluirAmiga 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.
ResponderExcluirBeijos
http://diariovirtualdaane.blogspot.com.br/
.
ResponderExcluirComo faço para deix=a-lo centralizado igual ao seu?
ResponderExcluirTroque .linkwithin_inner {
Excluirmargin: 0px !important;
por:
.linkwithin_inner {
margin: 0px auto !important;
Sheila, muito obrigada pela ajuda!!
ResponderExcluirIrei colocar os créditos!!
Beijo! (:
Aah Sheila, eu não consegui colocar esse Link Within...
ResponderExcluirAh n sei, mas deu td errado e não apareceu nem no blog...
Kisses
mme-meumundoencantado.blogspot.com
Sheila querida, HELP!!!
ResponderExcluirFiz 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.
AMEI esse gadget, ele demou pra começar a funcionar mais agora ta e bonito...
ResponderExcluirSó 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/
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...
ResponderExcluirMe ajudaa!! O que aconteceu?
mmencantado.blogspot.com
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.
ResponderExcluirO que eu faço???
Obrigada desde já
Bjuss...
http://mimiycosmeticos.blogspot.com.br/
lindo adorei a dica, fiz lá editei bem pouquinho, beijos e parabéns
ResponderExcluirOi!!! Sheila
ResponderExcluirObrigado 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.
Obrigada pelo tuto. Mas as imagens não apareceram pra mim, tem alguma coisa q eu possa fazer?? obrigada e parabéns pelo cantinho
ResponderExcluirA Imagem Que Aparece é a Que Tem na Postagem
ResponderExcluirTem Imagem na Sua Postagem?
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
ResponderExcluirBeijos!!!
www.myqueenside.blogspot.com
Imagem bugada Sheila :D
ResponderExcluirnão consegui centralizar, e nem mudar o tamanho das imagens, mudo os valores, mas nada acontece com as imagens.....
ResponderExcluirnão consegui centralizar, e nem mudar o tamanho das imagens, mudo os valores, mas nada acontece com as imagens.....
ResponderExcluir