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

Contactable: Un atractivo plugin jQuery para formularios de contacto

Claudia — Mon, 18 Jan 2010 23:15:24 +0000

Contactable es un sencillo plugin (jQuery + PHP) desarrollado por Philip Beel (vía devSnippets) que permite habilitar formularios de contacto o feedback en cualquier página, al estilo UserVoice.
Es una práctica opción (con parámetros configurables) si estás buscando instalar un formulario de contacto en WordPress, recomendable para todo aquel que quiera mejorar la usabilidad de su sitio web.

Más:
Documentación | Instalación en WordPress

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