Tutorial: Personalizar o título dos gadgets


Oi galerinha! Venho lhes trazer um tutorial que é de muito interesse para várias pessoas. Afinal, como personalizar os títulos dos Gadgets sem mudar o HTML do blog?

Não sabe o que é gadget? É isso aqui ó.

Clique na imagem para aumentar o tamanho
Entendeu agora? Então vou lhes ensinar uma maneira rápida e simples de deixar o gadget do seu blog lindo. É a mesma forma que usei no meu, é rápido e simples, e o melhor: não precisa editar no HTML. Peguei este tutorial do blog Borboleta Rosa Vaidosa, é um blog bem legal e interessante, depois deem uma olhada lá.




Vá em Layout > Adicionar Gadget > HTML/JavaScript > Dentro dele você vai colocar os códigos de sua preferência, e pronto! Seu blog estará personalizado.

Neste site AQUI você pode ver os códigos das cores para trocar.

Aqui está o Gadget do meu blog, eu quem personalizei.





<style>
/*Títulos dos gadgets personalizados by Cat Girl and Géssica Marques*/
.sidebar h2 {
font-family: Pacifico; /* Fonte que você quer colocar */
font-style: normal; /* Estilo da fonte, se é bold ou italic. */
font-size: 20px;  /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto, pode mudar para left ou right */
color: #FFFFFF;  /* Cor da fonte, no meu caso está branco */
background:  #00CCF5; /* Cor do fundo, aqui está azul */
padding-left: 12px;
margin-bottom: 5px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 15px;
border-bottom-right-radius: 80px;
/*Fim dos títulos dos gadgets personalizados, não retire créditos*/



<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>
/*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>


Bom, galera. Comigo funcionou e creio que com vocês irá funcionar também. Espero que tenham gostado do tutorial. Estarei trazendo outros tutoriais de personalização de blog para vocês.





Compartilhe este post:

Comentários
5 Comentários

5 comentários :

  1. Olá Jéssica, eu sou a Glau. Antes de mais nada, PARABÉNS!!! pelo post e pelo blog! Tenho um blog novo oqueaglaugosta.blogspot.com, e faz tempo que eu queria personalizar o título dos gadgets, sem usar o HTML porque devido não estar familiarizada com esses códigos, nunca consegui fazer. Mas com as instruções do seu post consegui fazer. Obrigada!

    ResponderExcluir
    Respostas
    1. Oi Glau!!
      Fico muuuuito feliz que tenha lhe ajudado! E obrigada! *o*
      HTML as vezes é bem chatinho de mexer, e é sempre por ter certos códigos que são mais fáceis de usar.
      Qualquer dúvida é só falar!
      Beijinhos!

      Excluir
  2. Oi Jessica. Parabéns pelo blog, adoreis essa categoria com dicas para blogger. To querendo editar os titulos das gadgets. Seus modelos são lindos, mas eu to querendo pro meu blog uma pegada mais neutra (só com o nome e uma linha, sabe?) coisa tudo tipo. Mas fiquei feliz em saber que da para editar sem mexer no HTML. Vou continuar a procura. Abraço.

    Meu blog é www.blogdesamores.com.br

    ResponderExcluir
    Respostas
    1. Tipo, mais ou menos, assim como ta no teu blog <3

      Excluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes