Ir al contenido principal

Entradas

Mostrando entradas de noviembre, 2012

Tooltips para tu Blog o Sitio Web con Jquery

Los tooltips son muy utiles para dar informacion de un enlace o imagen sin usar espacio en la entrada. Los sitios más importantes usan tooltips en sus sitio, Google, facebook, twitter, youtube, itunes , etc... Los usan por su organizacion. Tu tambien puedes agregar tooltips a tu sitio web o blog siguiendo los siguientes pasos. Ve a Plantilla , Edicion de HTML . Luego busca la etiqueta ]]></b:skin> , y encima de ella pega lo siguiente.   /* JTip */ .tip_window {     padding: 5px ;     width: 200px ;     border: 1px solid #fff ;     background-color: #000 ;     color: #fff ;     text-align: center ;     -moz-border-radius-topleft: 0px ;     -moz-border-radius-topright: 4px ;     -moz-border-radius-bottomright: 4px ;     -moz-border-radius-bottomleft: 4px ;     border-top-left-radius: 0px ;     border-top-right-radius: 4px ;     border-bottom-right-radius: 4px ;     border-bottom-left-radius: 4px ;     -webkit-box-shadow: 1px 1px 3px #6e6d6e ;     -moz-bo

Texto brillante con Jquery Burn

Con cada actualizacion de Jquery surgen nuevos plugins y aplicaciones cada vez más avanzados. Con las version 1.8.2 de Jquery las posibilidades son casi infinitas para los desarrolladores. Ahora los desarrolladores crearon un nuevo plugin de Jquery llamado Jquery.burn , creado para darle brillo a los textos así como los que se pueden hacer con photoshop. Ve a Plantilla , luego a Edicion de HTML . Busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente. .burn-holder{   background: #000000 ;   font-weight: bold ;   overflow: hidden;   padding: 10px ; } .burning {   color: #ffffff ;   font-size: 40px ; } Lo que vez resaltado de Negro es el color de fondo del texto. Lo que está negreado puedes editarlo. Lo que ves de color purpura es el tamaño del texto. Luego busca la etiqueta </head> y encima de ella pega lo siguiente.  <script src=' //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js ' type='text/javascript'/&g

Closed Caption para imagenes con CSS y Jquery

Las imagenes se han vuelto un icono de la iternet pues le dan mejor presentación a un sitio web dependiendo de como las usen. El siguiente tutorial es de Fearlessflyer.com , si usas un sitio web en donde su modo de programacion es distinto a Blogger, como Wordpress premium entonces este tutorial es más facil de seguir en ese sitio. Este tipo de Closed Caption viene con texto de estilos geniales hechos con la tecnologia de Google Web Fonts. Para usar este truco en la imagenes, todas las imagenes tendrán el mismo alto y ancho y poner esa altura en la parte de color purpura, recuerda que height:++px es el alto, ejemplo: height:300px . Debes poner el mismo numero en las dos partes indicadas y el ancho es parte roja width:++px ejemplo width:200px . Pretty Hover Effects. Ve a Plantilla , luego a Edicion de HTML . Luego busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente. /* Pretty Hover CSS Document - fearlessflyer.com */ div.wrapper{ width:209px ; height: