Tecnoblog
Visualizar
HOMEQUEM SOMOSTERMOS DE USOAPLICATIVOSBANNERSPARCERIAARQUIVO DO BLOGPRIVACIDADECONTATOSUGERIR UM ARTIGO
Caixa de pesquisa personalizada para blog (Versão 2)
► +A +/- -A
Olá Querido Leitor! Estarei neste tutorial de hoje, ensinando a vocês a como adicionar a nova caixa de busca Versão 2 disponibilizada aqui no Tecnoblog, a caixa de busca tem um estilo bem elegante e moderno, a caixa de busca não tem efeitos fantásticos, fiz algo leve, bonito e moderno para que ela não fique muito densa. Então Vamos ao Tutorial!
Demostração da Caixa de Busca em imagem:
1º Passo - Instalando o CSS ao Blog
1. Faça Login no Blogger
2. Em seguida, no menu suspenso, clique em Modelo.
3. Depois clique no Botão Editar HTML
4. E procure pela seguinte tag:
]]>
5. E acima da tag citada acima adicione o seguinte código:
.busca { background:url(http://tecnoblogwebshost.webs.com/bg-busca.png) no-repeat; height:51px; width:304px; margin:0 0 10px 0; position:relative; }
.pesquisa { float:left; margin:13px 0 0 13px; padding:5px; color:#666; width:230px; border:none; background:none; font-size:14px; outline:none; }
.button { float:left; margin:7px 0 0 13px; }
.button:hover { opacity:0.9; filter:alpha(opacity=80); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
Pronto, a parte de instalação do CSS esta no Fim, Agora vamos ao Segundo Passo!
2º Passo - Configurando e adicionando a caixa ao Blog
1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:
0 comentários:
Postar um comentário