Tutorial: Personalizar o título dos gadgets

sexta-feira, fevereiro 13, 2015 4 Comentários A+ a-


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.





Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




4 comentários

Escreva um comentários
Glau Malves
EQUIPE GEEK
26 novembro, 2015 Deletar

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!

Responder
avatar
Géssica Marques
EQUIPE GEEK
26 novembro, 2015 Deletar

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!

Responder
avatar
Bárbara Bezerra
EQUIPE GEEK
10 janeiro, 2017 Deletar

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

Responder
avatar
Bárbara Bezerra
EQUIPE GEEK
10 janeiro, 2017 Deletar

Tipo, mais ou menos, assim como ta no teu blog <3

Responder
avatar

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.