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.