Oi pessoal. Um pouco de tempo sem postar, pois estou um pouco ocupado atualizando alguns artigos e preparando uma video-aula nova, mas vamos com este tutorial um pouco simples. Me pediram por comentarios, para criar um artigo que ensinasse como adicionar icones de redes sociais abaixo da caixa de busca que esta localizada o cabecalho (como voce pode observar aqui no blog).E um processo bem simples que voce vera a seguir.1. Voce ja deve ter a caixa de busca instalada em seu blog, caos nao saiba como fazer isso, veja este tutorial publicado aqui no blog.2. Depois de feita a instalacao e a divisao dos cabecalhos, acesse a guia Modelo e clique no botao 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 codigo completo e este o codigo completo da caixa de busca.<b:widget id='CustomSearch1' locked='false' title='Seu titulo' 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 codigo e adicionado os iconesO codigo da caixa de busca e composto por codigo HTML e o codigo CSS. Esses codigos estao separados pela linha <!-- override gsearch.css -->. Voce vai colar antes desta linha, o seguinte codigo:<div class='sidebar-social-gadget' oncontextmenu='return false' ondragstart='return false'><a href='http://twitter.com/NOME-DE-USUARIO' 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/-USUARIO-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. Voce pode alterar os icones pelo de sua preferencia, eles estao destacados de azul.Seu codigo geral devera ficar assim:Clique na imagem para ampliarAgora procuremos por ]]></b:skin> e acima dela adicionemos o seguinte codigo. Este codigo sera responsavel por dar estilo aos icones. 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 devera esta funcionado perfeitamente. Caso nao esteja, deixe suas duvidas e problemas nos comentario abaixo. Espero ter ajudado e ate a proxima. Hoje (07/03), o Facebook anunciou o novo design do Feed de noticias. Mark Zuckerberg, CEO do Facebook, citou os pontos importantes: feed baseado em varios assuntos e design consistente em desktops, smartphones e tablets. O