Adicionado ícones abaixo da caixa de busca do cabeçalho

Compartilhar:
Oi pessoal. Um pouco de tempo sem postar, pois estou um pouco ocupado atualizando alguns artigos e preparando uma vídeo-aula nova, mas vamos com este tutorial um pouco simples. Me pediram por comentários, para criar um artigo que ensinasse como adicionar ícones de redes sociais abaixo da caixa de busca que está localizada o cabeçalho (como você pode observar aqui no blog).

É um processo bem simples que você verá a seguir.

1. Você já deve ter a caixa de busca instalada em seu blog, caos não saiba como fazer isso, veja este tutorial publicado aqui no blog.

2. Depois de feita a instalação e a divisão dos cabeçalhos, acesse a guia Modelo e clique no botão Editar HTML. Marque a caixa Expandir modelos de widgets e pressione Ctrl+F e localize a seguinte linha do seu HTML.

<b:widget id='CustomSearch1'

3. Por geral, o código completo é este o código completo da caixa de busca.


<b:widget id='CustomSearch1' locked='false' title='Seu título' type='CustomSearch'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <span class='cse-status'><data:loadingMsg/></span>
      </div>
    </div>
    <!-- override gsearch.css -->
    <style type='text/css'>
      #uds-searchControl .gs-result .gs-title,
      #uds-searchControl .gs-result .gs-title *,
      #uds-searchControl .gsc-results .gsc-trailing-more-results,
      #uds-searchControl .gsc-results .gsc-trailing-more-results * {
        color:<data:linkColor/>;
      }
      #uds-searchControl .gs-result .gs-title a:visited,
      #uds-searchControl .gs-result .gs-title a:visited * {
        color:<data:visitedLinkColor/>;
      }
      #uds-searchControl .gs-relativePublishedDate,
      #uds-searchControl .gs-publishedDate {
        color: <data:dateColor/>;
      }
      #uds-searchControl .gs-result a.gs-visibleUrl,
      #uds-searchControl .gs-result .gs-visibleUrl {
        color: <data:urlColor/>;
      }
      #uds-searchControl .gsc-results {
        border-color: <data:borderColor/>;
        background-color: <data:backgroundColor/>;
      }
      #uds-searchControl .gsc-tabhActive {
        border-color: <data:borderColor/>;
        border-top-color: <data:activeBorderColor/>;
        background-color: <data:backgroundColor/>;
        color: <data:textColor/>;
      }
      #uds-searchControl .gsc-tabhInactive {
        border-color: <data:borderColor/>;
        background-color: transparent;
        color: <data:linkColor/>;
      }
      #uds-searchClearResults {
        border-color: <data:borderColor/>;
      }
      #uds-searchClearResults:hover {
        border-color: <data:activeBorderColor/>;
      }
      #uds-searchControl .gsc-cursor-page {
        color: <data:linkColor/>;
      }
      #uds-searchControl .gsc-cursor-current-page {
        color: <data:textColor/>;
      }
    </style>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

Analisando o código e adicionado os ícones

O código da caixa de busca é composto por código HTML e o código CSS. Esses códigos estão separados pela linha <!-- override gsearch.css -->. Você vai colar antes desta linha, o seguinte código:

<div class='sidebar-social-gadget' oncontextmenu='return false' ondragstart='return false'><a href='http://twitter.com/NOME-DE-USUÁRIO' target='_blank' title='Siga no Twitter'><img alt='Twitter' border='0' src='https://lh6.googleusercontent.com/-6YcFWEyGRco/UCvKSQiF2OI/AAAAAAAAELo/PZKRirRzNUw/s512/Twitter-Bird-Metro.PNG'/></a> <a href='http://www.facebook.com/LINK-FACEBOOK' target='_blank' title='Curta no Facebook'><img alt='Facebook' border='0' src='https://lh4.googleusercontent.com/-V4e3N5_kyaw/UCvKRTTnLWI/AAAAAAAAELQ/gS_KS7YmG9M/s512/Facebook-F-Metro.PNG'/></a> <a href='http://www.youtube.com/user/-USUÁRIO-DO-YOUTUBE' target='_blank' title='Inscreva-se no YouTube'><img alt='YouTube' border='0' src='https://lh5.googleusercontent.com/-BPRt6QiPX5U/UCvKSkxDUqI/AAAAAAAAEL0/PPaqePANW_k/s512/Youtube-Metro.PNG'/></a>
<a href='URL-DE-PERFIL-DO-GOOGLE+' target='_blank' title='Google+'><img alt='Google+' border='0' src='https://lh6.googleusercontent.com/-hJNJcJP1M2I/UCvKRiPgcKI/AAAAAAAAELU/ALH6H98TKQw/s512/Google%252B-Metro.PNG'/></a></div> </div> 

Modifique todas as partes destacadas de vermelho pelos seus respectivos destinos. Você pode alterar os ícones pelo de sua preferência, eles estão destacados de azul.
Seu código geral deverá ficar assim:
Clique na imagem para ampliar
Agora procuremos por ]]></b:skin> e acima dela adicionemos o seguinte código. Este código será responsável por dar estilo aos ícones. Personalize como desejar.

/* ----- Redes Socias ----- */
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {width: 40px;height:40px;opacity:1;-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-ms-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;}
div.sidebar-social-gadget img:hover {width: 40px;height:40px;opacity:0.8;-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-ms-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;}

Pronto. Provavelmente deverá está funcionado perfeitamente. Caso não esteja, deixe suas dúvidas e problemas nos comentário abaixo. Espero ter ajudado e até a próxima.
► Postagens Relacionadas:

3 Comentários

Leo Kchorrão disse...

parceiro o codigo
ñ aparece no meu blog tem algum outro q eu posso procurar para achar o lugar certo pra colocar esse codigo? vlw abraço... ~~

26 de fevereiro de 2013 02:24
João Almeida disse...

Então busque por: dentro do código.

27 de fevereiro de 2013 12:29
Bruno Bezerra disse...

Valeu pela dica João!, Nos templates já feitos, exitem as caixas de pesquisa totalmente personalizadas, mas para o modelo ''Simple'' do blogger, como o nome já diz ''Simples'', não temos tantas opções para editar. Segui as suas dicas e deu certo!, Valeu!.

15 de janeiro de 2014 19:21

Postar um comentário