Veja demonstração
Antes de mais nada abrir o word ou qualquer outro software de edição de texto, colar o código abaixo.
<style>
img,a{border:0;}
#on{visibility:visible;}
#off{visibility:hidden;}
#facebook_div{width:196px;height:340px;overflow:hidden;}
#twitter_div{width:240px;height:327px;overflow:hidden;}
#google_plus_div{width:271px;height:303px;overflow:hidden;margin-top:10px;margin-left:2px;}
#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:-33px;border-radius:none; /*imagem face,,,,,,,,,,,,,,,, -33*/}
#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:240px;height:327px;position:fixed;right:-244px}
#twitter_right_img{position:absolute;top:-2px;left:-33px;border:0;border-radius:none; /*imagem Twitter,,,,,,,,,,,,,,,,,-33*/}
#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid #9e0202;border-top:2px solid #9e0202;border-bottom:2px solid #9e0202;border-right:2px solid #9e0202;border-left:2px solid #9e0202;width:271px;height:303px;position:fixed;right:-275px;}
#feedburner_right{z-index:10002;background-color:#fefefe;border:2px solid #f98d01;border-top:2px solid #f98d01;border-bottom:2px solid #f98d01;border-right:2px solid #f98d01;border-left:2px solid #f98d01;width:300px;height:97px;position:fixed;right:-304px}
#kakinetwork_right img{position:absolute;top:-2px;left:-101px}
#google_plus_right_img,#feedburner_right_img{position:absolute;top:-2px;left:-32px;border-radius:none;border:0; /*imagem Google Plus e feedburner,,,,,,,,,,,,,,,, -32*/}
#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:-23px;border-radius:none;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:261px;height:303px;position:fixed;left:-261px}
#feedburner_left{z-index:10002;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 !imoportant;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}
#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:-275px;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: -244 }, 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: -275 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -304 }, 500); }); });</script>
<div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div">
<img src="http://lh3.googleusercontent.com/-I44nDTfSPyo/Ul1vDPqVB4I/AAAAAAAAJaw/5YFaYhEFb70/s101/facebook.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCOLOQUE A ID DE SUA PAGINA&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://lh4.googleusercontent.com/-x-u5pxf89SE/Ul1vGP32IeI/AAAAAAAAJa4/G0khEdGLpoU/s101/twitter.png"/>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
COLOQUE O CÓDIGO GERADO PELO MUSICPAAX</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://lh3.googleusercontent.com/-bQLss3ZYsec/Ul1xPVqEchI/AAAAAAAAJbI/25xCrxYVY6s/s101/goo_tab.png"/>
<div style="float:left;margin:10px 10px 10px 0;">
<div class="g-plus" data-action="followers" data-height="303" data-source="blogger:blog:followers" data-href="https://plus.google.com/COLOQUE A ID DO SEU PERFIL DO GOOGLE+/" data-width="265"> </div>
<script type='text/javascript'>
(function() {
window.___gcfg = {'lang': 'pt-br'};
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> </div> </div>
<div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div">
<center>
<span style="color:#F66303;size:15px;">Receba as novidades por e-mail:</span>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=COLOQUE A ID DO SEU FEEDBURNER', '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="NOME PARA SEU FEEDBURNER" name="uri" type="hidden" /><input value="Assinar" class="submitbutton" type="submit" />
</form>
</center>
<img id="feedburner_right_img" src="http://lh6.googleusercontent.com/-S-cvSMDvZik/Ul16JZOHppI/AAAAAAAAJbY/HRrSGqJpCX4/s101/Novidades.png"/>
</div> </div> </div>
</div>
Após copiar e colar o código acima em um editor de texto prestar atenção nos seguintes campo para edição.
1. COLOQUE A ID DE SUA PAGINA; Encontrar essa frase e substituir por sua id de sua página, para isso você precisa ir até a sua página no Facebook e copiar a parte final do link.
No caso aqui do blog ficou a parte em negrito no link abaixo.
https://www.facebook.com/pages/Tec-INfo-Download/1406195022928241
Se não tiver número como no meu caso, usar o que está após https://www.facebook.com/pages/
2. COLOQUE O CÓDIGO GERADO PELO MUSICPAA; Essa é a edição para o Twitter, para você descobrir esse código você precisa ir até o site www.twitter-fanbox.com. Ao gerar a Fan Box do Twitter, tomar alguns cuidados nas medidas, para que se encaixe perfeitamente no widget.
Altura = 325 px
Largura = 238 px
Rostos = 12
3. COLOQUE A ID DO SEU PERFIL DO GOOGLE+; Substituir pela ID do seu perfil do Google +, para isso você precisa ir até a sua conta no Google mais e copiar a parte final do link.
No caso aqui do blog ficou a parte em negrito no link abaixo.
https://plus.google.com/+LuzardoPerescomosefez
4. COLOQUE A ID DO SEU FEEDBURNER; Substituir por sua ID do FeedBurner, para isso você precisa ir até a sua conta no no FeedBurner e copiar a parte final do link.
No caso aqui do blog ficou a parte em negrito no link abaixo.
http://feeds.feedburner.com/comosefez/beZN
Muito cuidado na hora de editar o código para que não apague nada além do que os itens 1, 2, 3, 4. Após a correta edição copiar todo o código e ir até seu blog e criar um gadget de HTML / JavaScript.
Feito isso salve e atualize seu blog e já estará em funcionamento o Gadget expansível na lateral do seu blog.
Espero que tenham gostado, qualquer dúvida deixe seu comentário no final do post, obrigado.
0 comentários:
Postar um comentário