Ir al contenido principal

Truco: Tooltips en Blogger con CSS3

Lo que se está viendo ahora es que los sitios web se estan actualizando a CSS3 y HTML5.
y este es un Plugin de Jquery.
Mobile Fryendly Tooltip CSS3
Se llama de esa forma porque tambien es visible en dispositivos mobiles como Smarth Phones, Tablets y iPads.
  • Ve a Plantilla, luego das click en Edicion de HTML.
  • Has click en Expandir plantilla de artugios y antes de  ]]></b:skin> pega lo siguiente.
/* Mobile Friendly Tooltip */
#tooltip {
font-family: Ubuntu, sans-serif;
font-size: 0.875em;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 15px;
}
#tooltip:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}
#tooltip.top:after {
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .6 );
top: -20px;
bottom: auto;
}
#tooltip.left:after {
left: 10px;
margin: 0;
}
#tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
}
  •  Luego busca </head> y justo encima pega lo siguiente.
 <script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/jquery-1.7.2.min.js'/>
<!--[if lt IE 9]>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/selectivizr.js"></script>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/html5.js"></script>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/ie9.js"></script>
<![endif]-->
<script type='text/javascript'>
// IJ tutorials//<![CDATA[
        $( document ).ready( function()
        {
            var targets = $( '[rel~=tooltip]' ),
                target    = false,
                tooltip = false,
                title    = false;

            targets.bind( 'mouseenter', function()
            {
                target    = $( this );
                tip        = target.attr( 'title' );
                tooltip    = $( '<div id="tooltip"></div>' );

                if( !tip || tip == '' )
                    return false;

                target.removeAttr( 'title' );
                tooltip.css( 'opacity', 0 )
                       .html( tip )
                       .appendTo( 'body' );

                var init_tooltip = function()
                {
                    if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                        tooltip.css( 'max-width', $( window ).width() / 2 );
                    else
                        tooltip.css( 'max-width', 340 );

                    var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                        pos_top     = target.offset().top - tooltip.outerHeight() - 20;

                    if( pos_left < 0 )
                    {
                        pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                        tooltip.addClass( 'left' );
                    }
                    else
                        tooltip.removeClass( 'left' );

                    if( pos_left + tooltip.outerWidth() > $( window ).width() )
                    {
                        pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                        tooltip.addClass( 'right' );
                    }
                    else
                        tooltip.removeClass( 'right' );

                    if( pos_top < 0 )
                    {
                        var pos_top     = target.offset().top + target.outerHeight();
                        tooltip.addClass( 'top' );
                    }
                    else
                        tooltip.removeClass( 'top' );

                    tooltip.css( { left: pos_left, top: pos_top } )
                           .animate( { top: '+=10', opacity: 1 }, 50 );
                };

                init_tooltip();
                $( window ).resize( init_tooltip );

                var remove_tooltip = function()
                {
                    tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
                    {
                        $( this ).remove();
                    });

                    target.attr( 'title', tip );
                };

                target.bind( 'mouseleave', remove_tooltip );
                tooltip.bind( 'click', remove_tooltip );
            });
        });
//]]>
</script>
  • Lo que ves en verde puedes eliminarlo, es un codigo para html5 en IE9.
  • Ahora guarda los cambios.
  • Ahora cuando vallas a hacer una entrada y quieras poner un texto o una imagen con tooltip haces lo siguiente.
Texto centrado
Ejemplo del texto que tendra el tooltip

<center rel="tooltip" title="texto del tooltip">Texto Que tendra el tooltip</center>


Enlace
Ejemplo Enlace derecho _ Ejemplo Texto del enlace _ Ejemplo de la izquierda
<a href="#URL del enlace" rel="tooltip" title="texto del tooltip">Texto del enlace</a>


Imagen

<img src="URL de la imagen" rel="tooltip" title="texto del tooltip"/>

  • Lo que esta en Azul es donde podras el texto que aparecerá en el tip
  • Lo que esta en Rojo es donde esta el texto que tendra el tip.
  • Lo que está en Purpura es donde vendra el enlace del texto.
  • Lo que esta en Fuchsia es donde ira la URL de la imagen.

FUENTE | osvaldas.info




Entradas populares de este blog

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc. Es compatible con la mayoria de versiones de Windows 7 Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente. Paquete de idiomas Windows 7 RTM MUI 64-bit (x64) Arabe Descargas Bulgaro Descargas Chino (Simplifi...) Descargas Chino (Tradicio...) Descargas Croata Descargas Checo Descargas Danés Descargas Holandés Descargas Inglés Descargas Estonio Descargas Finlandés Descargas Francés Descargas Alemán Descargas Griego Descargas Hebreo Descargas Húngaro Descargas Italiano

Blogger:Usar @font-face en tu Blog de Blogger

Muchos sitios están usando @font-face y es porque les permite usar fuentes en sus sitios web que son muy creativas y dan más estilo al sitio. Lo malo que tiene esta funcion es que solo se pueden usar fuentes si están en el mismo servidor de el sitio, lo que quiere decir que en blogs como los de Blogger no funcionaría. Pero eso se ha estado solucionando con el tiempo. Un dia me puse a buscar como hacerlo y no encontraba la manera hasta que un día pude hacerlo cuando puse una fuente codificada, funcionó instantaneamente, lo unico que sé es que funciona en Firefox, Firefox Aurora, RockMelt y Google Chrome y no se si funcione en los demás navegadores pues no tengo los demás y IE9 no me funciona bien . "Si es compatible en los otros navegadores lo comentan para agregarlo a la lista de compatibles" Sigue los siguientes pasos y podrás cualquier fuente y poner con @font-fae en tu Blog. Se usarán imagenes de ilustracion para que sea más entendible, has click en donde diga (ve

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML. Los que más utilizan este programa son los Fansubs y empresas de karaoke. Los codigos son dificiles de aprender pero no imposibles si mantienes practica. REGLAS DE LOS CÓDIGOS. Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {} . El codigo inicia con una diagonal inversa (invert slash) \ . El indicador de la accion biene negreado . El codigo numerico saldrá normal. El codigo viene antes del texto. Cada codigo se divide con una diagonal inversa \ . BÁSICO. _________________________________________________________________________ Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones