Tutorial Blogger | Colocar Tiptip basado en jQuery

Tiptip es un sistema de tooltips basado en jQuery el cual permite mejorar los tooltips normales. Es muy simple y a su vez se puede personalizar bastante bien para darle un poco mas de estilo a tu blog.

Como puedes apreciar este Tiptip lo tengo integrado en mi blog así que puedes echarle un vistazo para que veas como quedaría.

Vista Previa de Tiptip 1.3

Comenzamos con el Tutorial para integrarlo en nuestro blog.

Paso 1: Añadiendo el script:
En ''Diseño | Edición HTML'' (''Plantilla | Editar plantilla'' si usas Blogger 2011) busca el siguiente código:

</head>

Arriba de este, deberás pegar el siguiente:
NOTA: si ya tienes el script de jquery omite el primer script de este código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Aportes/tiptip13ayudabloggers.js'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(function () {
jQuery(".tooltip").tipTip()
});
//]]>
</script>

Paso 2: Añadiendo CSS:
Ahora deberás buscar la siguiente línea:

]]></b:skin>

Arriba de esta, pega el siguiente fragmento:

/* TipTip CSS - Version 1.3 */

#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-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-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);
    }
}

Guarda los cambios y listo.

Paso 3: Usando Tiptip:
Cada vez que quieras usar Tiptip, deberás añadir la clase tooltip y un título al contenido de la siguiente forma (Son ejemplos):

Para un enlace: