[TUTORIAL] Box de Redes Sociais

Ir para baixo

[TUTORIAL] Box de Redes Sociais Empty [TUTORIAL] Box de Redes Sociais

Mensagem por BrunoH. 20.10.13 20:47


[TUTORIAL] Box de Redes Sociais Ssss10

Box de Redes Sociais

Neste tutorial você irá aprender como instalar um Box de Redes Sociais no fórum. Em dois modelos diferentes, um instalado em Widget e o outro em JavaScript. A publicação das Redes sociais do fórum será mais visível, e de uma forma elegante.


--> Tutoriais, dicas e astúcias <--
Box de Redes Sociais



- Conhecendo e modificando o código:
Código:
<style> img,a{border:0} #on{visibility:visible} #off{visibility:hidden} #facebook_div{width:196px;height:340px;overflow:hidden} #twitter_div{width:246px;height:353px;overflow:hidden} #google_plus_div{width:152px;height:97px;overflow:hidden;margin-top:10px;margin-left:-5px} #knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px} #kakinetwork_div{width:300px;height:97px;overflow:hidden} #facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px} #facebook_right img{position:absolute;top:-2px;left:-35px} #facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px} #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px} #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0} #google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px} #feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px} #kakinetwork_right img{position:absolute;top:-2px;left:-101px} #facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px} #facebook_left img{position:absolute;top:-2px;right:-35px} #facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px} #twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px} #twitter_left_img{position:absolute;top:-2px;right:-35px;border:0} #google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px} #feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px} #kakinetwork_left img{position:absolute;top:-2px;right:-101px} .box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #CCC;-moz-box-shadow:5px 5px 5px #CCC;box-shadow:5px 5px 5px #CCC;margin:10px 0;padding:10px} .enteryouremail{background:#fff!important;border:1px solid #d2d2d2;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0;padding:0 8px} .submitbutton{background:#F2F2F2;border:1px solid #F66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000;height:25px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;margin:0 0 0 5px;padding:0 12px} #google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0} #kakinetwork_right,#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed} #google_plus_left_img,#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}; </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -154 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -303 }, 500); }); });</script> <div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div">
<img src="http://i.imgur.com/x0CZ66o.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FPAGINAFACEBOOK&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> </div>
</div>
</div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div">
<img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: "profile", rpp: 4, interval: 1000, width: 246, height: 265, theme: { shell: { background: "#63BEFD", color: "#FFFFFF" }, tweets: { background: "#FFFFFF", color: "#000000", links: "#47a61e"} }, features: { loop: false, live: true, scrollbar: false, hashtags: false, timestamp: true, avatars: true, behavior: "all"} }).render().setUser("twitter-pagina").start(); </script> </div>
</div>
</div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div">
<img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png"/> <div style="float:left;margin:10px 10px 10px 0;">
<script type="text/javascript"> window.___gcfg = {lang: "en"}; (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script> <div class="g-plus" data-href="GOOGLE+" data-width="180" data-height="69" data-theme="light">
</div>
</div>
</div>
</div>
</div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">
Receba as novidades por e-mail:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forumeirospt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="Digite seu e-mail aqui..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail aqui...';}" onfocus="if (this.value == 'Digite seu e-mail aqui...') {this.value = '';}" type="text" /><input value="novidades-assinar" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png"/> </div>
</div>
</div>
PAGINAFACEBOOK -> Troque pelo Facebook desejado, utilize o nome dado no link da página.
GOOGLE+ -> Troque pelo desejado.
twitter-pagina -> Troque pelo twitter desejado.
novidades-assinar -> Para trocar o feed.


- 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] Box de Redes Sociais Criar10
[TUTORIAL] Box de Redes Sociais Wf310

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




© Fórum dos Fóruns


[TUTORIAL] Box de Redes Sociais Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Box de Redes Sociais
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

Ir para o topo

- Tópicos semelhantes

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