Icones: OFF: http://www.merrypic.com/files/jlvjequcwpg0s8lzcljr.ico http://www.iconj.com/ico/8/g/8gulktd3sd.ico OFF: http://www.imageboo.com/files/7jrisja3pe8b18nbdcsj.ico Circuito Rede Cerebral: Buscador Personalizado
quarta-feira, 27 de janeiro de 2010

Buscador Personalizado


A criação de um Buscador Personalizado é fácil e rápida de acordo com as necessidades. Os códigos abaixo são básicos, porém suficientes para editar ou criar buscador personalizados para seu Site ou Blog.

Legenda:
Códigos VERMELHOS não podem ser alterados, a menos que saiba codificação HTML, CSS ou JavaScript
Códigos VERDES devem ser alterados de acordo com a necessidade

Buscador Padrão
Código:
<div align="center">
<form action="/search" method="get"><input name="q" size="16" type="text" /><input value="Buscar" type="submit" /></form>
</div>

Amostra:


Buscador Padão Personalizado
Código:
<div align="center">
<style><!--
#form2:hover {
border: 1px groove #6495ED;
}
#form2:focus {
border: 1px groove #6495ED;
background-color: #F8F8FF;
}
#form2 {
color : #27408B;
border : 1px groove #63B8FF;
font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
font-size : 15px;
}
#submit2 {
height : 22px;
color: #FFFFFF;
border : 1px groove #63B8FF;
background-color: #104E8B;
cursor : pointer;
}
--></style>
<form action="/search" method="get">
<input id="form2" name="q" size="16" type="text" /><input type="submit" id="submit2" name="submit2" value="Buscar" alt="Buscar" /></form>
</div>

Amostra:



Buscador Personalizado
Código:
<style><!--
#form3:hover {
border : 0;
}
#form3:focus {
border : 0;
}
.form3 {
float : center;
width : 156px;
height : 33px;
background : url(http://img99.imageshack.us/img99/6947/barrax.jpg) no-repeat;
background-color : transparent;
}
#form3 {
padding-top : 8px;
margin-left : 5px;
color : #ffffff;
font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
font-size : 15px;
background-color : transparent;
border : none;
}
#submit3 {
float : left;
background : url(http://img193.imageshack.us/img193/1245/botos.jpg) no-repeat;
height : 33px;
width : 44px;
margin-top : -27.5px;
margin-left : 158px;
border : none;
text-indent : -999%;
cursor : pointer;
}
--></style>
<div align="center">
<form action="/search" class="form3" name="form3" method="get">
<input id="form3" value="Buscar..." name="q" onblur="if (this.value == '') this.value = 'Buscar...';" size="16" onclick="if (this.value == 'Buscar...') this.value = '';" type="text" /><input id="submit3" value="" type="submit" /></form>
</div>

Amostra:


1 comentários:

Postar um comentário

 
Subir