Páginas

27 agosto 2014

Como personalizar o título dos gadgets (jeito fácil)




Oii gente, tudo bem?!
Hoje vim fazer um post TOTALMENTE diferente, de tutorial para melhorar o seu layout! E o primeiro post desse tipo é de como personalizar o título dos gadgets do blog.Bora conferir?!
Ah, e desculpem o fundo do blog que está estranho, ele mudou sozinho e não estou conseguindo mudar.Estou tentando arrumar se alguém conseguir me ajudar :D



Acho que você ja sabem que eu que fazia os meus layouts e também faço o da minha amiga( Julia Helena ) e sempre procuro melhorar e saber mais coisas. E dessa vez eu procurei como editar o título dos gadgets que são isso aqui:

E sempre que pesquisava tinha que mexer no html e eu não sei mexer muito bem rs' Até que achei um muuuito fácil e tinha que vir contar para você, pois apenas 1 BLOG que eu vi tinha esse tuto! Então vamos lá!

Vá em layout >> adicionar gadget(pode ser em qualquer lugar do seu layout) >> HTML/JavaScript >> e colocar alguns dos códigos que vou colocar abaixo ou você pode fazer sua própria imagem e incorporar a imagem!





<style>
/*Títulos dos gadgets personalizados by Cat Girl*/
.sidebar h2 {
font-family: verdana; /* Fonte */
font-style: normal; /* Estilo da fonte, pode mudar para italic */
font-size: 14px; /* Tamanho da fonte */
text-align: left; /* Alinhamento do texto pode mudar para center ou right */
color: #FFFFFF; /*Cor da fonte*/
background:  #FF69B4; /* Cor do fundo */
padding-left: 12px;
margin-bottom: 5px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
/*Fim dos títulos dos gadgets personalizados, não retire créditos*/
}
</style>




<style>
/*Títulos dos gadgets personalizados by Cat Girl*/
.sidebar h2 {
font-family: arial; /* Fonte */
font-style: italic; /* Estilo da fonte, pode mudar para normal */
font-size: 14px; /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto, pode mudar para left ou right */
color: #FFFFFF; /*Cor da fonte*/
background:  #FF69B4; /* Cor do fundo */
padding-left: 12px;
margin-bottom: 5px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius100px;
/*Fim dos títulos dos gadgets personalizados, não retire créditos*/
}
</style>

<style>
/*Títulos dos gadgets personalizados by Cat Girl*/
.sidebar h2 {
font-family: trebuchet ms; /* Fonte */
font-style: normal; /* Estilo da fonte, pode mudar para italic */
font-size: 14px; /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto pode mudar para left ou right*/
color: #FFFFFF; /*Cor da fonte*/
background:  #FF69B4; /* Cor do fundo */
padding-left: 12px;
margin-bottom: 5px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
/*Fim dos títulos dos gadgets personalizados, não retire créditos*/
}
</style>

                                                     
<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 20px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
background: url(http://3.bp.blogspot.com/-LSi99lmXI3c/UJHb0KMpGmI/AAAAAAAABEo/wUdZXiFA6-c/s1600/cabe%C3%A7alhoemenu12.png) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
</style>


<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 20px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
background: url(http://2.bp.blogspot.com/-nQqDiMwld2U/UJHb14tRRxI/AAAAAAAABE4/xArmSedML-s/s1600/gadgets2.png) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
</style>

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 20px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
background: url(http://2.bp.blogspot.com/-TKvJSAP1I0s/UJHb3KrTbxI/AAAAAAAABFA/2OS-RfaMCLw/s1600/minhabase+transparentee.png) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
</style>

Eu peguei as imagens e o código na net dos que eu mais gostei, não lembro os blogs, mas alguns códigos já tem o nome do blog.Então me desculpem por não colocar os créditos.Mas que fique bem claro essas imagens NÃO SÃO MINHAS!
Para você mudar as cores( se você quiser aqui esta uma lista de cores é só você clicar aqui para você conferir!

Bom esse foi o meu primeiro tutorial, foi bem rápido, e espero que tenham entendido e gostado!
Qual o próximo tutorial que vocês querem?Alguma dúvida? Só comentar !
Beijos ♥

15 comentários:

  1. e super facil mesmo eu tbm tinha muitas duvids e quase nunca conseguia mmexer ate que descobrir esses ai

    Tem post fresquinho no blog,corre pra conferir
    Blog Delineado Rosa / Sorteio de um kit de pinceis is-mine
    Big Beijos

    ResponderExcluir
  2. VALEU FUNCIONOU PERFEITO AQUI SUCESSO PRO SEU BLOG

    ResponderExcluir
  3. Muito bom! Obrigada por compartilhar essas dicas! Já instalei no meu blog!

    ResponderExcluir
  4. aaaaaaaah finalmente consegui mudar no meu blog, obrigada!
    Voce consegue personalizar data?

    http://alecanofremakeup.blogspot.com.br/

    ResponderExcluir
  5. Oi tudo bem ?? fiz td certinho , mas no meu blog diz dar erro . talvez tenha 2 html sobre comentarios e n estou sabendo tirar um deles , Heelp !!

    ResponderExcluir
  6. Olá Bruna, amei o seu blog, criei o meu blog ontem, não tem nenhum post ainda. Dê uma olhadinha http://hashtagsorria.blogspot.com.br/ já estou inscrita no seu, se puder se inscreva no meu também. beijo!

    ResponderExcluir
  7. Adorei! Aproveite e faça uma visita! Bjs http://narrandoemprimeirapessoa.blogspot.com.br/

    ResponderExcluir
  8. Muito obrigada Bruna! Já tinha tentado em outros tutoriais mas não tinha dado certo. Agora sim! Valeu!

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

    ResponderExcluir
  10. Nossaaa se pudesse dava o Oscar pra vc! Procurei tanto isso!!Muito obrigadaaa


    coisas-da-abigail.blogspot.com

    ResponderExcluir
  11. Valeuuuu ameeei

    bonecasemodabybia.blogspot.com

    ResponderExcluir
  12. Nossa valeu mesmo!

    http://unhasminhasunhas1.blogspot.com.br/

    ResponderExcluir
  13. muito obrigado adoreeei beijos olha meu blog
    http://ericasouzamendes.blogspot.com.br/

    ResponderExcluir
  14. muito obrigado adoreeei beijos olha meu blog
    http://ericasouzamendes.blogspot.com.br/

    ResponderExcluir
  15. Valeu xará, me ajudou muito!

    http://www.blogsantacruzense.com/

    ResponderExcluir

Faça um comentário

♥ Sem xingamentos/palavrões
♥ Coloque no final do comentário o link do seu blog,para que eu possa retribuir a visita e dar uma olhadinha no seu blog ;)
♥ Comentários "ctrl+c e ctrl+v" serão ignorados!
♥ Em caso de dúvidas ( felicio_bruna@ymail.com )

♥ Me siga nas redes sociais:
Twitter|Fanpage|Instagram

Obrigada pela visita, volte sempre!

Beijos,
Bruna ♥