Como conseguir esse efeito das redes sociais?
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Como conseguir esse efeito das redes sociais?
- Descrição:
Olá senhores!
Gostaria de saber como consigo essas redes sociais na aba lateral?
Vi o efeito nesse fórum: http://obloggueiro.forumaqui.com/
- Informações:
Fórum: | http://vidadeaquarista.forumeiros.com/ | Versão: | PHPBB3 |
Tipo: | Pedido de código | Tags: | conseguir,efeito,redes,sociais? |
Última edição por uatyla em 19.08.14 22:02, editado 1 vez(es)
Re: Como conseguir esse efeito das redes sociais?
Olá!
O código é exatamente este:
Hancki
O código é exatamente este:
- Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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>
<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>
<div id="on">
<div id="facebook_right" style="top: 18%; right: -200px;">
<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/obloggueiro&width=200&height=260&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>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%; right: -250px;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://i.imgur.com/ARUZdjU.png"> <iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" style="border: none; max-width: 100%; min-width: 180px; width: 246px;" title="Histórico do Twitter" height="500"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%; right: -154px;">
<div id="google_plus_div">
</div>
<div>
<img id="google_plus_right_img" src="http://i.imgur.com/KLwc5ks.png">
<div style="float:left;margin:10px 10px 10px 0;">
</div>
<div>
<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 id="___plus_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 180px; height: 85px; background: transparent;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 180px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 85px;" tabindex="0" vspace="0" width="100%" id="I1_1407523337076" name="I1_1407523337076" src="https://apis.google.com/u/0/_/widget/render/badge?usegapi=1&width=180&height=69&theme=light&origin=http%3A%2F%2Fobloggueiro.forumaqui.com&url=https%3A%2F%2Fplus.google.com%2F%2BObloggueiroPt%2Fposts&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.hm-G9M0tasI.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAItRSTNefKIDWg39vyoHCxNWFA-3x2iOgg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I1_1407523337076&parent=http%3A%2F%2Fobloggueiro.forumaqui.com&pfname=&rpctoken=31892307" data-gapiattached="true" title="+Badge"></iframe></div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style="top: 69%; right: -303px;">
<div id="knfeedburner_div">
</div>
<div>
<center>
</center>
</div>
<div>
<h4 style="color:#F66303;">
</h4>
</div>
<div>
Receba as novidades por e-mail:
</div>
<div>
<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">
</form>
</div>
<div>
<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="http://feeds.feedburner.com/OBloggueiro" name="uri" type="hidden"><input value="Assinar" class="submitbutton" type="submit">
</div>
<div>
</div>
<div>
<img id="feedburner_right_img" src="http://i.imgur.com/LqBiTdB.png">
</div>
</div>
<div>
</div>
</div>
Hancki
Re: Como conseguir esse efeito das redes sociais?
Não deu certo como HTML não.
Olha eu tenho um com Facebook, porem não consigo com os outros pois são em posições diferentes, e também não teria tanto espaço com widget.
JS.
widget
@edite: Fiz um teste no fórum de teste no widget, creio eu que funcione igual o que postei acima, confira: http://unidosemcristo.forumeiros.com/
Olha eu tenho um com Facebook, porem não consigo com os outros pois são em posições diferentes, e também não teria tanto espaço com widget.
JS.
- Código:
jQuery(document).ready(function($) {
$("#FBSlideLikeBox_right").mouseenter(function() {
$(this).stop().animate({right: 0}, "normal");
}).mouseleave(function() {
$(this).stop().animate({right: -300}, "normal");
});;
});
widget
- Código:
<style type="text/css">
#FBSlideLikeBox_left {background: url(http://upic.me/i/zw/or2fb.png) 292px 0 no-repeat; float: left; height: 168px; position: fixed; left: -292px; padding-right: 56px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 400px; right: 0; position: absolute; border: 1px solid #3B5998; width: 292px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png) 0 0 no-repeat; float: right; height: 168px; position: fixed; right: -300px; padding-left: 48px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 600px; left: 0; position: absolute; border: 1px solid #3B5998; width: 300px; background: #f8f8f8;}
#FBSlideLikeBox_right #FBSlideLikeBox2_right {position: relative; clear: both; width: auto;}
</style> <script type="text/javascript">
jQuery(document).ready(function($) {
$("#FBSlideLikeBox_right").mouseenter(function() {
$(this).stop().animate({right: 0}, "normal");
}).mouseleave(function() {
$(this).stop().animate({right: -300}, "normal");
});;
});
</script>
<div title="Vida de Aquarista" id="FBSlideLikeBox_right" style="right: -300px;">
<div id="FBSlideLikeBox2_right">
<div id="FBSlideLikeBox3_right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMinhaVidadeAquarista&width=292&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" style="border:none; overflow:hidden; width:292px; height:590px;" allowtransparency="true" frameborder="0"></iframe>
<!-- Iframe -->
</div>
</div>
</div>
@edite: Fiz um teste no fórum de teste no widget, creio eu que funcione igual o que postei acima, confira: http://unidosemcristo.forumeiros.com/
Re: Como conseguir esse efeito das redes sociais?
@edite:
Não to conseguindo edita o código para quando ele abri fica na largura de 300, os senhores poderia ajuda?
Re: Como conseguir esse efeito das redes sociais?
Tipo quando ele abre abre uma janela certo? Essa janela quero que fique 300px.
Re: Como conseguir esse efeito das redes sociais?
Bom dia!
Você já tentou seguir as informações deste tutorial?
https://ajuda.forumeiros.com/t85989-tutorial-box-de-redes-sociais
Até mais!
Você já tentou seguir as informações deste tutorial?
https://ajuda.forumeiros.com/t85989-tutorial-box-de-redes-sociais
Até mais!
Re: Como conseguir esse efeito das redes sociais?
Onde altero nesse 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" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true" frameborder="0"> </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>
Re: Como conseguir esse efeito das redes sociais?
Procure por esta linha no código: (logo no inicio do código todo)
Hancki
- Código:
#facebook_div{width:196px;height:340px;overflow:hidden}
Hancki
Re: Como conseguir esse efeito das redes sociais?
Fiz a alteração e não obtive o resultado, porem procurei o outro "width:196px" e alterai para 302 só que ele ficou uma parte para fora.
confira como ficou no fórum de teste: http://unidosemcristo.forumeiros.com/
confira como ficou no fórum de teste: http://unidosemcristo.forumeiros.com/
Re: Como conseguir esse efeito das redes sociais?
Coloque como estava antes (o normal), assim executo os testes direto!
Re: Como conseguir esse efeito das redes sociais?
Pronto no fórum de teste está normal.
http://unidosemcristo.forumeiros.com/
http://unidosemcristo.forumeiros.com/
Re: Como conseguir esse efeito das redes sociais?
Bom dia!
Troque o script do seu código por este:
Troque o script do seu código por este:
- Código:
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery("#FBSlideLikeBox_right").mouseenter(function() {
jQuery(this).stop().animate({right: 100}, "normal");
}).mouseleave(function() {
jQuery(this).stop().animate({right: -300}, "normal");
});;
});
</script>
Re: Como conseguir esse efeito das redes sociais?
Não mudou nada, e o engraçado que o do Twitter é maior.
Re: Como conseguir esse efeito das redes sociais?
Olá!
Você poderia me informar novamente o que deseja de fato? E para qual fórum quer suporte? O script não está aplicado no fórum que está na primeira mensagem.
Você poderia me informar novamente o que deseja de fato? E para qual fórum quer suporte? O script não está aplicado no fórum que está na primeira mensagem.
Re: Como conseguir esse efeito das redes sociais?
Substitua por este novo código:
Eu ainda coloquei em porcentagem pra ficar fácil você encontrar a largura do IFRAME. É só pressionar o Ctrl + F e procurar por:
- Código:
<style type="text/css">
#FBSlideLikeBox_left {background: url(http://upic.me/i/zw/or2fb.png) 292px 0 no-repeat; float: left; height: 168px; position: fixed; left: -292px; padding-right: 56px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 400px; right: 0; position: absolute; border: 1px solid #3B5998; width: 292px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png) 0 0 no-repeat; float: right; height: 168px; position: fixed; right: -300px; padding-left: 48px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 600px; left: 0; position: absolute; border: 1px solid #3B5998; width: 300px; background: #f8f8f8;}
#FBSlideLikeBox_right #FBSlideLikeBox2_right {position: relative; clear: both; width: auto;}
</style> <script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery("#FBSlideLikeBox_right").mouseenter(function() {
jQuery(this).stop().animate({right: 200}, "normal");
}).mouseleave(function() {
jQuery(this).stop().animate({right: -300}, "normal");
});;
});
</script>
<div title="Vida de Aquarista" id="FBSlideLikeBox_right" style="right: -300px;">
<div id="FBSlideLikeBox2_right">
<div id="FBSlideLikeBox3_right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMinhaVidadeAquarista&width=292&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" style="border:none; overflow:hidden; width: 160%; height:590px;" allowtransparency="true" frameborder="0"></iframe>
<!-- Iframe -->
</div>
</div>
</div>
Eu ainda coloquei em porcentagem pra ficar fácil você encontrar a largura do IFRAME. É só pressionar o Ctrl + F e procurar por:
- Código:
width: 160%;
Re: Como conseguir esse efeito das redes sociais?
Shek acho que o senhor não entendeu muito bem o que desejo. O senhor Hancki está mi ajudando nesse código.
O fórum que desejo suporte é esse http://vidadeaquarista.forumeiros.com/ como notará já tenho o do Facebook, que funciona perfeitamente, porem quando substitui para o código acima a janela do Facebook diminui, como estamos tentando uma formula de da certo estou efetunado o teste no fórum de teste http://unidosemcristo.forumeiros.com/
- 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>
O fórum que desejo suporte é esse http://vidadeaquarista.forumeiros.com/ como notará já tenho o do Facebook, que funciona perfeitamente, porem quando substitui para o código acima a janela do Facebook diminui, como estamos tentando uma formula de da certo estou efetunado o teste no fórum de teste http://unidosemcristo.forumeiros.com/
Re: Como conseguir esse efeito das redes sociais?
Sim, eu já tinha entendido querido, mas o negócio é que o código não me apresenta o problema que você já reportou antes. Então, o código que estão a corrigir já está aplicado no fórum da mensagem principal, é isso?
Re: Como conseguir esse efeito das redes sociais?
Não meu querido amigo, o código não tem problema, só desejo aumenta o tamanho da janela do Facebook.
Re: Como conseguir esse efeito das redes sociais?
Aumentar em altura ou largura? Se for em largura, eu já fiz isso com o Javascript que lhe passei acima.
Re: Como conseguir esse efeito das redes sociais?
Vamos lá esclarecendo melhor suas dúvidas!
eu uso esse código e funciona perfeitamente em meu fórum.
código Js
Código widget
o código que gostei e que desejo implementa em meu fórum, porém quero aumenta a largura para 302px, o mesmo que uso no código acima e que funciona perfeitamente.
eu uso esse código e funciona perfeitamente em meu fórum.
código Js
- Código:
jQuery(document).ready(function($) {
$("#FBSlideLikeBox_right").mouseenter(function() {
$(this).stop().animate({right: 0}, "normal");
}).mouseleave(function() {
$(this).stop().animate({right: -300}, "normal");
});;
});
Código widget
- Código:
<style type="text/css">
#FBSlideLikeBox_left {background: url(http://upic.me/i/zw/or2fb.png) 292px 0 no-repeat; float: left; height: 168px; position: fixed; left: -292px; padding-right: 56px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 400px; right: 0; position: absolute; border: 1px solid #3B5998; width: 292px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png) 0 0 no-repeat; float: right; height: 168px; position: fixed; right: -300px; padding-left: 48px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 600px; left: 0; position: absolute; border: 1px solid #3B5998; width: 300px; background: #f8f8f8;}
#FBSlideLikeBox_right #FBSlideLikeBox2_right {position: relative; clear: both; width: auto;}
</style> <script type="text/javascript">
jQuery(document).ready(function($) {
$("#FBSlideLikeBox_right").mouseenter(function() {
$(this).stop().animate({right: 0}, "normal");
}).mouseleave(function() {
$(this).stop().animate({right: -300}, "normal");
});;
});
</script>
<div title="Vida de Aquarista" id="FBSlideLikeBox_right" style="right: -300px;">
<div id="FBSlideLikeBox2_right">
<div id="FBSlideLikeBox3_right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMinhaVidadeAquarista&width=292&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" style="border:none; overflow:hidden; width:292px; height:590px;" allowtransparency="true" frameborder="0"></iframe>
<!-- Iframe -->
</div>
</div>
</div>
o código que gostei e que desejo implementa em meu fórum, porém quero aumenta a largura para 302px, o mesmo que uso no código acima e que funciona perfeitamente.
- 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>
Re: Como conseguir esse efeito das redes sociais?
Sim, eu já tinha entendido antes que o que você quer é "aumentar a largura da caixa" do facebook, certo? Aumentar para o lado esquerdo? Se for isso, o script que eu lhe dei faz isso. O negócio é que, se você está usando ambos os códigos que mostrou acima, não vai funcionar mesmo. Você tem o script:
Se você substituir todos os seus códigos por este:
Não é isso? Aumentar a largura?
- Código:
jQuery(document).ready(function($) {
$("#FBSlideLikeBox_right").mouseenter(function() {
$(this).stop().animate({right: 0}, "normal");
}).mouseleave(function() {
$(this).stop().animate({right: -300}, "normal");
});;
});
Se você substituir todos os seus códigos por este:
- Código:
<style type="text/css">
#FBSlideLikeBox_left {background: url(http://upic.me/i/zw/or2fb.png) 292px 0 no-repeat; float: left; height: 168px; position: fixed; left: -292px; padding-right: 56px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 400px; right: 0; position: absolute; border: 1px solid #3B5998; width: 292px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png) 0 0 no-repeat; float: right; height: 168px; position: fixed; right: -300px; padding-left: 48px; top: 20%; width: 292px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 600px; left: 0; position: absolute; border: 1px solid #3B5998; width: 300px; background: #f8f8f8;}
#FBSlideLikeBox_right #FBSlideLikeBox2_right {position: relative; clear: both; width: auto;}
</style> <script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery("#FBSlideLikeBox_right").mouseenter(function() {
jQuery(this).stop().animate({right: 200}, "normal");
}).mouseleave(function() {
jQuery(this).stop().animate({right: -300}, "normal");
});;
});
</script>
<div title="Vida de Aquarista" id="FBSlideLikeBox_right" style="right: -300px;">
<div id="FBSlideLikeBox2_right">
<div id="FBSlideLikeBox3_right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMinhaVidadeAquarista&width=292&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" style="border:none; overflow:hidden; width: 160%; height:590px;" allowtransparency="true" frameborder="0"></iframe>
<!-- Iframe -->
</div>
</div>
</div>
Não é isso? Aumentar a largura?
Re: Como conseguir esse efeito das redes sociais?
Isso mais aumenta a caixa desse código, esse acima vou desativa-lo, assim que o código abaixo tiver do jeito que desejo.
Resultado: http://unidosemcristo.forumeiros.com/
- 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>
Resultado: http://unidosemcristo.forumeiros.com/
Re: Como conseguir esse efeito das redes sociais?
UP!
@edite como eu já conseguir o efeito vou da esse tópico como resolvido.
@edite como eu já conseguir o efeito vou da esse tópico como resolvido.
Tópicos semelhantes
» Efeito hover de redes sociais
» Efeito houver nas redes sociais - igual a este :
» Box de Redes Sociais
» Redes Sociais
» Box de redes sociais
» Efeito houver nas redes sociais - igual a este :
» Box de Redes Sociais
» Redes Sociais
» Box de redes sociais
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos