Enlaces externos en el menú de páginas de Blogger

Gracias a las páginas de Blogger, a muchos se les ha hecho sencillo poder agregar menús.



En efecto, gracias a las páginas estáticas podemos mostrar entradas especiales de distinta forma (como la información sobre el autor del blog, contacto, etc).

Sin embargo, me han estado llegando algunas preguntas sobre cómo agregar en el menú de páginas un enlace externo, hacia una página de Facebook o Twitter, por ejemplo.



En Blogger, sólo tenemos disponible la opción de agregar una página en blanco; sin embargo, podemos agregar un enlace externo gracias a Blogger in Draft



1.§ Ingresamos a nuestra cuenta desde la página de Blogger in Draft.



2.§ Seleccionamos nuestro blog y vamos a la opción Páginas.



3.§ Damos click en Página nueva. Veremos dos opciones: Página en blanco y Dirección web. Escogemos la segunda opción.







4.§ Se abrirá una ventanita donde podemos colocarle un nombre y colocar la URL de la página, puede ser la página de nuestro Facebook o Twitter. Damos click a guardar.



Puedes ver la DEMO, donde hay un menú de páginas, con un enlace externo.

Sobre enlaces o links (5): abrir enlaces de listas en nueva ventana

Siguiendo con la serie de post referidos a los enlaces, hoy veremos cómo hacer para que los links de una lista se abran en pestaña o ventana aparte, ésto a pedido de algunos lectores.



Es muy sencillo hacerlo, sólo hay que seguir estos pasos:



1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.



2.§ Con ayuda de CTRL+F buscamos el título del widget de la lista de enlaces.



3.§ El código será parecido al siguiente, y agregamos lo que está en negrita:

<b:widget id='LinkList1' locked='false' title='PÁGINAS AMIGAS' 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>

4.§ Damos click a guardar y listo.

Eliminar numeración del gadget de archivos

Son varias las personas que me han preguntado cómo eliminar el número o cantidad de entradas que aparece en el gadget de archivos, el número que aperece entre paréntesis y que muestra el número total de entradas, ya sea por día, mes o año.
La forma de hacerlo, es bastante sencillo, como veremos a continuación:


1.§ Vamos a Diseño - Edición de HTML y damos click a Expandir plantilla de artilugios.

2.§ Localizamos el siguiente código con ayuda de Ctrl + F; aparecerá varias veces, así que borramos todas las veces que sea necesario:

(<data:i.post-count/>)

Damos click a guardar y listo.

Agregar créditos a las plantillas

Si tenemos una plantilla diseñada por nosotros, lo mas seguro es que querramos agregar algún crédito al final de nuestro blog.


En este caso, podríamos agregarlo mediante un gadget. Damos click a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript.

Ahí podemos pegar el siguiente código, agregando más enlaces si deseamos:

<a href="http://ELBLOG.blogspot.com/">NOMBRE BLOG©</a> :: Diseñado por <a href="enlace-a-nuestro-perfil">Autor</a> :: <a href="http://página">Política de privacidad</a> :: 2010

Por otro lado, si la plantilla que diseñamos es para que otras personas puedan descargarla y utilizarla, lo mejor sería agregar los créditos directamente en la plantilla. Para esto hacemos lo siguiente:

1.§ Vamos a Diseño - Edición de HTML y buscamos </body>.

2.§ Antes de </body> pegamos el siguiente código:

<div id='credito'>
<div id='cred'><a href="http://ELBLOG.blogspot.com/">NOMBRE BLOG©</a> :: Diseñado por <a href="enlace-a-nuestro-perfil">Autor</a> :: <a href="http://página">Política de privacidad</a> :: 2010</div>
</div>

3.§ Con el id que le hemos dado, podemos agregar algunos estilos al texto, a los enlaces (para destacarlos) o agregar un fondo distinto a esa parte de nuestro blog. Para ello, buscamos ]]></b:skin> y antes de éste, agregamos los siguientes estilos:

#credito{ /*Para dar fondo o borde a la sección de créditos */
background: #CCF94F;
border-top: 2px dashed #5BDAF3;
height: 20px;
padding: 10px 0;
}

#cred { /*Color del texto y alineación */
color: #BAAD83;
text-align: center;
margin: 0 auto;
width: 600px;
}

#cred a { /*Color y estilos de los enlaces */
color: #0A938B;
}

En lugar de un color de fondo, podríamos agregar una imagen si así lo queremos.

4.§ Damos click en Vista previa y si toda esta bien, guardamos los cambios.

Mitos sobre los SiteLinks (enlaces del sitio)

Hoy vamos a tratar de aclarar algunas cosas sobre los Sitelinks ya que he recibido bastantes preguntas sobre este tema...Pero quizás deberíamos de empezar por aclarar que es un SiteLink.

¿Qué es un SiteLink?

Los SiteLinks son enlaces que ayudan al usuario a encontrar la información que busca de una manera más rápida, o si se quiere, son los enlaces más relevantes de un sitio, porque contienen información útil o importante.
En otras palabras, los enlaces se sitio son accesos directos de las secciones más importantes de nuestro blog o web.
Los enlaces de sitio los podemos ver debajo del nombre de nuestro blog o web en los resultados de búsqueda, como podemos ver en esta imagen:


Ahora que ya sabemos qué es un SiteLink, pasemos a las preguntas frecuentes sobre ellos, pero que sólo contituyen "mitos".

1.§ Primer mito: para que se muestren los enlaces de sitio de una página es necesario tener un dominio propio

Esto es rotundamente falso. En las consultas que me hacen a diario siempre me preguntan dónde se puede conseguir un dominio gratuito para así obtener sitelinks.
Los SiteLinks no dependen en lo absoluto de que una página tenga un dominio del tipo www.ejemplo.com.
No digo que sea malo poseer un dominio propio, pero es un error suponer que al adquirir un dominio se asegura que aparezcan los SiteLinks en los resultados de búsqueda.

2.§ Segundo mito: para que se muestren los enlaces de sitio de una página es necesario que el blog o web tenga una determinada cantidad de años online

Otra afirmación falsa. Los SiteLinks no dependen de la cantidad de tiempo que tenga una página. Me preguntan con frecuencia que cuántos años se debe esperar para que aparezcan los enlaces de sitio, pero como dije, no depende del tiempo.

Los SiteLinks dependen de otros factores que desarrollaremos en un futuro post. En este, sólo estamos aclarando alguna información falsa sobre los enlaces de sitio.

2.§ Tercer mito: para que se muestren los SiteLinks mi blog o web necesariamente debe tener un PageRank alto

Esto también es falso, en cierta forma. No es que sea "necesario" que el PG sea de 8 o 10. Hay sitios que con un PageRank de 4 o 5 puntos ya tienen SiteLinks, lo que demuestra que no es algo vital que una página posea un PG muy alto.
Por otro lado, si una página ya tiene un PageRank tan alto es de suponer que ya tiene Sitelinks.

Estos son los mitos más frecuentes que encontré en las preguntas y consultas que me envían. Como dije en la entrada, en un próximo post hablaremos de algunos aspectos que sí nos pueden ayudar a que nuestra página muestre los SiteLinks.

Sobre enlaces (4): abrir enlace de los post en nueva ventana

Vamos a ver cómo hacer para que, cuando demos click a los títulos de los post, éstos se abran en una nueva ventana.

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos el siguiente código añadiendo lo que está en negrita.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id' target='_blank'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link' target='_blank'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' target='_blank'><data:post.title/></a>

3.§ Damos click a guardar.

También te puede interesar:

» Sobre enlaces o links (1): lo básico

» Sobre enlaces o links (2): abrir etiquetas en una nueva ventana

» Sobre enlaces (3): abrir todos los links en una nueva ventana

Efecto arco iris para los enlaces

Un efecto muy bonito y sencillo de lograr; consiste en que cada vez que pasamos el mouse sobre un enlace, este se pone de distintos colores.
Para ver un ejemplo, pasar el mouse sobre cualquier enlace de mi blog de pruebas.

Para lograr este efecto seguimos los siguienets pasos:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>

//Arco iris

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function ChangeColor()
{
    objActive.style.color = makeColor();
}

function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}

//]]>

</script>

3.§ Si queremos podemos cambiar la velocidad con var rate = 20. Damos click a guardar y listo!

Tooltips sencillos»Ventanas de información de los links

Hoy vamos a hablar sobre los Tooltips. ¿Qué es un Tooltip? Pues es la ventanita, generalmente de color gris o amarillo, que aparece cuando pasamos el mouse sobre un link o enlace. Lo usamos para brindar una pequeña información sobre lo que encontraremos al acceder a dicho link.

Hoy haremos algunos Tooltips sencillos y en futuros post, veremos cómo hacer Tooltips más elaborados.

► Si deseamos poner un Tooltip en un enlace de texto, lo haremos de la siguiente forma:

<a href="AQUI-URL-DEL-ENLACE" title="AQUÍ-LA-DESCRIPCIÓN-DEL-ENLACE">NOMBRE-DEL-ENLACE</a>

El resultado será el siguiente (pasar el mouse por encima del enlace):

Diversas & Variadas

► Si deseamos poner un Tooltip en un enlace con imagen, lo haremos de la siguiente forma:

<a href="AQUI-URL-DEL-ENLACE" title="AQUÍ-LA-DESCRIPCIÓN-DEL-ENLACE"><img src="AQUÍ-URL-DE-LA-IMAGEN/></a>

Y el resultado será el siguiente:


Sencillo, verdad? En próximos post haremos Tooltips más elaborados y con más estilos.

Sobre enlaces (3): abrir todos los links en una nueva ventana

Hay quienes desean saber cómo hacer para que todos los enlaces de su blog se abran en una nueva ventana. De ser posible, lo es y además es muy sencillo, pero hay que reparar en que cuando se dice que abre todos los enlaces en una nueva ventana, es porque en verdad afecta a TODOS los enlaces incluyendo a aquellos, que por ejemplo, usamos para expandir o recoger.

Bien, después de estas palabras previas podemos empezar.

♠ Vamos a Diseño/ Ediciñon de HTML y con ayuda de CTRL+F buscamos <head> y después de este pegamos la siguiente línea:

<base target="_blank" />

Como les dije, era bastante sencillo .

Cómo eliminar el número de las etiquetas

He recibido con frecuencia esta pregunta, ¿cómo eliminar el número que aparece al lado de las etiquetas? Pues ahora les explicaré cómo se hace:

♠ Vamos a Diseño/ Edición de HTML y expandimos plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos:

<span dir='ltr'>(<data:label.count/>)</span>

En algunas plantillas pueden haber dos códigos iguales a este; el código que borraremos será el primero que encontremos y no el que se encuentra más abajo.
♠ Borramos toda esa línea y guardamos los cambios.

Aquí una muestra del antes y el después:

Sobre enlaces o links (2): abrir etiquetas en una nueva ventana

En una nota anterior habíamos visto algunos códigos generales sobre los enlace o links; hoy veremos cómo abrir solamente las etiquetas del blog en una nueva ventana.

Las etiquetas nos permiten, de alguna forma, buscar algún post o entrada mediante el uso de palabras clave. Ahora vamos aver cómo hacer para que solamente las etiquetas, no todos los enlaces, se habrán en una nueva ventana.
Para ello, seguimos los siguientes pasos:

♠ Vamos a Diseño/ Edición de HTML y damos click a Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos el siguiente código:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

En algunas plantillas hay dos códigos iguales; el que vamos a usar es el primero no el segundo.
Borramos el código anterior y pegamos el siguiente:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_blank'>

♠ Damos click a guardar y listo, sólo las etiquetas se abrirán en una nueva ventana, pero los demás enlaces no.

Link automático

En un comentario me hicieron una pregunta curiosa, ¿había alguna forma para un link se abriera automáticamente simplemente pasando el mouse por encima de éste? La verdad, no se me había ocurrido, pero indagando encontré la respuesta en un foro.

Sí es posible conseguirlo y además es muy sencillo. Bastará con poner esto:

<a href="URL" onmouseover="window.location=this.href">Aqui-nombre-enlace</a>

Donde cambiamos URL por la dirección de la página a la que queremos enlazar y cambiamos Aqui-nombre-enlace por el nombre que deseemos ponerle al enlace.

El resultado:

Wikipedia

► Y si deseas personalizar el enlace, mira este post

Sobre enlaces o links (1): lo básico

Vamos a ver todo lo referido a los enlaces o links; cómo crear un enlace simple, una imagen que sirva de enlace, efectos (hover, visited,etc) y otros...Claro que veremos todo esto poco a poco.

Hoy hablaremos de algunas cosas simples pero muy básicas.

► Para crear un enlace (que podremos usar an algún menú, entrada o en la sidebar) deberemos de usar la etiqueta anchor ( <a> </a> ) y el atributo href; bueno dejándonos de tecnisismos, para crear un enlace deberemos de poner lo siguiente:

<a href="URL">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo: Diversas & Variadas

► Esa es la base, usaremos esta "estructura " cada vez que querramos agregar un enlace...¿Y qué pasa si queremos que en vez de texto sea una imagen la que nos sirva de enlace? Es otra pregunta frecuente que me hacen; parece que debería de haber algún "script especial", pero no es así.
Debemos usar la estructura anterior, pero sustituir el texto por una imagen de esta forma:

<a href="URL"><img src="URL-DE-LA-IMAGEN"></a>

Ejemplo:



► Y si queremos que el enlace se abra en una nueva página? Solo agregaremos a nuestra estructura base el atributo target, no importa si el enlace será con texto o con imagen, de la siguiente forma:

<a href="URL" target="_blank">EL-NOMBRE-DEL-ENLACE</a>

Ejemplos en texto e imagen:

Diversas & Variadas



► También, si queremos podemos usar texto e imagen al mismo tiempo en un enlace...Y ya deben de saber cómo hacerlo, pero de todas formas pongo como quedaría la estructura.

<a href="URL">EL-NOMBRE-DEL-ENLACE<img src="URL-DE-LA-IMAGEN"></a>

Diversas & Variadas

► Creo que éso sería todo por hoy, lo básico, hay todavía mucho que hablar sobre los enlaces y muchas formas de personalizarlos. Pero antes de irme, los dejo con la estructura de un enlace a correo electrónico:

<a href="mailto:aquitucorreo@electrónico">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo:

Contacto

Efecto pushbutton (botón-pulsar)

Un efecto muy ineteresante que se puede aplicar tanto a imágenes que sirvan de enlace como a simples enaces de texto.

El efecto provoca que el enlace parezca pulsado o como si se "hundiera". Pero, para saber de que trata el efecto pushbutton, aquí les dejo una muestra, pasad el mouse por encima del enlace:



Queréis hacerlo, es bastante sencillo:

♠ Para empezar, vamos a Diseño/ Edición de HTML.
♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de este pegamos:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}

Luego de esto damos click a guardar plantilla.

♠ Ahora cada vez que querramos agregar un enlace con este efecto deberemos de hacerlo del siguiente modo:

<span class="pushbutton"><a href="AQUÍ-ENLACE-A-PÁGINA"><img src="URL-DEL-BOTÓN"></a></span>

Para agregar un enlace con texto y que tenga el efecto botón-pulsar deberemos de borrar <img src="URL-DEL-BOTÓN"> y en su lugar poner el texto.

Scroll de links » enlaces en movimiento

Es un buena opción para presentar los enlaces que querramos colocar en la sidebar del blog.Vamos a ver cómo se hace:

El código que usas es éste:

<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> <br>
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> </marquee>

Explicación:

♠ marquee direction es el que orienta el movimiento de los enlaces [hacia arriba (up),abajo (down),a la derecha (right) o a la izquierda (left)]
♠ scrollAmount es la velocidad de movimiento. A mayor número, mayor será la velocidad.
♠ text-align es la posición de los enlaces [centrados (center),a la derecha (right)o a la izquierda (left)]
♠ width es el ancho de la tabla y height es el alto.
♠ border es el grosor del borde de la tabla.
♠ #000000 podemos reemplazarlo por el color que querramos (en hexadecimales)

Ejemplo:







Ahora que ya sabemos cómo hacerlo, podemos modificar el código a nuestro gusto y lograr efectos interesantes...Les dejo algunas ideas:







como este otro...:







o tal vez éste:







...En fin, hay muchas formas de personalizarlo, cambiando los bordes, colores,tamaños, etc.
Ya saben, si tienen alguna duda, háganmela saber.

Caja para colocar el enlace (textarea)

Y bien, ahora que tenemos listo la imagen del botón para que nos enlacen , estamos listos para poner la cajita donde va el código que deben copiar nuestros lectores para enlazarnos desde su blog...Bueno, vamos a ello!

Para hacer la caja usamos el siguiente código:

<textarea rows="3" cols="15">
<center><a href="LA URL DE TU BLOG" target="_blank">
<acronym title="NOMBRE DE TU BLOG">
<img src="LA URL DE LA IMAGEN QUE SERVIRÁ DE BOTÓN"/>
</acronym></a></center>
</textarea>

♠ Si deseamos, podemos moficar rows, que es el alto y cols, que es el ancho de la cajita

Y uniendo lo hecho en el post anterior con este de la cajita, en tu sidebar se verá así:




<center><a href="http://diyva.blogspot.com/" target="_blank"><acronym title="Diversas & Variadas"><img src="http://img76.imageshack.us/img76/473/enlacevx0.jpg"/></acronym></a></center>

♠ Otra buena opción sería usar una textarea que nos permita seleccionar todo el código con un sólo click,como ésta:

<center><a href="http://diyva.blogspot.com/" target="_blank"><acronym title="Diversas & Variadas"><img src="http://img76.imageshack.us/img76/473/enlacevx0.jpg"/></acronym></a></center>

Para hacerlo, agrega wrap="off" class="codigo" onclick="this.select() al código anterior.

♠ Y claro, también podemos agregarle color con style="background-color:#40BF73;"

<center><a href="http://diyva.blogspot.com/" target="_blank"><acronym title="Diversas & Variadas"><img src="http://img76.imageshack.us/img76/473/enlacevx0.jpg"/></acronym></a></center>

Diviértanse y jueguen con los códigos :)

Botón para que nos enlacen

Revisando los mensajes que me llegan al correo,vi uno me me dejó pensativa. El mensaje decía que cuáles eran las cosas básicas que debía de tener un blog y cómo podía hacerlas.
Bien, hay varios elementos básicos en un blog...Y para comenzar con uno, vamos a ver cómo hacer un botón para que enlacen nuestro blog.

Para hacerlo, debemos de tener lista una imagen pequeña; generalmente es una imagen en pequeño de la cabecera del blog, como por ejemplo, la imagen que uso como botón de enlace:



Vieron que aún no tiene enlace?...Pues vamos a crearle uno.

Para nuestro botón, necesitaremos tener la URL del mismo, para lo cuál tendremos que subirlo a nuestro hosting favorito (Imageshack, Photobucket,etc). Una vez que "subamos" la imagen, tendremos la URL de la misma, y estaremos en condición de crear el enlace.

Para hacer ésto, copiaremos el siguiente código:

♠ Para que el enlace se abra en una ventana emergente:

<a href="http://TUBLOG.blogspot.com/" target="_blank"><acronym title="NOMBRE DEL ENLACE AL PASAR EL CURSOR"> <img src="LA URL DE LA IMAGEN DE ENLACE"/></acronym></a>

♠ Para que el enlace de tu blog se abra en la misma página:

<a href="http://TUBLOG.blogspot.com/"><acronym title="NOMBRE DEL ENLACE AL PASAR EL CURSOR"> <img src="LA URL DE LA IMAGEN DE ENLACE"/></acronym></a>

Y un ejemplo de enlace que se abre en ventana emergente:



Si pasan el cursor sobre el botón, se verá el nombre del blog.

Como vieron es super sencillo, ahora falta hacer una caja para que otras personas puedan copiar el código y tener un enlace a su blog...Pero eso lo veremos más adlante...Mientras, vayan trabajando con la imagen de enlace.

Códigos básicos

Hace unos días Fabiola comentaba lo siguiente:

Es muy poco demoroso estar leyendo la plantilla completa asi que si pudieras darme algún truco para buscar en la plantilla (si es que existe ) te lo agradecería.

Este comentario me dio la idea de hacer un post sobre lo que podríamos llamar "trucos" o códigos básicos, que son sencillos, pero que nos facilitan las cosas. Bueno, veamos algunos:

♠ Texto en negrita

<b>TEXTO</b>

Ejemplo: Hola

♠ Texto en cursiva:

<i>TEXTO</i>

Ejemplo: Hola

♠ Negrita y cursiva al mismo tiempo:

<b><i>TEXTO</i></b>

Ejemplo: Hola

♠ Texto o párrafo con sangría:

<blockquote>TEXTO</blockquote>

Ejemplo:

No tenía miedo a las dificultades: lo que la asustaba era la obligación de tener que escoger un camino. Escoger un camino significaba abandonar otros.
Paulo Coelho

Puedes usarlo para citar tus frases favoritas o destacar algún texto!

♠ Buscar un código en la plantilla:

CTRL+F

Se abrirá un cuadro de diálogo; ponemos el texto o código a buscar, aceptar y listo!

♠ Crear un enlace:

<a href="URL">TEXTO</a>

Ejemplo: Diversas & Variadas

También podemos usarlo para crear un enlace con nuestro e-mail!

♠ Crear un enlace que se abrirá en una ventana emergente:

<a href="URL" target="_blank">TEXTO</a>

Ejemplo: Diversas & Variadas

También podemos poner en vez de texto, una imagen con enlace y escogemos si queremos que se abra en una ventana emergente o en la misma ventana !

♠ Añadir una imagen:

<img src="url-de-la-imagen" />

Ejemplo:

♠ Escribir texto en distintas líneas (este truco sobretodo les servirá cuando quieran agregar varios códigos en un mismo gadget; por ejemplo si quieren poner botones de enlaces, verán que aparecen junto, si usan este código, harán que los botones están uno debajo de otro)

<div align="left">TEXTO-CÓDIGOS-ETC</div>

Ejemplo:
Diversas
Variadas

♠ Línea con color:

<table bgcolor="#C3D9FF"><tbody><tr><td>TEXTO</td></tr></tbody></table>

Ejemplo:

Diversas & Variadas

Podemos usar este código para resaltar un enlace, por ejemplo, o un texto o frase especial!

Pueden aplicarlos, o mezclarlos, como mejor les parezca; si tienen alguna duda, háganmela saber y veré cómo puedo ayudarlos.

Ligazóns de interese

• 




• 




• 




• 




• 




• 




• 




• 




• 




• 




• 




• 




• 




• 




• Technorati Profile
  
  




• 

• 




• 




• 




• 




• 




• 




• 




• 





• 



• 




• 




• 




• 




• 




• 




• 




• 




• 




•