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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrNJDH1aF8dVZyLXCWN3nmx-sLm__72ZlkGWC9A5FKkxQ6KgI5w5g8QDKy2_8r0O5F7NgRMH_WJT8ge_3I_4IO2vZosCvaQvSLj3MSMUnGD2kg3gIymNHuD97yJZsKuBo_4huX_rP0wHB/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgig1Jd4enTuGAkVe9idJx-bafqhlkRODftL4kP0nehXuNlZASl_0hiNpPLtP4duRfqZ2SwD2Okpfh5ak4OpaEnHoEi6w9lIpUoJ1q3kcL54uxgWleEv7KI89H9yER4IysBACE7SF_GrBNE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZj7taJR_PvOeSO7dxtv7D5XtYqRmVReQBIX8wHzttOoivLJE5Mux47xXUMdiii61wlljuudQHgbTZgkIMh5hZEFiD9m6oI3Gr3_P3_-8_83Kn2LHBXz6PiAp79adXvqn86ko5elDZqwLP/s512/Youtube-Metro.PNG'/></a>
<a href='URL-DE-PERFIL-DO-GOOGLE+' target='_blank' title='Google+'><img alt='Google+' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LmtUlsV0FVjwpTSKQ7rxvaFSwN65SD3VrY3HzZzEtd_VoCzMKWTIcHzw5XjOQjvv_2JUnsZ8r4zbrvgoGKlRMZ9XYhVwR83UvI8nNHsNyZPIO5svXuiyIXPIJVkhOKe6Axz6LEXMMriK/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.