Seguidores de Facebook y Twitter en el lateral de tu Blog.

 

 



Seguidores de Facebook y Twitter en el lateral de tu Blog


Voy a mostrar como colocar los Seguidores de Twitter, Google+ y el Fanbox de facebook en el lateral del Blog.
Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget de los seguidores. (el de Facebook solo funciona con páginas, no perfíl).

 

Para instalarlo en vuestros Blogs hay que seguir estos pasos:
1.- Ingresa en musicpaax.com/twitter, "generar código", autoriza a la aplicación y rellena el campo colocando tu nombre de usuario.

2.--Ir a Diseño-Añadir un gadget-Html/Javascript-Y en su interior colocamos lo siguiente:

<style>#face1{
position:fixed;
top:50px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#google2 {
position:fixed;
top:210px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#twitter3 {
position:fixed;
top:370px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#face1:hover, #google2:hover, #twitter3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}</style>

<div id='face1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DM36ceO0NAoChQDWFrNdf5O-5_8X6wRkYE_h25En7Up3qaqKXcoFC-VL4DrNNmWiy-xP-7Q4vQsg55Fvi0OuQ0Fknivk5NPTvxJzt_w55cgReGJ2v-G139_Aw53yqF4ZCuHTVtDIDQLc/s1600/facebook.png' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/amorsevillista&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<div id='google2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQMgdVbwwD1rySjoxuaCKPKjgFiT0MBvk0mknMuZPoGL_nJNtemHW0hKp-OgdM94nCXyaOA-ELN9ETu3hp9kJ6bAYIbRK9CLSjROBjZdNV4ESZKKVqP25FuOxg1vvQMz8gJxeF7SY9sSY/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108543428426862782326" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
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>
</span></div>
</div>
<div id='twitter3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBADREc2L_vvMCUSUXSXtTR2AwuZTXxuZ3gedMiTMk05T_QMCuZYdkzaZAUhvIFfmUcUQdlgtbXDCH0iajNm2Ij3kxU85rP7fEo9k-s4-ZCn76rXDZItCtB0zUqZ-4yyjRhGnS1CGbebgr/s1600/twitter.png' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<div class="twitter">
<iframe src="http://50.63.179.86/twitter/twitter.html?user=amorsevillista&no=17&h=325&t=light& scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:325px;" allowtransparency="true"></iframe>
</div>
<div id="twitter-box"></div>
</div></span></div></div>

Publicar un comentario

0 Comentarios