25.12.12

Tutorial - Search Scroll

Yoo~
Trago um novo tutorial de uma barra de pesquisa super legal!!
Aconselho por ela no cabeçalho(lembram daquele da Dianna Agron?)
Eu amei!!
1.Vá em Editar HTML e procure por ]]></b:skin>, após encontrar a tag cole acima:
/** SEARCH **/
input {outline: none;}
input:-moz-placeholder {color: transparent;}
input::-webkit-input-placeholder {color: transparent;}
input::-webkit-search-cancel-button {display: none;}
input[type=search] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; font: 12px 'Calibri';}
input[type=search] {background: #CORDEFUNDO url('http://static.tumblr.com/yqaaqpd/C53mevbfl/-.png') no-repeat 9px center; border: solid 1px #CORDABORDA; padding: 10px 10px 10px 0px; width: 55px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s;}
.search input[type=search] {width: 18px; cursor: pointer; padding-left: 10px; color: transparent;}
.search input[type=search]:focus {width: 130px; padding-left: 32px; color: #363636; cursor: auto;}
.search input:-moz-placeholder {color: transparent;}.search input::-webkit-input-placeholder {color: transparent;}
2.Em um gadget HTML/Javascript cole: 
<form class="search"><input type="search" placeholder="Search" /></form>
E já está!!



2 comentários:

✖ - Não insulte - senão seu comentários irá ser removido
✖ - Comente sempre que puder!!Ficamos sempre feliz quando comentam :)
✖ - Se está querendo comentar mas tem preguiça, faz esforcinho xD

Atentamente,

O time.