Chica Blogger » jQuery

Incorporar jQuery TipTip en Blogger

Claudia — Thu, 15 Sep 2011 05:40:18 +0000

En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu plantilla desde Diseño/Edición de HTML, antes de :

Ahora, antes de ]]>, copia el siguiente código CSS:

/* TipTip CSS - Version 1.2 */
 
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
 
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
 
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
 
#tiptip_holder.tip_right {
padding-left: 5px;
}
 
#tiptip_holder.tip_left {
padding-right: 5px;
}
 
#tiptip_content {
font-family: Arial, sans-serif;
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
*background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
 
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
 
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
 
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}

3. Haz que funcione

Tanto en tus entradas como en tu plantilla puedes incluir TipTip de forma manual usando el atributo “title” y la clase (class=”tooltip”) en tus enlaces, de la siguiente manera:

1	Chica Blogger

Posts relacionados

Incorporar jQuery TipTip en WordPress

Claudia — Wed, 14 Sep 2011 03:54:41 +0000

TipTip es un popular plugin jQuery de bajo peso desarrollado por Drew Wilson que permite añadir tooltips a tu blog sólo con CSS, y mediante el atributo “title”. La gracia que tienes es que no necesita imágenes, es fácil de incorporar y, como cualquier tooltip, además de verse bonito contribuye a la usabilidad web.

Para incorporarlo en tu blog de WordPress, sigue los siguientes pasos:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu header.php, antes de :

1
2

2. Descarga el plugin desde la web del autor

Ve a Drew Wilson Code y descarga el paquete de jQuery TipTip. Descomprime el paquete y sube el archivo “jquery.tipTip.js” vía FTP en la carpeta “js” de tu theme (si no existe, créala). El contenido de tipTip.css puedes pegarlo al final de tu style.css.

3.Haz el llamado desde tu header.php

Justo bajo , pega los siguientes códigos:

4. Añade TipTip de forma manual a tus enlaces

Puedes seguir el siguiente ejemplo:

Chica Blogger

Tanto el atributo “title” como la clase (class=”tooltip”) son necesarios y obligatorios para que funcione el plugin. Debes añadirlos donde quieras que se muestre el tooltip.

5. Añade TipTip de forma automática a tus enlaces

Habrás notado que WordPress ha añadido títulos de forma automática a algunas secciones importantes. Incorporando una variable, se puede lograr que los tooltips se muestren de forma automática en cada lugar donde se use el atributo “title”:

Habrás notado lo sencillo que es añadir TipTip a tu WordPress. No hay más cambios que hacer, a menos que quieras hacer algunos cambios en el CSS.

Posts relacionados

jQuery FontEffect: añade afectos al texto sin imágenes

Claudia — Wed, 19 Aug 2009 02:47:42 +0000

FontEffect es un plugin jQuery que añade efectos a textos delimitados con HTML, sin imágenes, y sin necesidad de usar CSS. En su versión 1.0 (que pesa sólo 7kb) permite añadir 4 efectos distintos: borde (outline), sombra, gradiente y reflejo (mirror).

Puedes añadirlo en tres pasos:

1) Cargas la librería y el plugin (tomando en cuenta que requiere jQuery 1.3.2):

2) El CSS:

#ejemplo{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

3) HTML y efectos:

ChicaBlogger

Puedes combinar los efectos como quieras, y ver ejemplos en la página de Alejandro Uliana.
Es un plugin curioso, ideal para encabezados generados dinámicamente (ejemplo, el título de los posts). Lo mejor, es que funciona en la mayoría de los navegadores conocidos, incluyendo el favorito de todos: IE6.

Vía | Queness