Título del blog en navegador con efecto de tipeo

En esta ocasión vengo a presentarles un script que hará nuestro título en el navegador web, más interesante y divertido.
Se trata de un truco que al implementarlo y guardarlo, el título del blog en el navegador plasmará el título del blog pero con efecto de tipeo.
El truco se puede ver en el Laboratorio de T.B.

Agregar efectos de título al blog

El truco se debe agregar en un elemento de la página como un código entonces vamos a: Blogger → Diseño → Elementos de la página → Añadir gadget → Modo HTML/Javascript y pegamos el siguiente código:

<script type="text/javascript">

var message="Entra a Teoriablogger.blogspot.com" //especifica un título
var message=message+" "
var temptitle=""
var speed="150"

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)}

window.onload=titler
</script>

Lo que está escrito en rojo es el título que va a aparecer en el navegador.
Cuando lo hayas modificado, mira la pestaña de tu navegador y listo.

Entrada borrador, publicada ¿Programada?

Muchos bloggers no saben cómo hacer para cambiar el orden de la lista de entradas que ofrece el mismo Blogger. Sin embargo, no sólo existe esta función para cambiar el orden de las entradas, sino que también para programar una.

¿Qué significa programar una entrada en Blogger?

Una entrada programada crear una entrada normalmente, terminarla y ponerle fecha y hora de publicación, por ejemplo:
Son las 13:20hs del día 15 de octubre y terminé de escribir una entrada, pero la programo para que se publique automáticamente el 21 de octubre a las 15:20hs.

Programar entradas

Primero hay que crear la entrada y terminarla en Blogger → Botón Crear nueva entrada.
Ahora hacemos click en el enlace spoiler Opciones de entrada que se encuentra debajo del editor de textos:

Allí cambiamos el día actual por una fecha futura, por el día que quieres que se publique automáticamente. También puedes cambiar la hora a publicar. Cuando tengas determinado ambos campos, haz click en Publicar Ahora nos dirigimos a la lista de entradas, haciendo click en el título de tu blog.
Veremos que tendremos el post que acabamos de programar en la lista entradas como una entrada programada:

Incluir tu blog a Google y Yahoo

Si quieres que tu blog aparezca en los buscadores más visitados de la red, mira el siguiente recuadro que te indica cómo agregar tu blog a los buscadores como Google, Yahoo y Bing (de MSN).

URLs para añadir tu blog a los buscadores

Añade tu blog a Google: http://www.google.com.ar/addurl/?continue=/addurl
Añade tu blog a Yahoo (necesitas estar registrado): http://siteexplorer.search.yahoo.com/ar/free/request
Añadir tu blog a uno de estos buscadores es un proceso largo que puede durar semanas o incluso meses. Ni siquiera se garantiza si tu blog será añadido.

Asignar tooltips para enlaces con efectos

Antes de ver este post te recomiendo ver este que se relaciona: Atributo title

Con este truco te vamos a enseñar a crear un tooltip con códigos jquery y al pasar por un enlace o texto, el tooltip se mostrará con un efecto y persiguiendo al cursor, como podemos ver en el laboratorio de T.B..

Tooltip Jquery en tu blog

Vamos a Blogger → Diseño → Edición de HTML y bucamos el siguiente código: ]]></b:skin> y arriba pegamos el siguiente código arriba:

#easyTooltip{
padding:4px 9px;
border:2px solid #2086CA;
background:#fff;
color:#2086CA;
font-family:arial;
}

Ahora vamos a pegar el siguiente código abajo del mismo (]]></b:skin>):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Comienzo de código Tooltip -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){
var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};
var options=$.extend(defaults,options);
var content;
this.each(function(){
var title=$(this)
.attr("title");
$(this)
.hover(function(e){content=(options.content!="")?options
.content:title;
content=(options.useElement!="")?$("#"+options.useElement)
.html():content;$(this)
.attr("title","");
if(content!=""&&content!=undefined){$("body")
.append("<div id='"+options.tooltipId+"'>"+content+"</div>");
$("#"+options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")
.css("display","none")
.fadeIn("fast")}},function(){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)});$(this)
.mousemove(function(e){$("#"+options.tooltipId)
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")});
if(options.clickRemove){$(this)
.mousedown(function(e){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)
})}})}})(jQuery);
//]]>
</script>
<!-- fin de código de Tooltip -->

Y ahora vamos a aprender cómo hacer un tooltip en un enlace, cada vez que queramos publicar uno. Siempre que quieras publicar un tooltip, debes agregarle a la etiqueta <a> el atributo title y el contenido adentro: title="Contenido del tooltip" y ademas debes agregar el atributo class con el contenido tooltip dentro: class="Tooltip".
El enlace con tooltip se puede añadir en cualquier parte del blog (ya sea en una entrada, gadget o texto en la plantilla).

Código completo

<a href="http://teoriablogger.blogspot.com" id="tooltip" title="Obtiene ayuda para tu blog">Teoría Blogger</a>

Atributo title

El atributo indica principalmente un tooltip a cualquier texto.

¿Qué es un Tooltip?

Un tooltip es como una ayuda para un enlace o un texto. Una ayuda visual que el usuario no solicita para ver de qué se trata un determinado elemento, pasando el cursor por encima o clickeando sobre el mismo.
Aunque parezca muy evidente, un tooltip se presenta en prácticamente todas las páginas webs. Porque en el siguiente ejemplo podemos ver una imagen del tooltip clásico:

En la imagen se muestra uno de los tooltips del enlace del menú de la página Goear.com

Ejemplos

Para ver los ejemplos de los tooltips clásicos, debemos pasar el cursor por encima de los siguientes textos o palabras:
Palabra
Palabra

¿Cómo se obtiene?

Para obtener un tooltip en un enlace, se debe agregar a la etiqueta <a> el atributo title="Contenido del tooltip". El código completo quedaría así:
<a href="http://teoriablogger.blogspot.com" title="Click para obtener ayuda sobre blogs">Teoría Blogger</a>
Teoría Blogger
Para asignar un tooltip a un texto común, debes encerrar al mismo con las etiquetas span y dentro agregarle el atributo title: <span title="Contenido">Texto común</span>
Texto común
El atributo title se puede agregar en cualquier etiqueta en el que contenga textos pero los dos ejemplos anteriores son los más usados.

ColorZilla complemento de Mozilla, útil para un blogger

Hace unos días publiqué un post dedicado sólo a la explicación de qué es, para qué sirve la propiedad color. Para hacer un resúmen, explicamos que servía para imponer color a las letras de un elemento. También explicamos cómo obtener un color e indicamos los nombres de los colores y sus respectivos códigos. Pero no mostramos la forma de cómo obtener un determinado color, un color preciso, el uno quiere.
En este post mencionamos las formas de obtener los colores que vos querés, por medio de un complemento de Mozilla Firefox (navegador que recomendamos para los blogueros).

ColorZilla

¿Qué es ColorZilla?

ColorZilla es un complemento de firefox que se destaca por tener un cuentagotas que puede extraer colores precisos de la página en la que estés.

• Además de esta exelente función, posee una paleta de colores para seleccionar un color cualquiera y al hacerlo te muestra los valores RGB, HEX y su nombre (si tiene) para que puedas copiarlo y usarlo;
• enseña cuáles sonhttp://www.blogger.com/img/blank.gif los colores que se pueden nombrar y sus códigos;
• tiene un historial de todos los colores que seleccionaste.

¿Cómo se utiliza?

Para manejar ColorZilla debes hacer click en el cuentagotas que aparece en la parte inferior izquierda de la pantalla de mozilla, y desplazar el cursor por toda la página web para extraer un color.

Descarga

ColorZilla | http://www.colorzilla.com

Video explicativo

Ver este video en Teoría Blogger videos | Ir a Teoría Blogger videos