Crear vinculos dentro de una misma entrada o artículo

Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.

Supongamos que nuestro índice se compone por la siguiente estructura:

Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):

<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>

Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:

<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.

Incluir un enlace en determinadas palabras de forma automática

Este truco permite que una o varias palabras determinadas contengan un enlace. Bastará con escribirlas en la entrada como si de texto normal se tratase para que, de forma automática, se conviertan en un vínculo hacia otra página.

Puede resultar de gran utilidad para aquellos que enlazan frecuentemente una palabra a un determinado blog o apartado de éste. Una vez instalado el script, no será necesario incluir enlace alguno pues el texto plano se convertirá en link al publicar la entrada.

Una de las ventajas que ofrece es la facilidad con la que los buscadores indexarán nuestro sitio (siempre y cuando utilicemos la misma URL -de nuestro blog- y varias palabras 'clave') dado que cada enlace se crea 'por arte de magia'.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade esta línea:

<script src='https://sites.google.com/site/scriptsbalcon/b/balJJTenlacesmag.js' type='text/javascript'/>

A continuación, localiza <data:post.body/> y reemplázalo por este bloque:

<div expr:id='"baLJJTenlaceS3" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');
</script>

Sustituye en cada caso PALABRA por la palabra o frase que al ser escrita en una entrada contendrá el vínculo automáticamente. En URL PAGINA debes introducir la dirección del blog o apartado al que conducirá el término o frase.

Ten en cuenta que la palabra que escribas en cada línea debe ser idéntica a la que posteriormente escribirás en tus entradas. Letras mayúsculas, tildes o caracteres tendrán que ser iguales.

Hay un total de tres líneas en las que puedes insertar tres palabras o frases distintas. Si deseas agregar más, utiliza esto:

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

Recuerda que debe permanecer justo encima del cierre </script>.

Guarda la plantilla y acude a una entrada cualquiera. Escribe cualquier término resaltado en el código y comprueba que al publicar la entrada, la palabra se convierte en enlace y que éste contiene la dirección web atribuida.

Decorar los enlaces visitados de tu blog con un icono

En blogger tenemos la posibilidad de personalizar un gran número de elementos, entre los que destacan los enlaces o links. En esta entrada explicaré la manera de poner un pequeño icono que aparecerá cuando el lector haga clic sobre el enlace y éste haya sido visitado. Sin duda, este truco facilita a tus lectores el distinguir bien cada enlace.

Puedes ver el truco en funcionamiento haciendo clic sobre este enlace (vuelve después a esta entrada para comprobar el resultado):

Mi enlace

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea de CSS:

a:visited {

Ahora añade esto justo debajo:

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUmWic9Fexy1vp7zr6IKLeCMVhrO3GUchWxj3CQtx8uWlmW5DsiP66wT6uavG1atTh2WjsoWYnS6WXeWZJsGBSdCDJs6oK5peJAqMgY4sgDCMqgE2rRd2GJUkwpJ3m7wmjGqXUIfIOPw/s400/bltick.png) no-repeat 100% 50%;
padding-right:20px;
text-decoration:none;

Puedes editar el icono reemplazando la URL de la imagen actual por la dirección de la nueva, así como incrementar o disminuir la distancia entre el icono y el enlace, editando el valor 16px de la línea padding-right:16px;.

Nube de enlaces

Hace tiempo descubrimos un truco muy interesante que nos permitía mostrar las etiquetas del blog en forma de nube 'flotante', que además, tenía movimiento y resultó ser una completa novedad en blogger.

En esta otra entrada voy a enseñarte a incluir una nube de enlaces en el blog, sin movimiento, pero totalmente personalizable y bastante atractiva.

La instalación es sencilla ya que únicamente requiere el uso de un gadget o elemento de página y además, los colores o tamaños podrán editarse.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código necesario:

<div id="blnub">
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
</div>

<style>
#blnub{text-align:center; padding:5px;}
#blnub a{text-decoration:none;}
#blnub a:hover{text-decoration:none; color: #CC3366;}
#blnub .blink1{font-size:14px; color:#3399CC;}
#blnub .blink2{font-size:20px; color:#3366CC;}
#blnub .blink3{font-size:16px; color:#006699;}
#blnub .blink4{font-size:15px; color:#339966;}
</style>

En cada línea reemplaza DIRECCION PAGINA por la dirección del blog, la web o el artículo al que conducirá el enlace y TITULO por el título que aparecerá en la nube.

Si deseas añadir más enlaces a la nube, inserta líneas como esta (siempre antes del cierre </div>) :

<a href="DIRECCION PAGINA" class="blink3">TITULO</a>

Teniendo en cuenta que blink3 es un estilo distinto a blink1, blink2 y blink4 por lo que puedes editar el valor 3 para cambiar el aspecto del enlace.

Puedes cambiar el color de los enlaces editando el valor hexadecimal de las líneas 'color:#3399CC;' y haciendo uso de la tabla de colores.

Guarda el gadget para terminar.

Flechita flotante en una esquina del blog para volver arriba

Hemos visto con anterioridad, dos trucos para conseguir una flechita, ya sea con efecto deslizante o al pie de cada entrada, que nos lleve al inicio del blog con solo un clic.

En este tercer truco explicaré la manera más sencilla de conseguir que una imagen nos permita "subir".

Sin necesidad de alojar script alguno o editar la plantilla, podemos conseguir que, tanto una imagen como una palabra o frase quede flotando en una esquina del blog, cumpliendo esta función.

Tienes dos formas de añadir el truco. La primera es la más sencilla ya que únicamente necesitarás hacer clic en el siguiente botón:

Como resultado obtendrás la siguiente imagen en la esquina derecha de tu blog:




El segundo procedimiento, a pesar de ser un poco más costoso, tiene una pequeña ventaja: podrás escoger la imagen que desees (ya sea una flecha o un icono) o escribir una palabra cualquiera.

Diseño>añadir gadget (elemento de página)>html-javascript

Inserta este código:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir"><img src="URL DE LA IMAGEN"></a>

Reemplaza URL DE LA IMAGEN por la dirección de tu icono y listo ^[+].

Si en lugar de una imagen prefieres hacer uso de una frase utiliza este otro código en lugar del anterior:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir">Volver arriba</a>

Puedes editar la frase "Volver arriba" por cualquier otra cosa.

Guarda el gadget para terminar.

Quitar el enlace en el título del las entradas

Se me ocurrío una modificación que puede resultarte de interés. Se trata de retirar el enlace que hay en el título de las entradas al abrirlas de forma individual, un enlace que realmente no es necesario ya que únicamente sirve para abrir el artículo de nuevo (a pesar de que puede hacerse desde la barra de direcciones en el navegador).

Cabe decir que, al realizar este truco, los títulos de las entradas tendrán enlace sólamente en la portada del blog o en las páginas de etiquetas, lo que es indispensable para acceder a la entrada.

Diseño>Edición de HTML>expandimos artilugios



Busca este bloque de código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y reemplázalo por este otro:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h3 class='post-title entry-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h3>
<b:else/>
<h3 class='post-title entry-title'>
<data:post.title/>
</h3>
</b:if>

Guarda la plantilla para terminar.

¿Qué hemos hecho? Hemos eliminado la parte del código que determina la presencia del enlace, es decir esto:

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

Ten en cuenta que no todas las plantillas son iguales por lo que el estilo que le hayas atribuido a los títulos podría hecharse a perder si no compruebas que en el primer código, la segunda línea tiene el atributo h3 o h2:

<h3 class='post-title entry-title'>

En caso de tener h2, edita todos los h3 que veas en el nuevo código a insertar.

El segundo método es aún más sencillo. Bastará con buscar este otro bloque de código:

<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>

Y reemplazarlo por este otro:

<div class='titlewrapper'>
<h1 class='title'>
<data:title/>
</h1>
</div>

Abrir los enlaces de la sidebar en una nueva ventana

Previamente vimos la forma de hacer que los enlaces o las imágenes con enlace de las entradas se abriesen en una nueva ventana ^[+].

Antes de comenzar debes asegurarte de que has añadido el gadget de "Lista de enlaces":

En caso de tenerlo, cambia el título del gadget por este otro tal y como está escrito (que luego podrás cambiar): Lista de enlaces.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<b:widget id='LinkList1' locked='false' title='Lista de enlaces' type='LinkList'>

Como puedes ver, aparece la frase Lista de enlaces que habíamos puesto como título al elemento.

Ya tenemos el widget localizado y tendrá este aspecto:

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Añade lo que ves en color verde, con un espacio, después de 'data:link.target'.

Guarda la plantilla para terminar:




Ahora podrás editar el título de la lista de enlaces e incluir una frase a tu gusto.

Mostrar backlinks en la sidebar (barra lateral)

Los backlinks son los enlaces que obtiene una determinada web o blog desde otros sitos web.

En blogger tenemos una forma sencillísima de mostrarlos ya que hacemos uso de una única línea.

Diseño>añadir gadget (elemento de página)>Feed

Pega esto:

http://search.blogger.com/blogsearch?q=link:NOMBRE.blogspot.com

Reemplaza NOMBRE por el nombre de tu blog (sin http://).

A continuación podrás elegir distintas opciones:




1) Escoger el número total de enlaces a mostrar.

2) Mostrar la fecha de cada elemento marcando dicha casilla.

3) Mostrar el nombre del autor o la fuente que hizo el backlink marcando dicha casilla.

Para terminar guarda el gadget.

Referencia: Vagabundia

Los cursores en el blog

Hace mucho tiempo me preguntaron la forma de cambiar el cursor al pasarlo por encima de un enlace, un título, un bloque de texto, una imagen...

Por suerte, todo eso e incluso más puede hacerse en blogger.

Antes de comenzar, conozcamos los tipos de cursores y sus respectivos nombres que serán necesarios para incluirlos en el CSS:

move
wait
crosshair
ne-resize
col-resize
progress
text
vertical-text
help
e-resize
se-resize
s-resize
sw-resize
nw-resize
w-resize
no-drop
row-resize
not-allowed

Diseño>Edición de HTML>expandimos artilugios

1) Para poner cualquier cursor en el título de las entradas busca este bloque:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

y añade debajo de .post h3 { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo move.

2) Para poner cualquier cursor en todos los enlaces del blog busca este bloque:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Y añade debajo de a:hover { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo help.

3) Para poner cualquier cursor en un enlace específico busca la siguiente etiqueta:

]]></b:skin>

Y encima pega esto:

.enlacecurs:hover{cursor: NOMBRE; text-decoration: none;}

Guarda la plantilla.

Ahora, cada vez que desees insertar el enlace con cursor especial haz uso de esta línea:

<a class="enlacecurs" href="DIRECCION">TITULO</a>

Reemplaza DIRECCION por la URL de tu sitio web y TITULO por el texto del enlace.

Nota:

Para no estar copiando la línea que inserta el enlace con cursor especial, puedes hacer uso de la plantilla de entrada.

4) Para poner cualquier cursor en los enlaces de la sidebar (barra lateral):

Busca la etiqueta ]]></b:skin> y encima añade esto:

.sidebar ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

5) Para poner cualquier cursor en los enlaces del post-footer o pie del post:

Busca la etiqueta ]]></b:skin> y encima añade esto:

.post-footer ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

6) Para poner cualquier cursor en las imágenes de las entradas:

Busca la etiqueta ]]></b:skin> y encima añade esto:

.post img a:hover {cursor: NOMBRE;}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

Link o enlace con doble título

Ayer estaba recordando el truco del tooltip y lo útil que era el poder insertar la difinición de un enlace cuando pensé en idear otra forma de definir los enlaces o links.

Puedes ver un ejemplo en el blog de pruebas.

¿Te gusta el resultado? Si es así, pongámonos manos a la obra y veamos el código necesario:

<a onmouseover="this.innerHTML = 'TITULO AL PASAR EL CURSOR'"
onmouseout="this.innerHTML = 'TITULO NORMAL'" href="URL DE TU BLOG O WEB">TITULO NORMAL</a>

Sustituye:

TITULO AL PASAR EL CURSOR: por la frase o palabra que aparecerá al poner el cursor encima del enlace.

TITULO NORMAL: (en ambos casos) por el título del enlace.

URL DE TU BLOG O WEB: por la dirección de tu sitio web, por ejemplo: http://google.es/

El código puede ponerse en un gadget html-javascript que encontrarás en el apartado de diseño:

Diseño>añadir gadget (elemento de página)>html-javascript

¡Así de fácil!

Quitar el marco punteado de los links e imágenes en Internet Explorer

Hace tiempo aprendimos a quitar el marco punteado que aparece al hacer clic en un enlace. Ese truco no funcionaba en Internet Explorer, o, al menos, en algunas versiones.

Juanma me pregunta si existe alguna forma de hacer que el marco punteado no aparezca en IE.

Y como no, hay una solución...

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima agrega esta línea de CSS:

a:focus{outline:none;}

Guarda cambios y listo.

Ventana de bienvenida en tu blog

Tras haber visto algún que otro truco para incluir ventanas de aviso en el blog, explicaré cómo puedes incluir una ventana con un mensaje de bienvenida que aparecerá automáticamente al abrir tu blog.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta </head> y encima pega esta línea:

<script language='JavaScript'>window.alert (&quot;ESCRIBE AQUI TU MENSAJE&quot;) </script>

Sustituye ESCRIBE AQUI TU MENSAJE por tu frase de bienvenida.

En caso de querer mostrar la ventana de bienvenida únicamente en la portada del blog, utiliza este otro código:

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language='JavaScript'>window.alert (&quot;ESCRIBE AQUI TU MENSAJE&quot;) </script></b:if>

Guarda cambios y listo.

Abrir los blogs de la lista de blogs en la misma ventana

Seguramente conocerás el gadget de blogger de "Lista de blogs" en donde puedes agregar tus blogs favoritos y ver sus actualizaciones, ya que se muestran las últimas entradas de dichos espacios.

Como comprobarás, al hacer clic en un blog o en alguna entrada que hayan publicado, se habre en una ventana nueva. Al parecer, según las últimas consultas que estoy recibiendo, esto molesta en ocasiones, debido a que el navegador se llena de pestañas.

Si quieres deshacerte de estas ventanas y hacer que los blogs de tu lista de blogs y sus respectivas entradas se habran en la misma ventana, sigue los pasos que te iré mostrando a lo largo de la entrada.

> Antes de comenzar, debes tener el gadget de la lista de blogs añadido.

Diseño>edición HTML>expandimos artilugios

Busca la línea que representa el gadget. Será similar a esta:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

Y seguidamente borra las tres etiquetas que te muestro en color verde:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>

</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl'target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Una vez eliminadas las etiquetas, guarda cambios.

Ahora simplemente tienes que hacer clic en cualquier blog de tu lista y comprobar que se abre en la misma ventana. ☺

Ventana de aviso al pasar el cursor por una palabra o una imagen

Tras haber visto las tres formas de poner ventanas de aviso y cómo personalizarlas, te mostraré este nuevo truco.

Se trata de incluir una imagen o un link que, al pasar el cursor por encima, aparecerá una ventana de aviso.

> Para realizar el truco con texto debes usar el siguiente código:

<a href="#" onmouseOver="alert('TEXTO O FRASE DE LA VENTANA')">FRASE O PALABRA</a>

Sustituye:

TEXTO O FRASE DE LA VENTANA: por el texto o la frase que aparecerá en la ventana de aviso.

FRASE O PALABRA: por la palabra o la frase que mostrará la ventana.

Puedes probar el resultado pasando el cursor por la siguiente abreviatura: HTML

> Para realizar el truco con una imagen utilizaremos este otro código:

<a onmouseover="alert('TEXTO O FRASE DE LA VENTANA')" href="#" onclick="return false">
<img width="80" src="URL DE TU IMAGEN" height="40"/>
</a>

Sustituye:

TEXTO O FRASE DE LA VENTANA: por el texto o la frase que aparecerá en la ventana de aviso.

URL DE TU IMAGEN: por la dirección de tu imagen o tu icono.

Puedes probar el resultado pasando el cursor por el siguiente logo:



Nota:

Cuando tengas la imagen lista, debes incluir en el código el ancho (width="80") y el alto (height="40") para que las medidas sean correctas.

Tooltip con una imagen

Anteriormente expliqué cómo hacer un tooltip decorado y ahora le toca al tooltip con imagen.

Lo que vamos a aprender es la forma de hacer un link de manera que al pasar el cursor por encima aparezca una imagen...

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade estos bloques:

a.tooltip {
text-decoration:none;
color:
#000000;
position:relative;
}
a.tooltip span {
display:
none;
}
a.tooltip:hover span {
top:2em;
display:block;
left:5em;
position:absolute;
background: #ffffff;
}

Puedes cambiar el color que tendrá el enlace en la línea color: #000000; (encontrarás códigos de colores en la tabla de colores).

Guarda cambios.

Ahora siempre que quieras añadir el tooltip debes usar esta línea:

<a href="URL DE LA WEB O BLOG"
class="tooltip">TITULO DEL
LINK<span><img src="URL DE TU
IMAGEN"></span></a>

Sustituye...

URL DE LA WEB O BLOG por la dirección de la web o el blog, por ejemplo http://google.es/

TITULO DEL LINK por el título que tendrá el enlace, por ejemplo Google

URL DE TU IMAGEN por la dirección de la imagen que se mostrará al pasar el cursor por encima.

¡Así de sencillo! =)

Tooltip en el enlace de comentaristas

Anteriormente habíamos visto cómo hacer un tooltip tuneado para los links. Hoy veremos otra forma de usar los tooltips, pero, esta vez lo pondremos en el enlace de comentaristas. Te dejo una imagen para que te hagas una idea...

Diseño>edición HTML>expandimos artilugios

Busca esta línea en tu plantilla:

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

Bórrala y pega esta en su lugar:

<a expr:href='data:comment.authorUrl' rel='nofollow' title='FRASE O TEXTO DEL TOOLTIP'><data:comment.author/></a>

Sustituye FRASE O TEXTO DEL TOOLTIP por alguna indicación que quieres mostrar en el tooltip, por ejemplo "Clic aquí para ver el perfil".

¡Así de fácil! :-D

Tooltip decorado

Un tooltip es un cuadrito que aparece al poner el cursor sobre algún enlace. Normalmente el tooltip explica y nos informa sobre algo relacionado con el enlace.

Los tooltips son originalmente de un color amarillo-crema pero ahora podrás ponerlos del color que más te guste...

Para poner un tooltip en tu blog deberás agregar unos bloques en el CSS, de forma que podrás "tunear" tu cartelito.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega estas definiciones:

a.tooltip{
position: relative;
z-index: 24;
color: #707070;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #a3a3a3;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color: #707070;
}

a.tooltip:active{
z-index: 24;
color: #818283;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 1px solid #818283;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 14em;
background-color: #cfcfcf;
color: #707070;
font-size: 8pt;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Puedes cambiar el tooltip y decorarlo a tu gusto:

color: #707070; Esto es el color que tendrá el link.

color: #a3a3a3; Esto es el color que tendrá el link al pasar el cursor por encima.

color: #707070; Esto es el color que tendrá el link mientras hacemos clic.

border: 1px solid #818283; Determina el borde del tooltip. 1px es el grosor, solid el estilo (puedes ver los estilos de borde en esta entrada) y #818283 es el color.

background-color: #cfcfcf; Es el color de fondo que tiene el tooltip.

color: #707070; Es el color de la letra del tooltip.

font-size: 8pt; El tamaño del texto en el tooltip.

Una vez tuneado, guarda cambios.

Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:

<a href="URL DE LA PAGINA" class="tooltip">TITULO DEL ENLACE<span>EL TEXTO DEL TOOLTIP</span></a>

Sustituye...

URL DE LA PAGINA por la dirección de la web o blog que quieres enlazar, por ejemplo: http://google.es/

TITULO DEL ENLACE por el título del enlace, por ejemplo Google.

EL TEXTO DEL TOOLTIP por el texto que aparecerá en el tooltip, por ejemplo clic aquí para ir a Google.

¡Y ya tendrás tu tooltip!

Enlace o imagen de retroceso

En blogger tenemos los enlaces de navegación al final de las entradas, podemos ponerlos con imágenes, con texto o combinando las dos cosas.

Este truco es diferente, simplemente es una línea de javascript que puede incluirse en una frase o en una imagen y nos sirve para retroceder a la página anterior del blog.

Te dejo unos ejemplos aquí:

<- Volver

Volver

Puedes ponerlo en cualquier parte de tu blog.

Para poner el truco de retroceso con texto usa estas líneas:

<a href="javascript:window.history.back();" class="enlace"><b>Volver</b></a>

Para poner el truco de retroceso con imagen y texto usa estas líneas:

<a href="javascript:window.history.back();" class="enlace"><img src="URL DE TU IMAGEN" align="absmiddle" border="0" width="15" height="15">&nbsp;<b>Volver</b></a>

Sustituye URL DE TU IMAGEN por la dirección de tu imagen y configura el ancho (with) y el alto (height) para que la imagen quede en su tamaño real.

Puedes cambiar el texto "Volver" por algo que te guste más, por ejemplo "Retrocede"

Para poner el truco de retroceso con imagen usa estas líneas:

<a href="javascript:window.history.back();" class="enlace"><img src="URL DE TU IMAGEN" align="absmiddle" border="0" width="15" height="15"></a>

Sustituye URL DE TU IMAGEN por la dirección de tu imagen y configura el ancho (with) y el alto (height) para que la imagen quede en su tamaño real.

¡Suerte!

Listas con "bullets" personales

Te voy a enseñar a crear tus propias listas, listas con bullets personales. Los bullets son los circulitos que salen en una simple lista de blogger, pero con este truco, podrás poner tus bullets favoritos, por ejemplo...

• Ejemplo 1


• Ejemplo 2


• Ejemplo 3

Para hacer esta lista, usamos este código...

<ul style="list-style-image: url(URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
</ul>

Debes escribir lo siguiente:

URL DE TU IMAGEN O BULLET: la dirección (URL) de tu imagen o bullet, podrás encontrar muy lindos iconos en iconlook.

TEXTO DE LA LISTA: la frase o texto que irá en cada nivel, es decir, la palabra o frase que va en la lista ;-D

Si necesitas añadir más cosas a la lista, basta con añadir esta línea (siempre antes de la etiqueta </ul>)

<li>TEXTO DE LA LISTA</li>

Si quieres hacer una lista de enlaces, deberás usar este otro código:

<ul style="list-style-image: url(URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
</ul>

Debes incluir lo mismo que antes pero esta vez también deberás poner la URL DE LA WEB O BLOG, que podría ser http://google.es/ por ejemplo ;-D

Al igual que en el anterior código, si deseas añadir más palabras a la lista, añade esta línea (siempre antes de la etiqueta </ul>)

<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>

Y así quedaría la lista de enlaces...

• Google


• Yahoo


• You Tube

¡Suerte! :-D

Cómo hacer un link

Un link o enlace que sirve para vincular tu blog con otra bitácora o web. No es más que una frase o palabra a la que se le ha atribuído una URL o dirección.

Por poner un ejemplo, el título del link podría ser: Mi buscador favorito; Y al hacer clic, que pudiésemos acceder al sitio web Google.es

Los enlaces pueden insertarse tanto en una entrada como en un elemento de página o gadget html-javascript, que encontrarás en el apartado Diseño>Elementos de la página.

En cualquier caso utilizaremos este código:

<a href="DIRECCION DEL LINK">TITULO DEL LINK</a>

Si lo utilizas en una entrada, no olvides pegar la línea en el modo "Edición de HTML":



En el código, reemplaza la frase DIRECCION DEL LINK por la URL (dirección) de la página o el blog al que quieres enlazar, por ejemplo http://google.es/

Una vez introducida la dirección, atribuiremos el título. Para ello sustituye TITULO DEL LINK con una palabra o frase cualquiera, por ejemplo Google.

Si además quieres ponerle color al link, puedes hacerlo con esta línea de código:

<a style="color: rgb(CODIGO DEL COLOR);" href="DIRECCION DEL LINK">TITULO DEL LINK</a>

La inserción será la misma.

Para terminar, introduce en CODIGO DEL COLOR el valor hexadecimal de tu color / tono favorito usando la tabla de colores.

A continuación te dejo con dos ejemplos:

> Link sin color: El Balcón de Jaime

> Link con color: El Balcón de Jaime


Véase también:

- Imagen con enlace / Imagen con link
- Abrir links en una ventana nueva