Tutorial: Cómo crear un menú de redes sociales en un solo gadget con CSS

JhonatanTMR · 2013-08-18T02:10:35-0500

Hola a toda la comunidad de ForoBeta

Les mostrare como hacer un menu con css de los fanbox de Facebook, Twitter y Goggle + que se expande al pasar el cursor sobre el, pueden ver el ejemplo aqui Demo.

Esta vez les mostrare una forma de tener los famosos fanbox de Facebook, Twitter y Google + pero lo mejor es que ahorraremos espacio poniendo los 3 en un solo menú expandible, esto lo logre con CSS es mi primer invento en esto ya que apenas estoy aprendiendo a usar este lenguaje ahora vamos a ver como hacerlo. Puedes ver el ejemplo en esta pagina en la sidebar de lado derecho.
Para lograr esto primero necesitaremos incluir las fanbox por separado como se hace de manera habitual, pueden usar los siguientes solo cambiando sus datos.

Facebook

Insertar CODE, HTML o PHP:

<iframe src="//www.facebook.com/plugins/likebox.php?href=URL Facebook&amp;

width=292&amp;height=258&amp;colorscheme=light&amp;

show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" 

scrolling="no" frameborder="0" style="border: none; overflow:hidden; width:100%;

allowtransparency="true"></iframe>

Twitter

Insertar CODE, HTML o PHP:

<a class="twitter-timeline"  href="https://twitter.com/NOMBRE DE USUARIO SIN @"  data-widget-id="365540618463764481">Tweets por @Portal_Tricks</a>

<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>

Copiamos y pegamos cada código en un gadget por separado es decir cada uno en un gadget diferente desde la parte de diseño en blogger, para el fanbox de
Google + lo podemos insertar directamente desde los gadgets de blogger.
Una vez hecho esto los acomodamos donde deseamos aparezca el menú en el orden descendente FACEBOOK, TWITTER, GOOGLE ya que tengamos listo esto se verán las cajas de fanbox pero por separado y nada que ver con la forma de menú, para esto vamos a darle el estilo usando CSS. Para esto nos dirigimos a Plantilla > Personalizar > Avanzado > CSS en blogger ahí pegamos lo siguiente:

Insertar CODE, HTML o PHP:

/* Menu De Fanbox De Redes Sociales PortalTricks */



/* Facebook */



[B]Enlace eliminado[/B]  h2

{

text-align: center;

color: [B]Enlace eliminado[/B] ;

}



[B]Enlace eliminado[/B]  .title

{

padding: 10px;

font-size: 18px;

background: [B]Enlace eliminado[/B] ;

border: 3px solid [B]Enlace eliminado[/B]  !important;

border-radius: 3px 3px 0px 0px;

}



[B]Enlace eliminado[/B]  .widget-content

{

background: [B]Enlace eliminado[/B] ;

border-radius: 0px;

display: none;

margin-top: -18px;

border: 3px solid [B]Enlace eliminado[/B] ;

}

[B]Enlace eliminado[/B]  .title:hover + .widget-content, .widget-content:hover

{

display: block !important;

}





/* Twitter */



[B]Enlace eliminado[/B] 

{

margin-top: -30px;  

}

[B]Enlace eliminado[/B]  h2

{

text-align: center;

color: [B]Enlace eliminado[/B] ;

}



[B]Enlace eliminado[/B]  .title

{

padding: 10px;

font-size: 18px;

background: [B]Enlace eliminado[/B] ;

border: 3px solid [B]Enlace eliminado[/B]  !important;

border-radius: 0px 0px 0px 0px;

}



[B]Enlace eliminado[/B]  .widget-content

{

background: [B]Enlace eliminado[/B] ;

border-radius: 0px;

display: none;

margin-top: -18px;

border: 3px solid [B]Enlace eliminado[/B] ;

}

[B]Enlace eliminado[/B]  .title:hover + .widget-content, .widget-content:hover

{

display: block !important;

}



/* Google + */



[B]Enlace eliminado[/B] 

{

margin-top: -30px;  

}

[B]Enlace eliminado[/B]  h2

{

text-align: center;

color: [B]Enlace eliminado[/B] ;

}



[B]Enlace eliminado[/B]  .title

{

padding: 10px;

font-size: 18px;

background: [B]Enlace eliminado[/B] ;

border: 3px solid [B]Enlace eliminado[/B]  !important;

border-radius: 0px 0px 3px 3px;

}



[B]Enlace eliminado[/B]  .widget-content

{



padding: 1px;

background: [B]Enlace eliminado[/B] ;

border-radius: 0px;

display: none;

margin-top: -20px;

border: 3px solid [B]Enlace eliminado[/B] ;

}

[B]Enlace eliminado[/B]  .title:hover + .widget-content, .widget-content:hover

{

display: block !important;

}



/* FIN Menu De Fanbox De Redes Sociales PortalTricks */

Y cambiamos lo siguiene:
las partes que dicen HTML2 cámbialas por el id del gadget donde pusiste el código del fanbox de Facebook y para saber cual es vamos a diseño nuevamente y ponemos el cursor sobre el enlace Editar del gadget de Facebook y en la barra que aparece en la parte de abajo del navegador podremos verlo. Ejemplo

igualmente sustituimos las partes que dicen HTML5 por el id del gadget de Twitter.
Y así tendremos terminado nuestro Menú de Fanbox de Redes Sociales, espero les sirva y si lo mejoran me avisan para provarlo. Suerte y hasta luego.

Carlos Arreola · 2013-08-20T10:22:34-0500

Tutorial aprobado y agregado al listado, se agradece el aporte.

anferro · 2013-08-20T10:27:54-0500

buen aporte se agradece

YKMedia · 2013-08-23T16:08:34-0500

Muchísimas gracias por tú aporte.

Carambel · 2013-08-25T16:50:05-0500

interesante :topsy_turvy:

Tutorial: Cómo crear un menú de redes sociales en un solo gadget con CSS

JhonatanTMR Seguir

Carlos Arreola

anferro

YKMedia

Carambel