Gadget Caja flotante de Facebook para su Sitio Web

Gadget Caja flotante de Facebook 1
Usted está luchando para conseguir más le gusta de facebook? Añadir un facebook flotante como la caja a tu blog o sitio web. El widget se mantiene en una posición fija en el lado derecho de su sitio. Al pasar la imagen azul sobre facebook, la caja como se desplazará y revelarse utilizando jQuery.

Ver demo

Se puede ver una demostración de este widget de Facebook en la parte derecha de esta página. Pase  con el puntero del ratón sobre la imagen facebook. Debe aparecer una facebook como la caja.

Añadir widget a su sitio





Paso 1

Agregue el código siguiente en cualquier parte de la etiqueta body de su plantilla. O simplemente haga clic en el botón "añadir a la blogger" para los blogs de blogspot.



<!--Floating Facebook Widget by www.TheBlogWidgets.com START-->

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EZi3EuIrwVVc_ivzsgdEKWaXv6IVy7RbBPTVDxoVF6XoV2JdReNMoEiMNhXnuaZ6fjQ-m84nBgrRJRLPpob95Lt3P72Wqj1TAQl-04AazkZuQJ5vWaZ5615HMstJ6Ot7cz0C0kRBsvR5/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div class="theblogwidgets" style="">

<!--Brought to you by
http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>

<!--
http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center>

<a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Blog</a></center>

</span></div>

</div>

<!--Floating Facebook Widget by www.TheBlogWidgets.com AND www.JasperRoberts.com END-->

Paso 2



Si el widget flotante facbook no está funcionando adecuadamente después del paso 1, entonces usted necesita para añadir jQuery para su sitio . Siga las instrucciones a continuación.

  1.  Ve a Diseño > Edición de HTML
  2. Buscar <head> y justo debajo de él pega el siguiente código jQuery.

Cómo personalizar

¿Dónde encontrar el código?

Con el fin de encontrar el html ir al panel de Blogger > Layout . Haga clic en "editar" en el gadget "HTML / Javascript".

Introduzca su nombre de usuario facebook

Busque la línea de código abajo y reemplazar theblogwidgets lo que está en rojo con su propia página de Facebook Nombre de usuario.

Fuente: http://theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html#more-5

19 /02/2016


Gadget Caja flotante de Facebook para su Sitio Web Gadget Caja flotante de Facebook  para su Sitio Web Reviewed by Pablo on 20:40 Rating: 5

No hay comentarios :

Con la tecnología de Blogger.