Button Maker - Criando botões em CSS para seu Blog
Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade para assinar nosso feed.
CSS é o código que define o estilo de qualquer coisa que há em um blog, desde o título do blog, até as cores, fontes, e todos os outros tipos de personalizações que há em um layout. O CSS, ultimamente, vem sendo muito usado para a criação de botões em flash, como este que coloquei acima. É possível desenvolver um botão em flash para seu blog, graças ao Button Maker.
Conheci esta dica no metablog espanhol Vagabundia, um grande metablog, que disponibiliza várias dicas relacionadas a CSS. O Button Maker, permite a você criar seu botão em flash facilmente, após isso, copiar o código e colocá-lo em seu blog. Utilizando CSS, é possível desenvolver widgets fantásticos, e totalmente feitos em flash. Porém, para poder desenvolver widgets deste tipo, é preciso ter bastante conhecimento destes códigos. Caso ainda não conheça CSS, recomendo a leitura dos seguintes artigos:
-> Qual a diferença entre HTML e CSS
-> Aula de CSS para Iniciantes
Para adicionar este botão ao seu blog, não é preciso conhecer CSS, mas é recomendável conhece-lo para que evite erros. Para começar a desenvolver o seu botão, acesse o Button Maker e desenvolva o seu botão. É bem fácil, e é dividido em etapas. Em Top Gradient Color, você deverá escolher a cor da metade de cima de seu botão. Em Bottom Gradient Color, você deverá escolher a cor da metade de baixo de seu botão. Em Top Border Color, escolha a cor da borda de cima do botão. Em Hover Background Color, escolha a cor de fundo do botão, quando selecionado. Em Text Color, escolha a cor do texto do botão. Em Hover Text Color, escolha a cor do texto do botão, quando selecionado. Por último, em Active Background Color, escolha a cor de fundo do botão, quando ele for clicado. É possível escolher a fonte do texto de seu botão, no menu suspenso que há no final da página.
Adicionando CSS ao código-fonte
Antes de adicionar o botão, é preciso adicionar o CSS dele no código-fonte, para depois, poder adicioná-lo ao seu blog. Siga o tutorial a seguir para adicionar este código CSS ao seu template.
Blogger
Acesse o painel do Blogger e vá em Design -> Editar HTML -> Pressione CTRL + F e procure pela seguinte tag:
</head> |
Acima desta tag, cole o código CSS, da seguinte maneira:
| <style> CÓDIGO_CSS </style> |
Substitua CÓDIGO_CSS pelo código CSS de seu botão. Salve o seu template e confira se não ocorreram erros.
Adicionando o botão ao seu blog
Para adicionar o botão que você criou ao seu blog, primeiramente, você deve escolher um local para colocá-lo. Se deseja dentro de uma postagem, em um elemento HTML/JavaScript na sidebar do blog, ou em outro local de sua preferência. Quando encontrá-lo, adicione o seguinte código, fazendo as modificações requeridas.
| <a href="LINK" class="button">TEXTO_DO_BOTÃO</a> |
Substitua LINK pelo link que o botão irá redirecionar, e TEXTO_DO_BOTÃO pelo texto que deseja adicionar ao seu botão. Você pode ver que o botão já encontra-se em seu blog, funcionando facilmente. É bem interessante este recurso para quem deseja personalizar o layout de seu blog. Anteriormente, publiquei um widget em CSS, que pode ser interessante para você utilizá-lo em seu blog.
-> Menu de marcadores diferenciados - CSS3
11 Comentários:
nem consegui fiz tudo certo nmais nem funfou
@POST Informática,
O que aconteceu? Qual erro ocorreu?
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Scanner State 24 not Recognized
Error 500
acontece isso por favor me responda to precisando urgente
email para contato:rossitirinhas@gmail.com
Rossi Tirinhas,
Provavelmente, você colocou-o no local errado, ou apagou uma parte do código de seu blog acidentalmente. Tente colocar este botão em um blog de testes primeiramente, para ter certeza de que ele vai funcionar corretamente e não irá danificar o seu template.
CÓDIGO_CSS(DAI EU COLOQUEI O CODIGO AQUI E TENTO SALVAR E DA ERRO)
E O CODIGO EU PG AKI
http://css-tricks.com/examples/ButtonMaker/#source-code
OBS coloquei & no lugar de E em STYLE pq senão nao da para posta e do HEAD tambem troquei por &
Rossi Tirinhas,
Ao invés de adicionar o código do botão acima de </head>, coloque-o acima de ]]></b:skin>, sem usar as tags "style".
Declaração de variável inválida na skin da página: Não foi possível analisar as variáveis do skin porque elas apresentavam problemas de formação.
(dai mostro o codigo (só não coloquei aqui para poder postar pq senão ia fica muito grande))
Error 500
deu erro mesmo assim e eu coloquei em cima ]]> sem usar as tags "style"
me ajuda aee to querendo muito isso
Rossi Tirinhas,
Então vamos fazer isso manualmente, sem usar o código-fonte de seu blog. Primeiramente, escolha um local para colocar o botão. Vamos supor que você coloque ele na sidebar de seu blog. Coloque-o da seguinte maneira:
<style>
CÓDIGO_BOTÃO
</style>
<a href="LINK" class="button">TEXTO_DO_BOTÃO</a>
Faça as edições conforme indicamos no artigo, substituindo código_botão pelo código de seu botão, LINK pelo link que deseja direcionar ao clicar, e TEXTO_DO_BOTÃO pelo texto que você quer adicionar em seu botão.
A ainda não deu dai ele aparece tipo isso dai
http://3.bp.blogspot.com/_uBrohW4skc4/TBUPH7ls6gI/AAAAAAAAB6o/Itv1jvqL-rY/s1600/button+maker.jpg
Rossi Tirinhas,
Estranho acontecer isso, deve ser erro na hora de criar o botão no site. Antes de tentar colocar em seu blog, crie um blog de testes. É possível também que seja um erro em seu template.
Eu ja tentei criar um blog teste mas não deu seila por que deve ser algo a ver com o modelo de blog que eu escolhi sei la mas deixe agora eu coloquei de outra forma da uma olhada aee
http://rossitirinhas.blogspot.com/
(titulos da sidebar)
Postar um comentário
-> NÃO faça comentários ofensivos;
-> Faça comentários apenas RELATIVOS ao assunto do artigo;
-> NÃO faça conversas nos comentários;
-> É PROIBIDO usar links desnecessários, para isso comente usando OpenID;
-> Os comentários são VERIFICADOS, para garantir que não seja violada as regras acima;
Se preferir, fale conosco pela página de CONTATO.
Dica
Use tags como <b> e <i> para fazer comentários mais relevantes.