07/12/2012

Personalizar os gadgets

Olá pessoal! Hoje trouxe um tutorial de como personalizar os gadgets e colocar faixas no título deles. É bem fácil e vai ficar mais ou menos assim:



Vá no HTML, procure (com ctrl+F) por ]]></b:skin> e, acima do que achar, cole:
/* Gadgets */
.sidebar .widget {
background: #ffffff; /* Cor do fundo */
padding: 10px;
-moz-box-shadow: 0 12px 10px -9px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 12px 10px -9px rgba(0, 0, 0, 0.3);
box-shadow: 0 12px 10px -9px rgba(0, 0, 0, 0.3);
}
/* Título dos gadgets*/
.sidebar h2 {
font-family: Calibri; /*Tipo de fonte*/
font-weight: normal;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
font-size: 18px; /*Tamanho da fonte*/
color: #ffffff; /*Cor da fonte*/
background: url("LINK_DA_FAIXA") no-repeat center; /* Fundo */
height: 50px;/*Altura da imagem da faixa*/
width: 260px; /*Largura da imagem da faixa*/
text-align: center; /*Alinhamento do texto*/
float: left; /* Se não ficar bom, mude para left */
margin-left: -38px; /* Movimenta a faixa para a esquerda */
margin-top: -10px; /* Movimenta a faixa para cima */
}
Encontre várias faixas nesse post!

Procure também por .main-inner .widget h2 {, apague tudo o que estiver entre as chaves e troque por:
padding: 10px 15px 0px;

O código deve ficar dessa forma:



É isso, espero que tenham gostado.

15 comentários

  1. amei o tuto muito útil
    eu vi seu blog no the lovers e disse quem seguisse seu blog tu~iria seguir de volta bom eu irei seguir se vc não cumprir o prometido não irei fazer nada eu gostei do seu blog ^w^
    http://anime-mania-teen.blogspot.com.br/

    ResponderExcluir
  2. Amei o tutorial!
    Amo esse blog perfeito :3 Kisses!!

    http://sonhosnasnuvens.blogspot.com.br/

    ResponderExcluir
  3. Eu estava precisando desse código :3 já salvei para não procurar mais *---*

    ResponderExcluir
  4. Muito bom o tutorial,me ajudou muito flor
    ~Kiss
    ~http://pequenaleitoradevoradora.blogspot.com.br/

    ResponderExcluir
  5. Óh god me ajudou muito mesmo *--* thank you, poderia seguir tbm? >> http://edicoesdeumafa.blogspot.com.br/

    ResponderExcluir
  6. Esse tuto fez meu Lay ficar um sei lá oque

    Ela esta todo maluco

    ResponderExcluir
  7. Muito obrigada pelo tuto!
    Me ajudou muito!

    ResponderExcluir
  8. não achei isto no meu html ]]> e agoraa ?

    ResponderExcluir
  9. Adoreeeii *-* .. to começando agora, você ajudou muito! Obrigada s2

    ResponderExcluir
  10. OI como faz pra a faixinha subir mesmo ? tipo ficar na pontinha de cima da caixa?vlw e.e

    ResponderExcluir
  11. Obrigado pelo Tuto.Vou usar no meu layout free!
    Beijos

    ResponderExcluir
  12. Obrigada ! essa tuto me ajudou muiito ! visite meu blog http://delicatemakeup.blogspot.com.br/ bjus :*

    ResponderExcluir

✧ Por favor, evite comentários não relacionados ao post.

✧ Caso comecem a surgir comentários contendo ofensas ou causando mal-estar, a moderação de comentários será ativada imediatamente.

✧ O blog está desativado, por isso não aceita afiliados, tags e afins.

« »