Personalizando o título da Sidebar com Imagem

11:05


Olá meus amores, hoje trago para voces um tutorial super simples + 10 Imagens personalizadas para colocar no titulo da sidebar. Essa imagens eu mesma criei, por tanto se forem reblogar por gentileza dêem os CRÉDITOS! #Obrigada!

Bom, para começar, va na Opcao Modelo do seu blog e clique em EDITAR HTML > Dê Ctrl+F e procure por: /* Headings , abaixo desse codigo terá .sidebar h2 { selecione essa linha até o fechamento da chave } e SUBSTITUA por:

.sidebar h2 {font-family: 'Bromello', sans-serif; /*Estilo da fonte*/font-size: 28px; /*Tamanho da fonte*/color: #000; /*Cor da fonte*/background:url("LINK_DA_IMAGEM") top center no-repeat;
margin-top: 10px;
padding: 15px; /*Diminua o numero se quiser a Fonte mais pra cima */-webkit-border-top-right-radius: 40px;
height: 45px;/*Altura da imagem nao alterar*/width: 290px; /*Largura da imagem nao alterar*/ text-align: center; /*Alinhamento do texto*/}



ENTENDENDO OS CODIGOS:

font-family: 'Bromello', sans-serif; /*Estilo da fonte*/ Voce substitue o BROMELLO por qualquer outra fonte desejada.

Onde tem escrito (LINK_DA_IMAGEM) substitua pelo link de uma das imagens logo abaixo, basta clicar com o botão esquerdo em cima da imagem e clicar em COPIAR URL DA IMAGEM.

padding: 15px; /*Numeros altos a fonte desce // Numero baixos ela sobe */

A altura e largura da imagem nao precisa alterar, pois as imagens estao todas personalizadas com 290 px por 45px.

Veja alguns RESULTADOS:




Imagens pronta para usar:











Espero que tenham gostado, curtam e compartilhem.

Você pode gostar também

21 comentários

  1. AAIII MEU CORE! Sempre quis mudar isso no meu layout mas nunca soube como e também tinha medo rsrs agoora aprendi! E sei que não vou destruir tudo se seguir suas orientações. Mas e a dúvida, qual imagem usar? Amei todas!!!!!! hahaha mas acho que a primeira vai combinar com meu blog! Muiiito obrigada por compartilhar tanta coisa com a gente!
    Muito sucesso para você!
    Beijos
    Tamara
    Blog Tamaravilhosamente

    ResponderExcluir
    Respostas
    1. Obr amore, fico feliz q tenha gostado! bjus

      Excluir
  2. Nossa que tutorial Maraaa♥
    Vou fazer já♥ Obrigada por compartilhar com a gente Reh♥
    Ps:Estou babando com esse seu novo lay, ta lindoo♥
    Bjão♥

    ResponderExcluir
  3. Ai, eu amei. Preciso urgentemente dá uma renovada no meu blog... Obrigada ♥

    http://www.meumundonofundo.com.br/

    ResponderExcluir
  4. Você sempre arrasando nos tutoriais eita menina de coração bom, eu já estou usando no meu blog parabéns pela sua força de vontade e dedicação amo seu blog e seus tutoriais. ♥

    http://beijouva.blogspot.com.br/

    ResponderExcluir
  5. Renata tentei fazer não deu , coloquei os codigos e tudo e nada poderia me ajudar !

    ResponderExcluir
    Respostas
    1. Juh, provavelmente seu layout ja deve ter algum codigo de personalizacao da sidebar imbutido ... =/

      Excluir
  6. Estou reformando meu blog e usei uma de suas imagens. Dei os devidos e créditos e amei o resultado, apesar de ainda não ter terminado todo o design. Todas as imagens são lindas e incríveis.

    Beijinhos de luz,

    http://atravesdaestanteblog.blogspot.com.br/

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Boa tarde!
    Peguei uma das imagens e já, já coloco os devidos créditos.

    https://maisvaidosabr.blogspot.com.br/

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Nossa adorei este tutorial. Muito obrigada por compartilhar, vai me ajudar e muito. Beijos.

    ResponderExcluir
  12. Adorei vou tentar depoiiis,Mas só uma dúvida, Você faz isso para as pessoas cobrando e tala ou só faz os tutoriais mesmo?

    ResponderExcluir
  13. Renata, esse post vai ajudar muita gente, é por compartilhar seus conhecimentos com os outros, sem medo, que chega-se ao sucesso!
    Adorei aquele que são dois retângulos, porque gosto da vibe minimalista, mas todos estão super fofos, parabéns pela profissão e pelo post, BEIJOOOS <3

    ResponderExcluir
  14. Oi, Reh! Adorei o tutorial! Parece ser muito fácil de fazer. Mas, confesso que sou medrosa para fazer essas coisas. Rsrsrsrsrs... Nunca dá certo pra mim.
    Vou tentar fazer. Amei o novo layout do seu Blogger! 😊
    Bjos

    ResponderExcluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir
  16. Adoreeii! O tutorial ficou muito bem explicado, com certeza vou tentar personalizar o meu. Bige beijos <3

    ResponderExcluir
  17. Rê sempre nos ajudando , agradeço a Deus por te conhecer. Amo seu post e depois irei tentar colocar !

    ResponderExcluir
  18. noooooossa queria esse dom viiu!!!! tu sabe de tudooo <3

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda