3 formulários de pesquisas customizáveis e adaptáveis a qualquer layout

3 comentários
formulrio-de-pesquisas-custumizvel_t



Recentemente, mais precisamente no inicio do deste ano, em fevereiro, disponibilizei aqui uma caixa de pesquisa que fez muito sucesso, por ser única e que agregava valor ao seu blog ou site, pois todas as pesquisas feitas, eram transformadas em um pesquisa a sua url via google, o que lhe dava alguns bônus de autoridade para sua url.. mas, na ocasião um de meus leitores, fez a seguinte pergunta:

Como eu faço pra colocar um texto dentro da caixa de busca?

Infelizmente não posso dar os créditos a pergunta, pois o mesmo estava logado como anônimo. Então como a dúvida dele pode ser a de muitos resolvi disponibilizar algumas formas de se editar este e qualquer outro formulário de pesquisas que você tenha em seu blog ou site. então  vamos ao que nos interessa:

Nota: o formulário de pesquisa ocupa o mínimo de espaço em blogs e sites, e essa é uma razão pela qual sempre é ignorado . Especialmente, quando se é novo em HTML, CSS ou design do site em geral, deixam este item sempre relegado a segundo plano no contexto geral do designer, mas em se falando de usabilidade ele tem uma importância fundamental. Então, para facilitar esta tarefa, irei disponibilizar três formulários de pesquisas que você possa ter visto por ai na rede. estarão  pronto para personalização, você apenas tem que copiar e colar o código HTML e os estilos para seu modelo e alterar os valores de acordo com seu gosto e  estará pronto.

Colocar texto dentro de formulários de pesquisa

Três linhas de argumentos foram adicionados para uma mensagem para aparecer dentro de cada formulário de pesquisa em uso (ONFOCUS).


value = "Digite e tecle enter para pesquisar" onfocus = "if (this.value == this.defaultValue) this.value ='';" onblur = "if (this.value =='') this.value = this.defaultValue;"

É obrigatório declarar  o valor do CCS background-color,  porque o navegador   Opera  tem configurações de fundo transparentes para formulário de pesquisas por padrão do navegador...

FOMULARIO DE PESQUISAS PADRÂO:


<div class="custom-search-form1"><form method="get" action="/search"><div><input name="q" size="26" type="text" value="Type and hit Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box1" /><input type="submit" id="btw" class="btn-1" value="Search" class="btn" /></div><br class="clear" /></form></div>


Estilo bloco Inserir no seu CSS.


. Custom-search-form1 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; padding: 10px 0 0 8px; width: 282px; } . Custom-search-box1 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; margin: 0 0 0 0; color: # 515151; font-weight: normal; font-size: 13px; height: 16px; width: 210px; } . Btn-1 { padding: 2px; margin-right: 8px; width: 52px; height: 25px; }

Formulário 2 - Formulário de pesquisas com botão
Este Formulário de Pesquisas tem sua largura definida de 291px e podem ser diferentes se instalado em largura diferente. Ajuste os valores de largura. Sua formatação assim,para que os quatro cantos sejam clicáveis.

<div class="custom-search-form2"><form method="get" action="/search"><div><input type="submit" id="btw" class="btn-2" value="" /><input name="q" size="26" type="text" value="Type and hit enter or search button" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box2" /></div><br class="clear" /></form></div>

Estilo bloco Inserir no seu CSS.

. Custom-search-form2 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; width: 282px; padding: 0 0 0 0; margin: 0 0 0 0; } . Custom-search-box2 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; color: # 515151; font-weight: normal; font-size: 13px; height: 17px; width: 219px; position: relative; top: 23px-; left: 26px; } . Btn-2 { position: relative; top: 10px; esquerda: 9px; height: 40px; width: 263px; }

Se preferir usar CSS imagens de fundo, basta definir a cor de fundo para transparente, fronteira a 0, o cursor para cursor e, em seguida, adicionar uma imagem de fundo.
Formulário 3 - Sem botão

<div class="custom-search-form3"><form action="/search" method="get"><input name="q" size="26" type="text" value="Type and hit enter to search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box3" /></form></div>

Estilo bloco Inserir no seu CSS.

. Custom-search-form3 { background: # fff url (insert_image_url.jpg) no-repeat; color: # 515151; border: 1px solid # d7d7d7; padding: 10px 0 0 8px; width: 282px; } . Custom-search-box3 { background: # fff; border: 1px solid # ddad08; padding: 7px 0 0 8px; margin: 2px 0 23px 0; color: # 515151; font-weight: normal; font-size: 13px; height: 16px; width: 263px; }

A intenção destes 3 formulários de pesquisas é a simplicidade,e faz com que seja  fácil de personalizar os treis.Os formulários 1 e 2 terão possibilidade de apresentar problema de cross-brouser, mas o 3 não. pois a tecla enter esta sendo usada para informar aos visitantes que eles só precisam pressionar a tecla enter depois de digitar o termo pesquisado.
Bom espero que estes 3 formulários de pesquisas, mas o que já disponibilizei anteriormente sirva para melhorar a interação de seus leitores em seus magníficos sites e blogs, estarei esperando como de costume a avalanche de perguntas..
 


Continue Lendo==>>

5 Segredos para um ranqueamento elevado nos motores de buscas

0 comentários

5 Segredos para  um ranqueamento elevado nos motores de buscas

motores de buscas



O Google, muda frequentemente seus algoritmos, que determinam os fatores de Ranqueamento. O que é certo hoje, amanhã poderá não ser mais. Assim como o Google, as mídias sociais estão também engajadas nestas mudanças.  Conteúdo de qualidade e estar nas mídias sociais, são hoje, fatores altamente relevantes, na classificação de um conteúdo.

O Google autoria, lançado ano passado, Orienta autores a construírem uma marca de valor, bem como uma boa reputação. O Google autoria permite que autores divulguem seu conteúdos. para esta divulgação, basta estar logado na conta do Google. Hoje tornou-se vital para os autores aproveitarem estas ferramentas e tirar proveito delas para classificação positiva de seus textos.
A mídia social é também uma  forma eficiente de tornar seu site ou blog popular, pois hoje é através destas mídias, que a maioria dos leitores buscam informações na rede.Tenha sempre um botão de compartilhamento em seu site para que qualquer um  compartilhe seu conteúdo com outras pessoas.  crie e vincule contas de redes sociais ao seu blog, para que você possa também compartilhar com seus seguidores. Tenha em mente que o Google+, é essencial nesta tentativa de divulgação de seus textos, pois não poderia ser de outra forma, afinal, uma rede social do maior indexador de conteúdo da internet, teria que ser obrigatoriamente a mais importante neste propósito.

Outra forma de se obter Ranqueamento é através de  "backlinking".Mas algo mudou, e mudou para melhor,... ou seja, não é mais a quantidade que vale, e sim a qualidade dos links, portanto, faça ligações com sites ou blogs que tenham uma autoridade boa em seu nicho. Tente conseguir convites para escrever em sites ou blog que tenham esta autoridade elevada,  sua reputação aumentará e seus textos serão melhor ranqueados e alavancarão o ranque de seu blog ou site.
Acrescente vídeos em seus textos, pois isto, aliado a muitas imagens, ajudam na valorização de seu blog ou site, o que faz prender a atenção dos seus leitores em relação a sua concorrência. uma forma de se fazer isto, é através de vídeo-aulas  postadas no Youtube , pois isto, trará muitos leitores ao seu blog ou site.

Outro fator importantíssimo atualmente, é tornar seu site ou blog compatível com plataformas móveis, afinal, hoje a grande maiorias dos acessos estão sendo através destes dispositivos, estar apto a usufruir desta gama de leitores, aumenta a sua acessibilidade, e conforme disse, não desconsidere esta possibilidade!

Todas estas mudanças nos algoritmos, estão em sua maioria voltadas a combater a proliferação de conteúdos de spam e de baixa qualidade. Afinal, quem busca conteúdo, busca qualidade sempre. Espero que esta minha breve explanação sobre este assunto, possa servir aos meus leitores a agregarem valor em seus sites e blogs, e tenham a certeza de uma boa classificação nos Motores de buscas e obtenham o tão sonha sucesso! 



Continue Lendo==>>

Colocando widget de comando de tecla de seta no blog

0 comentários

widget -no -blog-teclas-de-seta
Sempre que falo ou escrevo algo sobre SEO tento na medida do possível falar algo sobre usabilidade, pois acredito que o SEO esta para usabilidade assim como a bicicleta esta para o guidom...
então dando continuidade a este assunto, vou disponibilizar abaixo um script que torna a navegação mais simples... pois agrega mais uma função ao seu blog... infelizmente, este widget que segue é apenas para a plataforma blogger.
     E a esta altura, você deve estar se perguntando, para que serve este novo widget, e o pior! que widget é este?

     Bom, conforme disse a função dele é facilitar a navegação, proporcionando a possibilidade de que o usuário possa através das teclas com seta a direita e esquerda, bem como as setas acima e abaixo de seu teclado sejam utilizadas nas paginas de seu blog....

Este widget é muito simples e limpo e você pode ver uma demonstração desta ferramenta  nesta página. Se você usar as setas acima e abaixo, você será capaz de navegar acima e abaixo nas páginas deste blog. Isso não funciona apenas nas páginas de postagem, mas também na home page e nos índices do blog. A  chave de seta de navegação Widget será desativado quando você está digitando algo em uma caixa de texto no blog (Isso foi evita que a página mude quando o usuário está digitando algo em uma caixa de texto e usa as setas do teclado para se mover este texto.).
Como remover o Widget
Se você quiser remover esse widget de, a qualquer momento, você pode fazer isso através da remoção da seta de navegação de página Widget na página de Layout.

Coloque o titulo que lhe convier para futura localização deste widget:
&lt;script type='text/javascript'&gt;
  document.onkeyup = function(event)
  {
  if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
  event = event || window.event;
  switch(event.keyCode)
  {
  case 37:
  var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
  if(newerLink !=null) window.location.href = newerLink.href;
  break;
  case 39:
  var olderLink = document.getElementById('Blog1_blog-pager-older-link');
  if(olderLink!=null) window.location.href = olderLink.href;
  }
  };
  &lt;/script&gt; 
Estão, apois aplicar esta funcionalidade em seu blog, caso queira poderá avisar aos seus leitores esta função para que tomem conhecimento e passem logo a utiliza-la, qualquer sugestão ou critica a este post, faça um comentário e estarei eternamente grato por sua colaboração..


Continue Lendo==>>
setaretornoaotopo