Øàáëîíû äëÿ DLE

Página Principal » Hacks en Español » Fanbox Deslizable con JQUERY y CSS

 
 
 

Datos de Instalación DataLife Engine - La versión actual 9.6

Las nuevas características del sistema::

Un nuevo editor WYSIWYG para añadir noticias.

El nuevo sistema descargar los archivos e imágenes, que soporta AJAX y arrastrar y soltar.

El aumento de la velocidad de la escritura en muchos aspectos.

Un gran número de nuevas etiquetas de plantilla, que ofrecen nuevas oportunidades a los webmasters.

Demo  Ver Completo  Manual de Instrucciones
 
 

Fanbox Deslizable con JQUERY y CSS

Autor: mcnecter el 20-11-2011, 00:08, Visitas: 1355

10

 

En este tutorial les mostrare la forma de añadir su Fanbox de Facebook en un menu despleglable en su Datalife mediante query's de JS y CSS el resultado es una atractiva forma de invitar a nustros amigos y lectores a seguirnos mediante una caja desplegable con efecto deslizane a un costado de nuestra Pagina. 

 

 

 

Fanbox Deslizable con JQUERY y CSS

 

Fanbox Deslizable con JQUERY y CSS

 

panel-lateral-fanbox.zip [575.65 Kb] (descargas: 294)


 

Este Hack sirve para colocar un fanbox deslizable en su pagina

 

 

Tiempo: +- 5 minutos

Instalación muy simple y fácil

Probado con Datalife Engine 9.4 (funciona con todas las versiones)

Personalizable

css+jquery

PDF (tutorial)

 

Descarga desde el Siguente enlace:

 

Atención! Usted no tiene permiso para ver este texto.... Primero debes Registrate!

 

Nota: Este Hack se pueede adaptar a tus necesidades , puedes reemplazar el codigo de facebook y agregar marcadores sociales, enlaces , etc solo es necesario cambiar algunos parametros del css, la imagen y el codigo de la fanbox por tu codigo perzonalizado

 

 

Tags: Java, tutorial, Hack, CSS

Categoria: Hacks en Español, Tutoriales

Noticias Realaciondas:
    Social Media Pop con Jquery y CSS Social Media Pop con Jquery y CSS
    En este tutorial les enseñare a instalar el Hack "jQuery Social Modal Box" un sistema que invita a los usuarios que quieren ver nuestro...
    Nuevo! Nuevo!
    Este Hack agrega la palabra nuevo a todos los nuevos artículos que agregues por un determinado tiempo asta que ya desaparece la palabra nuevo ...
    Menu Lateral Deslizante con Css y JavaScript - Recomendado Menu Lateral Deslizante con Css y JavaScript - Recomendado
    En este tutorial les enseñare a instalar el  "Menu Lateral Deslizante con Css y javascript" un Menu que se desliza por nuestro...
    Prohibir agregar enlaces Prohibir agregar enlaces
    Este hack sirve para que los usuario no puedan agregar enlaces en los comentarios Instalación: Dificultad: Facil Riesgos: Ninguno Tiempo: 2...
    Agregar Barra Flotante Social Para Compartir Las Entradas Agregar Barra Flotante Social Para Compartir Las Entradas
        La Barra Flotante esta Situada en la parte de arriba de todas las entradas de Data Life, Pero lo que lo hace mas Interesante, esque...
Estimado visitante, usted esta en el sitio como usuario no registrado.
Le recomendamos Registrarse o entrar en el sitio con sus datos.
<
  • Publicaciones: 0
  • Comentarios: 5
  • Ubicación:
  • Sexo:
20 Noviembre 2011 06:03

argoz

  • Grupo: Usuario
  • Registrado: --
 

Excelente se ve Bien en MI ARGOZ.NET


<
  • Publicaciones: 0
  • Comentarios: 1
  • Ubicación:
  • Sexo:
20 Noviembre 2011 13:08

buves18

  • Grupo: Usuario
  • Registrado: 7.11.2011
 

Nice:D. heiii :D:D:D.


<
  • Publicaciones: 307
  • Comentarios: 100
  • Ubicación:
  • Sexo:
21 Noviembre 2011 02:07

zuteri

  • Grupo: Fundador
  • Registrado: --
 

exelente muy bueno


--------------------

Pegalo en tu Firma:

[center][img]http://clubdle.com/logo.png[/img][/center]

<
  • Publicaciones: 5
  • Comentarios: 28
  • Ubicación:
  • Sexo:
12 Diciembre 2011 20:59

mcnecter

  • Grupo: Moderador
  • Registrado: --
 

Otra opcion seria crear un archivo llamado fanbox.tpl y ahi agregar las src y las rutas de las imagenes, scripts y CSS dentro de ese archivo y agregar en tu main.tpl la siguiente linea antes de </html> la funcion de para llamar a el archivo fanbox.tpl

deberia quedar asi:


{include file="fanbox.tpl"}
</html>
 

ya dentro de la fanbox.tpl creas las rutas para llamar a jquery, el stilo css y las imagenes mas o menos seria asi el archivo fanbox.tpl

<link rel="stylesheet" href="{THEME}/style/estilo.css" type="text/css" />  

<script type="text/javascript" src="{THEME}/js/jquery.min.js"></script>

<script type="text/javascript">

jQuery.noConflict();

jQuery(function (){

jQuery(".slide_likebox").hover(function(){

jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");

},function(){

jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");

},500);

return false;

});

</script> 

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook
.com%2Fdifusionhiphop&amp;width=238&amp;colorscheme=light&amp;connec
tions=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div&g
t;</div>


<
  • Publicaciones: 1
  • Comentarios: 19
  • Ubicación:
  • Sexo:
13 Diciembre 2011 06:08

RIKO

  • Grupo: Miembro
  • Registrado: --
 

Amigo ud me podria ayudar con eso hacerme ese fanbox asi como tu dices en esa opcion


--------------------
"La tecnología te atropella solo si vas a tras de ella"

<
  • Publicaciones: 5
  • Comentarios: 28
  • Ubicación:
  • Sexo:
13 Diciembre 2011 19:23

mcnecter

  • Grupo: Moderador
  • Registrado: --
 

RIKO,

si no hay ningun problema, en un rato te mando el enlace de descarga a un MP deja lo edito el fanbox.tpl y lo subo a un servidor


<
  • Publicaciones: 1
  • Comentarios: 19
  • Ubicación:
  • Sexo:
13 Diciembre 2011 21:00

RIKO

  • Grupo: Miembro
  • Registrado: --
 

Eperando entoonces jeje..........


--------------------
"La tecnología te atropella solo si vas a tras de ella"

<
  • Publicaciones: 1
  • Comentarios: 19
  • Ubicación:
  • Sexo:
27 Enero 2012 18:52

RIKO

  • Grupo: Miembro
  • Registrado: --
 

Por que este hack no funka en paginas que tiene slides?¡?¡ alguin lo puede hacer funncionar


--------------------
"La tecnología te atropella solo si vas a tras de ella"

<
  • Publicaciones: 0
  • Comentarios: 1
  • Ubicación:
  • Sexo:
31 Enero 2012 02:35

Jairfabricio

  • Grupo: Usuario
  • Registrado: 30.01.2012
 

Se puede aplicar el mismo sitema aplicando los datos de Twitter !

Muchas Gracias por compartir Saludos !
:) 


<
  • Publicaciones: 5
  • Comentarios: 28
  • Ubicación:
  • Sexo:
15 Mayo 2012 13:12

mcnecter

  • Grupo: Moderador
  • Registrado: --
 

Si si se puede aplicar con los Datos de Twitter,e pugin fue probado en una pagina que no ilcluye sider, TEMPLATE PISCES MODIFICADO, GRACIAS 


Información
Usuarios que no están registrados no pueden dejar comentarios en la página
 
Si necesitas ayuda o quieres chatear
visite nuestro chat: http://xat.com/dleinspanish
Tags: 2, 9.0, 9.2, 9.3, 9.4, 9.x, a, clubdle, ClubDle.com, CSS, Datalife, datalife engine, de, DLE, dle9.4, DleLatino.com, el, en, Engine, español, facebook, Hack, jQuery, Modulo, Módulo, Módulos, Online, para, Sneik, Templades, Template, Templates, tu, tutorial, usuarios, Visitaron, web, Windows7, Zeos, zuteri

Ver todas las etiquetas

Datalife Engine en Español

Copyright © 2004-2011 SoftNews Media in Spanish All Rights Reserved.
Powered by DataLife Engine en Español
                    
Arriba