Tutorial: Menú de Fanbox de Facebook, Twitter, y Google + con CSS

JhonatanTMR

Curioso
Verificación en dos pasos desactivada
Desde
14 Ago 2013
Mensajes
7
Hola a toda la comunidad de ForoBeta :D
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 */



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML2]#HTML2[/URL]  h2

{

text-align: center;

color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML2]#HTML2[/URL]  .title

{

padding: 10px;

font-size: 18px;

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=3B5998]#3B5998[/URL] ;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=3B5998]#3B5998[/URL]  !important;

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

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML2]#HTML2[/URL]  .widget-content

{

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

border-radius: 0px;

display: none;

margin-top: -18px;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=3B5998]#3B5998[/URL] ;

}

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML2]#HTML2[/URL]  .title:hover + .widget-content, .widget-content:hover

{

display: block !important;

}





/* Twitter */



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML5]#HTML5[/URL] 

{

margin-top: -30px;  

}

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML5]#HTML5[/URL]  h2

{

text-align: center;

color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML5]#HTML5[/URL]  .title

{

padding: 10px;

font-size: 18px;

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=4099FF]#4099FF[/URL] ;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=4099FF]#4099FF[/URL]  !important;

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

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML5]#HTML5[/URL]  .widget-content

{

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

border-radius: 0px;

display: none;

margin-top: -18px;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=4099FF]#4099FF[/URL] ;

}

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=HTML5]#HTML5[/URL]  .title:hover + .widget-content, .widget-content:hover

{

display: block !important;

}



/* Google + */



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=PlusFollowers1]#PlusFollowers1[/URL] 

{

margin-top: -30px;  

}

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=PlusFollowers1]#PlusFollowers1[/URL]  h2

{

text-align: center;

color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=PlusFollowers1]#PlusFollowers1[/URL]  .title

{

padding: 10px;

font-size: 18px;

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=D34836]#D34836[/URL] ;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=D34836]#D34836[/URL]  !important;

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

}



[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=PlusFollowers1]#PlusFollowers1[/URL]  .widget-content

{



padding: 1px;

background: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] ;

border-radius: 0px;

display: none;

margin-top: -20px;

border: 3px solid [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=D34836]#D34836[/URL] ;

}

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=PlusFollowers1]#PlusFollowers1[/URL]  .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

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.491
Tutorial aprobado y agregado al listado, se agradece el aporte.
 

anferro

Ómicron
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2011
Mensajes
4.519
buen aporte se agradece
 

YKMedia

Iota
Social Media
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
5 Ago 2013
Mensajes
2.463
Muchísimas gracias por tú aporte.
 

Carambel

Ómicron
Social Media
Verificación en dos pasos desactivada
Desde
25 Ago 2013
Mensajes
4.600
:eek: interesante :topsy_turvy:
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba