![]() |
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.
/*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*/
/*Títulos dos gadgets personalizados by Cat Girl*/ 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 */ -webkit-border-radius: 100px; -moz-border-radius: 100px; /*Fim dos títulos dos gadgets personalizados, não retire créditos*/
/*Títulos dos gadgets personalizados by Cat Girl*/ 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 */ -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*/
/*Títulos dos gadgets personalizados by Cat Girl*/ 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 */ -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*/ 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.