Instala Links y Banners en movimiento

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.

Para los links de texto el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" >
< a href="URL del enlace 1">Nombre del enlace 1</a><br/>
< a href="URL del enlace 2">Nombre del enlace 2</a><br/>
< a href="URL del enlace 3">Nombre del enlace 3</a>
< /marquee>

Para los links con imágenes el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" scrollamount="1" onMouseOver="this.stop()" onMouseOut="this.start()">
< a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
< a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
< a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
< /marquee>

Personalización:
Debes cambiar los datos en color rojo por los tuyos.
<marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, left izquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.

El resultado es este:

Obtén un review de tu blog GRATIS

Agrega tu favicon aquí

Read More

Cómo quitar el subrayado de los links

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Quitar el subrayado de los links.

Si no te gusta que tus links aparezcan con la típica línea de subrayado, haz lo siquiente:

En tu plantilla, edición HTML, expandimos artilugios, y buscamos esto que está casi al principio antes de Header:

a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------

Ahora en ese código cambia "underline" por "none" y ya tienes links sin subrayar!

Read More

Cómo instalar un link sin hacer clíck

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Un link sin hacer "click".

En cualquier link tenemos que hacer click, o doble click para acceder a donde deseamos, pues con este código despídete de eso, con poner el ratón encima accederás directamente a la página web o blog quieras...

El código que debes usar es el siguiente:

<a href="URL DE LA PAGINA QUE QUIERAS ENLAZAR" onmouseover="window.location=this.href">NOMBRE DE LA WEB O BLOG</a>

Ejemplo (cuidado, desde que pongas el cursor encima te envia a la página)

Blogger

En URL DE LA PAGINA QUE QUIERAS ENLAZAR escribe la dirección de la web o blog, por ejemplo: http://google.es/

En NOMBRE DE LA WEB O BLOG escribe el nombre de la web o blog, por ejemplo: Google

Read More

Agrega una caja de links manualmente

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Caja de links

Una buena caja de links, donde puedes poner links de tus blogs, páginas web, o cualquier enlace interesante...

Nos dirigimos a diseño-añadir elemento de página (o gadget)- html/javascript

Y pegas este código:

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 300px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link4 <br />
#link5 <br />
#link6 <br />
#link7 <br />
#link8 <br />

</div>

-Anchura de texto: 200px; y altura: 300px; es el tamaño de la caja, puedes cambiarlo según su lugar o el tamaño de tu sidebar (barra lateral)

- Cambia el texto "#link1,#link2, #link3 " con tus links.
Podemos añadir más links simplemente copiando #link1

Read More

Cómo crear vínculos en el mismo artículo o entrada

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.

Este tutorial fue escrito por Jaime en el Balcón de Jaime, ¡Visitalo !

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Read More

Personalizar los links Entradas Recientes y Entradas Antiguas

Image via CrunchBase

En Blogger podemos ver al pie de las entradas unos links de navegación "Entradas más recientes", "Página principal" y "Entradas antiguas", para que el visitante tengas más facilidad de navegar en tu Blog, pero para que se vean de una forma diferente podemos personalizarlos poniendo un icono para cada link.

Primero nos vamos a Diseño > Edición de HTML > Expandimos los Artilugios y buscamos los siguientes códigos de cada link de navegación:

Entradas antiguas

<b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'&gt;<data:olderPageTitle/></a> </span> </b:if>

Página principal

<b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

Entradas más recientes

<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if>

Ya encontrado los códigos para cada navegación, lo que está en negrita tenemos que remplazarlo por el siguiente código:

<img src='URL de la Imagen'/>

Solamente tenemos que cambiar donde dice Url de la imagen por tu imagen que quieres colocar. Donde podrás encontrar iconos my buenos para la navegación serian en Find Icons o Icon Finder.

Artículo por V-Junker

Read More