Hoy les voy a brindar un fabuloso código y muy sencillo de implementar en el blog,este lo tenia desde hace un tiempo previsto para una entrada pero no había tenido tiempo,este código venia original con solo un mensaje al deslizarse por la pagina este aparecía la autoría del mismo la desconosco,lo que hice fue implementarle la fanbox de facebook y como ya dije al hacer scroll en el blog este aparecerá,porque dije muy sencillo de implementar,por lo fácil que es,con solo añadirlo en un gadget es todo.
Cuando este se cierra dando click en la (x) este ya no volverá a aparecer hasta que no se cargue otra página Le podemos poner el color que queramos, con solo usar un poco de CSS,Para un ejemplo al hacer scroll en este sitio van a ver como aparece.
A continuación le brindo el código :
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).scroll(function(){ if(jQuery(document).scrollTop()>=jQuery(document).height()/7) {
jQuery('#fanbox').show('slow');
} else {jQuery('#fanbox').hide('slow');}
});
function closefanbox(){
jQuery('#fanbox').remove();
;}
</script>
<style type="text/css">
/* Contenedor general */
#fanbox {
display: none;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 21px;
width: 300px;
margin: 0;
padding: 0 0 5px;
z-index:1000;
}
/* Botón cerrar */
#fanbox a {
position: absolute;
top: 5px;
right: 6px;
color: #ccc;
font-size: 15px;
font-weight: bold;
}
/* facebook */
/* tubetrucos.com */
#fanbox {
background-image: -moz-linear-gradient(#696969, #000);background-image: -webkit-linear-gradient(#696969, #000);background-image: -o-linear-gradient(#696969, #000);background-image: linear-gradient(#696969, #000);
margin: 0px auto;
box-shadow: inset 0 0 8px #fff;
border-radius:8px 8px 8px 8px;
width:290px;
height:160px;
overflow:hidden;
}
div.fanbox10 iframe {margin:-1px}
</style>
<div style="display: none;" id="fanbox">
<a href="javascript:void(0);" onclick="return closefanbox();">X</a>
<!-- Facebook -->
<!-- tubetrucos.com -->
<div class='fanbox10'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftube-trucos%2F161206907309924&width=300&height=180&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:180px;" allowtransparency="true"></iframe></div>
</div>
Lo que esta en color 000 es el color negro del fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
lo que esta en color 696969 es el color gris que esta tambien de fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
Donde dice pages%2Ftube-trucos%2F161206907309924 lo remplazan por el nombre de su pagina en facebook si todavia no tienen la url personalizada y tienen nombre y numeros lo copian desde donde dice page y las / la remplazan por %2F .
Para que este codigo funcione hace falta tener instalada la librería jQuery en nuestra plantilla. Si la tienen todo bien ,para el que no la tenga solo deben ir a plantilla y con CTRL + F buscan </head> y justo antes pegan lo siguiente.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Eso es todo espero y lo disfruten.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
hola amigo estoy intendando poner el cuadro pero no atino a ponerlo pongo el donde dices lo depage lo borro pongo mi direccion de face pero me sale el cuadro en negro a que puede ser tambien e modificado el html por encima del puse tambien el otro codigo saludosy buena pagina amigo sigue asi da gusto encontrar paginas asi
ResponderEliminaramigo ya lo solucione muchas gracias por todo saludos
ResponderEliminarHola Cristobal ,que bueno que ya diste con la solucion ya sabes aquí estamos.saludos
EliminarGracias por la informaciòn! Es interesante!
ResponderEliminarHola, muchas gracias por el wigget, como puedo hacer que aprezca en el lado izquierdo ? Gracias feliz año
ResponderEliminar