Menu de Marcadores Diferenciado - CSS3
Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade para assinar nosso feed.
Marcador 1 Marcador 2 Marcador 3
Um código diferenciado e avançado, é o CSS3, que permite criar widgets incríveis. JMiur, um dos melhores metabloggers, dono do Vagabundia, metablog espanhol, faz experimentos usando CSS3, obtendo resultados incríveis. Um desses experimentos, é este menu de marcadores, que foi criado usando códigos CSS3. Insira este menu ao seu Blog, para melhorar seu Design.
O layout de nosso Blog, deve chamar a atenção do leitor, mas, ao mesmo tempo, deve ser leve, para ter uma boa navegabilidade, e tornar a navegação de seu visitante agradável. Para obter algumas dicas para melhorar a navegabilidade, leia estes artigos:
-> Dicas para melhorar a Navegabilidade de seu Blog
-> Poluição na sidebar - Melhore o visual de seu Blog
Este recurso não será como os marcadores nativos do Blogger, você terá que configurá-lo, como explicarei com o decorrer deste tutorial. Antes de tudo, crie um documento simples no Bloco de Notas, ou no seu editor de texto, seja o Word ou o WordPad. Salve o nome de seu marcadores, seguidos de sua URL.
Agora, no painel de seu Blog, vá em: Layout -> Elementos da Página -> Adicionar um Gadget -> HTML/JavaScript. Cole o código abaixo, e faça as alterações:
| <style> .grower { background-color:rgba(0, 195, 255, 0.3); border: 1px solid #456; display: block; margin: 5px auto; padding: 2px 5px; text-align: center; width: 200px; -webkit-border-radius: 2px; -moz-transition: all 0.1s ease-in-out; -moz-border-radius: 2px; -webkit-transition: all 0.1s ease-in-out; } .grower:hover { background: #1E90FF; border-color: #FFF; -moz-border-radius: 10px; -moz-box-shadow: 0 0 20px black; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -webkit-box-shadow: 0 0 20px black; -webkit-border-radius: 10px; } </style> <a href="LINK_DO_MARCADOR" class="grower">NOME_DO_MARCADOR</a> <a href="LINK_DO_MARCADOR" class="grower">NOME_DO_MARCADOR</a> <a href="LINK_DO_MARCADOR" class="grower">NOME_DO_MARCADOR</a> |
7 Comentários:
Muito legal esse recurso,preciso mesmo aprender a programar em CSS.Valeu pelas dicas Vinícius,já vou utilizar,té mais.
Não conseguir fazer !!! mais eh bem legal essa dica...vlw msm..vou tentar novamente depois eu falo se eu conseguir..rsrs
Ah viniicius queria saber como se descobri que plagiou uma postagem...plagiaram a minha e não consigo descobrir quem foi :x !!!
spero que responda...
@ScOlk*,
Como você sabe que plagiaram? Obviamente, se sabemos que fomos plagiados, saberemos quem nos plagiou, qual Blog/Site que plagiou.
como colocar ele na horizontal ??
@[CJunior],
Não descobri como fazê-lo. Creio que não seja possível por causa da maneira que ele foi desenvolvido em CSS.
como coloco um cor de fundo nestes marcadores?
@Escritório Zanuni,
Substitua os valores destacados em vermelhos, aqui abaixo, no código original do botão até chegar a cor que deseja.
.grower {
background-color:rgba(0, 195, 255, 0.3);
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.