quinta-feira, 23 de junho de 2016

Como fazer search Box responsive no Blogger

search-box-responsive-widget-blogger


Hoje vamos compartilhar um código para caixa de busca responsive no Blogger, com a demanda de dispositivos móveis crescentes isso é uma necessidade para o usuario ao procurar algo no Blogger no entanto podemos ajudar fazendo a caixa de mensagem responsive preparado para esses dispositivos para isso veja como adicionar no Blogger no passo a passo.



Adicionando search box responsive no Blogger

Faça login no blogger então no menu modelo
editar>> HTML/JavaScript com as teclas combinadas localize ]]></b:skin> ou </style> logo acima disso copie e cole o seguinte código.

#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}#search-form{height:40px;background-color:#fff;overflow:hidden}#search-text{font-size:14px;color:#3b8686;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#0b486b;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#3b8686}


Salve o template.

Vá em layout então adicionar novo gadget localize o lugar se na sidebar acima no cabelho adicionar novo gadget JavaScript copie e cole o seguinte código.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search now ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>


Salve e pronto.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner