[TUTORIAL] Redes Sociais + Caixa de Busca

[Admin]

Redes Sociais + Caixa de Busca

--> Tutoriais, dicas e astúcias <--
Redes Sociais + Caixa de Busca

1º - Modificando o Código:

Código:

<style>
#search {
border: 1px solid
#DDD;
background:
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style><div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Busca";}" onfocus="if (this.value == "Busca") {this.value = "";}" type="text" value="[b]Busca[/b]" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="Assine rss feed" src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png" /><a href="http://feeds.feedburner.com/[b]NOME DO FEED[/b]" target="_blank">Subscreva via RSS Feed</a>
</div>
                       <div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="Seguir no Twitter" src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title="Seguir no Twitter" /><a href="http://twitter.com/[b]USUÁRIO DO TWITTER[/b] target="_blank">Siga-nos no Twitter</a>
</div><div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="Torne-se um fã" src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png' title="Torne-se um fã" /><a href="[b]URL DA FANPAGE FACEBOOK[/b]" target="_blank">Siga-nos no Facebook</a>
</div><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="http://4.bp.blogspot.com/-oq9HRonnmDk/T2jQsYl_PRI/AAAAAAAABOI/9OB4NGbN0y8/s1600/g-plus-logo.png" /><a href="[b]URL DO GOOGLE+[/b]" target="_blank">Siga-nos no Google+</a>
</div>

Busca - Será o que vai aparecer dentro da caixa de busca personalizada.
NOME DO FEED - Troque pelo endereço do Feed do fórum.
USUÁRIO DO TWITTER - Link do usuário do Twitter.
URL DA FANPAGE FACEBOOK - Link da página no Facebook.
URL DO GOOGLE+ - Link do perfil do Google+.

2º - Aplicação do código no Widget::

Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado

1º - Nome do widget: - À sua escolha.
2º - Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
3º - Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
4º - Fonte do widget: - Neste campo, Devemos inserir o código trabalhamos no 1º Passo.
5º - Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Feito isso, basta que o Widget seja arrastado para uma coluna no módulo correspondente para que o efeito seja aplicado.

• Resultado
  
  

---

© Community

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:[Dúvida] Redes Sociais + Caixa de Busca