[TUTORIAL] Widget "Redes sociais giratória"

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

[TUTORIAL] Widget "Redes sociais giratória" Empty [TUTORIAL] Widget "Redes sociais giratória"

Mensagem por BrunoH. 20.07.13 22:43


[TUTORIAL] Widget "Redes sociais giratória" Alerte10

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="https://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="https://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="https://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="https://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="https://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
[TUTORIAL] Widget "Redes sociais giratória" Criar10
[TUTORIAL] Widget "Redes sociais giratória" Wf310

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


[TUTORIAL] Widget "Redes sociais giratória" RoIem



©️ Fórum dos Fóruns


[TUTORIAL] Widget "Redes sociais giratória" Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Widget "Redes sociais giratória"
BrunoH.

BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste sub-fórum
Não podes responder a tópicos