[TUTORIAL] Widget "Redes sociais giratória"

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Widget "Redes sociais giratória"

Mensagem por BrunoH. em 20/07/13, 06:43 pm



Widget "Redes sociais giratória"

Com base neste tutorial, podemos adicionar de redes sociais giratórias em vossos fóruns, através de Widget.


--> Tutoriais, dicas e astúcias <--
Widget "Redes sociais giratória"





- Conhecendo e modificando o código:
<div class="widget-container"><div class="social-profiles-widget"><!-- Place this code where you want the badge to render. -->
<div id=""><style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style><br>
<center><div id="social"><!--Start Rss Icon--><br>
<a href="LINK-RSS" target="_blank" title="Pegue o nosso feed rss"><img src="http://i.imgur.com/9Jac9.png" alt="Icon" border="0" style="margin-right:1px;"></a>
<!--End Rss Icon-->
<!--Start Email Rss Icon-->
<a href="EMAIL-RSS" rel="nofollow" target="_blank" title="Receba atualizações gratuitas por e-mail"><img alt="Icon" border="0" src="http://i.imgur.com/V3f50.png" style="margin-right:1px;"></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon--><a href="LINK-FaceBook" rel="nofollow" target="_blank" title="Curta a nossa página do facebook"><img alt="Icon" border="0" src="http://i.imgur.com/lwGPi.png" style="margin-right:1px;"></a><!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a href="LINK-TWITTER" rel="nofollow" target="_blank" title="Siga-nos no twitter e receba atualizações"><img src="http://i.imgur.com/AlRAT.png" alt="Icon" border="0" style="margin-right:1px;"></a>
<a href="Google+" rel="nofollow" target="_blank" title="Siga-nos no google+"><img src="http://i.imgur.com/kCAHm.png" style="margin-right:1px;"></a><!--End Google+ Icon-->
</div>
</center></div></div></div>
Em negrito -> Você irá colocar os Links de cada rede social que seu fórum pertence, para ao clicar no ícone do Widget ser redimensionado para o Link da rede social.


- 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


SetaNome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
Seta Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
Seta Fonte do widget: - Neste campo, Devemos inserir o código trabalhamos no 3º Passo.
Seta 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:





© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Widget "Redes sociais giratória"
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum