La plataforma Futudownloads está en desarrollo.

30 nov. 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-box-shadow: 1px 1px 3px #6e6d6e;
    box-shadow: 1px 1px 3px #6e6d6e;
}
/* try this for another style option
.tip_window_other {
    width:320px;
    padding:5px;
    color:#fff;
    text-shadow:-1px -1px 0px #2e83ce;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    border:3px solid #fff;
    outline:2px solid #2e83ce;
    background: #b2e1ff;
    background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
}
 */ 
  • Recuerda que lo que está negreado es lo que puedes editar.
  • Luego busca etiqueta </head> y encima de ella pega lo siguiente.
<script src='http://code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/jTip/jTip.js' type='text/javascript'/>
<script>
$(document).ready(function(){
    $(&quot;.tip&quot;).jTip();
});
</script>
  • Los archivos .js están como enlace para que puedas descargarlos.
  • guardas los cambios.
  • Listo, ahora cuando hagas una entrada, pongas un gadget HTML o lo uses directamente en tu plantilla puedes agregar lo siguiente para que uses lo tooltips.
Enlace.
<a class="tip" href="#" title="Texto del tooltip">texto del enlace</a>
  • El # es donde pondrás el enlace, El Texto Purpura es donde agregarás el texto del tooltip y lo que ves en rojo es donde pondrás el texto del enlace. Ejemplo
<a class="tip" href="http://futudownloads.blogspot.com" title="Sitio web de tutoriales">futudownloads</a>  
Imagen.
<img class="tip" src='"URL de la imagen" title="Texto del tooltip"/> 

Para Sitios Web

Ejemplo:
futudownloads


Qtiquetas: Jquery 1.5.1 a jquery 1.8.3
Dificultad: baja
Licencia: Free
Fuente: Vanity.enavu.com





Ver mas...

15 nov. 2012

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'/>
<script src='//dl.dropbox.com/u/53097108/ihojosestudios/example/jquery.burn.min.js' type='text/javascript'/>
<script src='//dl.dropbox.com/u/53097108/ihojosestudios/example/jquery.knob.js' type='text/javascript'/>
    <script>
    if(typeof jQuery === &#39;undefined&#39;){
      document.write(unescape(&quot;%3Cscript%20src%3D%27assets/jquery/jquery.js%27%3E%3C/script%3E&quot;));
    }
    </script>
<script type='text/javascript'>
// IJ tutorials //<![CDATA[
(function($){
$(function(){
$('.burning').burn();
});
})(jQuery);
//]]>
</script>
  • Guardas los cambios.
  • Listo ahora cuando vallas a crear una entrada o un gadget HTML puedes crear un texto con brillo agregando la siguiente etiqueta.
Sin fondo:
<span class="burning">Texo</span>
Con fondo:
<p class="burn-holder"><span class="burning">Texo</span></p>
  • Ejemplo.
Con fondo:


FUTUdownloads


Sin fondo:
FUTUdownloads

Para aprender a usar Google Webfonts ve al post Como Utilizar Google WebFonts.
Con Google WebFonts:

FUTUdownloads


Dificultad: Baja
Licencia: MIT, GLP
Fuente: sinetheta.github.com









Ver mas...

1 nov. 2012

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:250px; overflow:hidden; position:relative; }
/*generic style for all div */
.caption0 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
.ccap {height:250px;}
/*white fade*/
.caption1 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
/*city*/
.caption2 {font-family: arial; font-weight:bold; font-size:26px; position:relative; text-align:center; padding:45px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-SxMxLsZvOHM/UJLxAyulF2I/AAAAAAAAAH0/fAm9xb-6MTA/s1600/city.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #999; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*wood*/
.caption3 {font-family: Georgia, arial; font-weight:bold; font-size:24px; font-style:italic; position:relative; text-align:center; padding:35px 15px 15px 15px; background:url(//lh5.googleusercontent.com/-d-7xEr5vNQw/UJLxB2esusI/AAAAAAAAAII/RkJa8ezuxjs/s1600/wood.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*grass*/
.caption4 {font-family:'Droid Sans', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:15px; background:url(//lh3.googleusercontent.com/-ZIKc1y7F2zQ/UJLxAbugz4I/AAAAAAAAAHo/RaJR5L6495A/s1600/grass.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; text-transform:capitalize; line-height:30px;}
/*w*/
.caption5 {font-family:'Lobster', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:38px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-Z-zZGdwb-rM/UJLxAzUN_FI/AAAAAAAAAH4/C_O60KHw9Js/s1600/green.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #ff4e00; text-transform:capitalize; line-height:16px;}
/*grungy*/
.caption6 {font-family:'IM Fell English SC', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:35px 0 0 0px; background:url(//lh6.googleusercontent.com/-Tk7rT3Gc2Cw/UJLxBX2blOI/AAAAAAAAAIA/MasvakdBEg4/s1600/grunge.png); min-height:125px; color:#fff;   line-height:30px; letter-spacing:-2px;}
  • Ahora busca la etiqueta </head> y encima de ella pega lo siguiente.
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><script type="text/javascript" src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/jquery-1.8.2.min.js"/>
<script type="text/javascript">
// IJ tutorials //<![CDATA[
    $(document).ready(function(){                                 
        var thumbs = $(".ccap1");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption1\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption1').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption1').animate({top:"85px"}, 100);
        }     
        );
        var thumbs = $(".ccap2");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption2\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption2').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption2').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap3");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption3\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption3').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption3').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap4");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption4\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption4').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption4').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap5");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption5\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption5').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption5').animate({top:"85px"}, 100);
        }     
        ); 
       var thumbs = $(".ccap6");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption6\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption6').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption6').animate({top:"85px"}, 100);
        }     
        ); 
    });
//]]>
</script>
  • Guardas los cambios.
  • Ahora cuando hagas una entrada o pongas un gadget y quieras poner una imagen con un closed caption, puedes usar cualquiera de los siguientes codigos.
Ejemplo en vivo, edita los detalles que quieras en CSS y mira el resultado en vivo
Ejemplo:
<img class="ccap ccap1" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo2:
<img class="ccap ccap2" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo3:
<img class="ccap ccap3" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo4:
<img class="ccap ccap4" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo5:
<img class="ccap ccap5" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo6:
<img class="ccap ccap6" src="URL de la imagen" title="Texto del clased caption" />

Dificultad: Media
Contenido: IMG-CSS, Jquery.min.1.8.2
Licencia: Free
Modificado: FUTUdownloads
Fuente: fearlessflyer.com



Ver mas...