Personalizando o título da Sidebar com Imagem
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.
31 comentários
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!
ResponderExcluirMuito sucesso para você!
Beijos
Tamara
Blog Tamaravilhosamente
Obr amore, fico feliz q tenha gostado! bjus
ExcluirNossa que tutorial Maraaa♥
ResponderExcluirVou fazer já♥ Obrigada por compartilhar com a gente Reh♥
Ps:Estou babando com esse seu novo lay, ta lindoo♥
Bjão♥
Obg Rafinha, bjus
ExcluirAi, eu amei. Preciso urgentemente dá uma renovada no meu blog... Obrigada ♥
ResponderExcluirhttp://www.meumundonofundo.com.br/
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. ♥
ResponderExcluirhttp://beijouva.blogspot.com.br/
Renata tentei fazer não deu , coloquei os codigos e tudo e nada poderia me ajudar !
ResponderExcluirJuh, provavelmente seu layout ja deve ter algum codigo de personalizacao da sidebar imbutido ... =/
ExcluirE qual o melhor layout ?
ExcluirEstou 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.
ResponderExcluirBeijinhos de luz,
http://atravesdaestanteblog.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirBoa tarde!
ResponderExcluirPeguei uma das imagens e já, já coloco os devidos créditos.
https://maisvaidosabr.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirNossa adorei este tutorial. Muito obrigada por compartilhar, vai me ajudar e muito. Beijos.
ResponderExcluirAdorei vou tentar depoiiis,Mas só uma dúvida, Você faz isso para as pessoas cobrando e tala ou só faz os tutoriais mesmo?
ResponderExcluirRenata, esse post vai ajudar muita gente, é por compartilhar seus conhecimentos com os outros, sem medo, que chega-se ao sucesso!
ResponderExcluirAdorei 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
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.
ResponderExcluirVou tentar fazer. Amei o novo layout do seu Blogger! 😊
Bjos
Este comentário foi removido pelo autor.
ResponderExcluirAdoreeii! O tutorial ficou muito bem explicado, com certeza vou tentar personalizar o meu. Bige beijos <3
ResponderExcluirRê sempre nos ajudando , agradeço a Deus por te conhecer. Amo seu post e depois irei tentar colocar !
ResponderExcluirnoooooossa queria esse dom viiu!!!! tu sabe de tudooo <3
ResponderExcluirAmo seus tuts Rê, obrigada!!!
ResponderExcluirOlá, adorei a dica, vou ver se dá para usar no novo blog.
ResponderExcluirMuito bom seu blog, parabéns!
Tenho dúvida! Qual a largura ideal para um blog? Se puder me ajudar agradeço demais.
Está privado porque ainda não está pronto e nem sei se será este o nome que quero usar, nome é um problema kkk. Dúvida afff.
http://charmosasfashion.blogspot.com.br/
Tenha um lindo dia.
Obrigada
Bjs
EU NÃO CONSEGUI. ME AJUDE
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirAdorei o tutorial e já usei no meu
ResponderExcluirhttp://livrometro.blogspot.com.br/
Obrigada por disponibilizar <3
renata me ajuda o meu nao muda de jeito nenhum :(
ResponderExcluirOlá Renata! Tudo Bom?
ResponderExcluirVocê pode me falar por favor como deixo o cabeçalho do blog em toda a largura da página?
Igual estão as suas rosas e também o babadinho com (home, sibre, layout...)
Tô tentando dar uma melhorada no meu blog
www.brunacarvalho.com
obrigada.
Obrigado! Fiz e deu certo. Mas acabou que a letra ficou em negrito e não consigo mudar... o que será que deu errado?
ResponderExcluirConsegui fazer tudo :D Só não consegui alterar a fonte e colocar uma estilo essa que você mostrou nas três fotos. Como faço?
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.