Eliminar subrayado de los enlaces en las nuevas plantillas

Hoy veremos cómo eliminar el subrayado de los enlaces o links en la plantillas de diseño. Si usas las plantillas antiguas o clásicas, puedes ver este tutorial.

Para esto, haremos lo siguiente:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos lo siguiente:

<Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

3.§ Cambiamos los dos underline por none

4.§ Ahora para quitar el subrayado del título de los post que aparece cuando acercamos el cursor sobre el mismo, haremos lo siguiente. Nuevamente,damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos esto:

h3.post-title a:hover {
color: $(link.hover.color);
text-decoration: underline;
}

Es probable que en tu plantilla el contenido aparezca diferente, puedes guiarte por la primera línea de código.

5.§ Ahora sustituímos text-decoration: underline; por text-decoration: none;

6.§ Damos clic a Guardar y listo.

Texto en burbuja, tachado y al revés en Blogger

En un post antiguo, les había enseñado cómo agregar el efecto de tachado a nuestro texto del blog. Hoy les traigo una herramienta online llamada DiverText que no sólo nos permite añadir ese efecto a nuestro texto (tachado) sino que nos permite agregar el efecto de texto al revés y de texto en burbuja, lo que le dará un toque especial y divertido a nuestros post, como este ejemplo:

H̶o̶l̶a̶
ʎos
Ⓙⓔⓢⓢⓘⓒⓐ

La herramienta es muy sencilla de usar. Lo único que tenemos que hacer es elegir uno de los efectos (tachar texto, voltear texto, texto en burbuja), escribimos nuestro texto en la caja superior y en la caja inferior nos generará el texto con el efecto seleccionado. Finalmente, copiamos el texto y lo pegamos a nuestra entrada de Blogger o a nuestras redes sociales.

DiverText

Mostrar gadgets/widgets en una página específica

Cuando añadimos un gadget o widget a nuestro blog, por defecto se muestra no sólo en la página principal sino en las páginas de los post. Sin embargo, hay ocasiones en las que puede sernos útil mostrar determinados widgets en páginas específicas. Éste es el tema de hoy.

GADGET/ WIDGET VISIBLE SÓLO EN LA PÁGINA PRINCIPAL

1.§ Tenemos por ejemplo un widget llamado "Recomendados" y queremos que sólo sea visible en la página principal y no en las páginas de las entradas (post).
Lo primero que haremos será irnos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.
Le damos a Expandir plantilla de artilugios.

2.§ Con ayuda de Ctrl+F buscamos nuestro widget por su nombre (en el caso del ejemplo, buscaría Recomendados)

3.§ La estructura de nuestro widget será similar a ésta:

<b:widget id='HTML5' locked='false' title='Recomendados' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

4.§ Para que el gadget se muestre sólo en la página principal, añadiremos las dos líneas que están en negrita en los lugares que se indica:

<b:widget id='HTML5' locked='false' title='Recomendados' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

GADGET/ WIDGET VISIBLE SÓLO EN LAS PÁGINAS DE LOS POST

1.§ Repetimos los pasos 1.§, 2.§ y 3.§ del apartado anterior.

2.§ Agregaremos las líneas de código tal como se muestran:

<b:widget id='HTML5' locked='false' title='Recomendados' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

GADGET/ WIDGET VISIBLE SÓLO EN UN POST ESPECÍFICO

1.§ Repetimos los tres primeros pasos del primer apartado .

2.§ Agregaremos las siguientes líneas en negrita:

<b:widget id='HTML5' locked='false' title='Recomendados' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Reemplazar por URL de la entrada"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3.§ Donde dice Reemplazar por URL de la entrada colocamos la url del post o entrada en donde queremos que se muestre el widget.

PollCode » para crear encuestas

PollCode es una herramienta que nos ayudará a crear encuestas de forma muy fácil, proporcionándonos después el código para insertar la encuesta en nuestro blog.

Para crear las encuestas, no es necesario crear una cuenta, aunque es lo recomendable. Seguimos los pasos que nos indican, escribiendo la pregunta y las alternativas.

Además, podemos personalizarlo a nuestro gusto. Aquí una muestra:

Qué navegador usas?
	Internet Explorer
	Opera
	Mozilla Firefox
	Google Chrome
	Safari

PollCode

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.

Solución del test en Blogger

Hace un tiempo vimos cómo agregar un test en Blogger; el problema que surgía era que se podían marcar todos los radio-button y todos quedaban seleccionados, lo que no quedaba muy bien.

Así que, analizando nuevamente el código, intenté alguna forma de solucionarlo y afortunadamente la encontré. Es bastante sencilla: sólo debemos de agregar algunos valores y cambiar un poco el código.

1.§ Entonces vamos a Diseño - Elementos de la página - Añadir un gadget- HTML/Javascript y el código a pegar sería el siguiente:

<center><div style="background-"&gt;<span >AQUÍ-LA-PREGUNTA</span></div></center><div style="background-">

<input name="b1" value="V1" onclick="alert('Correcto');V1.checked;" type="radio">ALTERNATIVA1<br>

<input name="b1" value="V2" onclick="alert('Incorrecto');V2.checked;" type="radio">ALTERNATIVA2<br>

<input name="b1" value="V3" onclick="alert('Cerca');V3.checked;" type="radio">ALTERNATIVA3<br>

<input name="b1" value="V4" onclick="alert('Inténtalo de nuevo');V4.checked;" type="radio">ALTERNATIVA4<br></div>

De modo que el resultado será el siguiente:

¿Cuál es la capital de Bielorrusia
Ulster
San Petersburgo
Minsk
Sarajevo

Crear un test en Blogger

Si bien Blogger cuenta con un gadgets de Encuestas, no cuenta con otro tipo test. Puede que un Tets parezca igual que decir Encuesta, pero no lo es.

En una encueta no hay repuestas verdaderas o falsas, correctas o incorrectas, lo que si hay en un Test.

Por ello, y antes las preguntas que me hicieron sobre cómo crear un test, de forma sencilla, vamos a ver cómo conseguirlo.

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget- HTML/Javascript.

2.§ Ahora pegaremos el siguiente código:

<center><div style="background-"&gt;<span >AQUÍ-LA-PREGUNTA</span></div></center><div style="background-">

<input name="b1" onclick="alert('Correcto');b1.checked;" type="radio">ALTERNATIVA1<br>

<input name="b2" onclick="alert('Incorrecto');b2.checked;" type="radio">ALTERNATIVA2<br>

<input name="b3" onclick="alert('Cerca');b3.checked;" type="radio">ALTERNATIVA3<br>

<input name="b4" onclick="alert('Inténtalo de nuevo');b4.checked;" type="radio">ALTERNATIVA4<br></div>

Reemplazamos los datos y listo

El resultado será el siguiente:

¿Cuál es la capital de Bielorrusia
Ulster
San Petersburgo
Minsk
Sarajevo

Formulario de contacto con HTML

En un post vimos cómo hacer un formulario de Acceso o Login. Hoy vamos a ver cómo hacer un formulario de contacto.

1.§ Lo que hacemos es copiar el siguiente código, ya sea en la sidebar (Diseño- Elementos de la página- Añadir un gadget- HTML/Javascript Añadir) o en una entrada (Creación de entradas- Nueva entrada). El código mencionado es el siguiente:

<FORM action="mailto:tucorreo@correo.com" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA></TD></TR><TR><TD>&nbsp;</TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM>

2.§ Cambiamos donde dice tucorreo@correo.com por nuestro correo. Damos click a Guardar o Publicar, dependiendo si lo pegamos en un gadget o en una entrada.

3.§ Este paso no es obligatorio, con los pasos anteriores ya tendremos nuestro formulario de contacto. Este paso es sólo para darle algún estilo al formulario como color de borde, color del botón, etc.

Entonces, personalizarlo, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

textarea {
background: #F6F4DA;
border: 1px solid #B07C3F;
}

input {
background: #F6F4DA;
border: 1px solid #B07C3F;
margin-right: 5px;
}

Si desemos podemos cambiar los colores. Damos click a guardar y listo.

El resultado será el siguiente:

Nombre:
E-mail:
Mensaje:

Opacidad en imagen al pasar el mouse

En una entrada anterior habíamos visto cómo añadir opacidad a una imagen y agregarle texto encima; lo que vamos a ver hoy es algo similar , sólo que la imagen se va a poner opaca al pasar el mouse:



Para conseguirlo es muy sencillo, bastará con usar el siguiente código:

<img src="URL-imagen" width="500" height="375" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

» Cambiaremos width="500" height="375" por el ancho y el alto de la imagen respectivamente.

A este código podemos darle infinidad de usos: por ejemplo para añadir el efecto a las banderitas de un traductor o a los marcadores sociales, todo esto lo veremos en próximos post.

Ampliar imágenes con efecto onmouseover

Hace un tiempo habíamos visto cómo ampliar las imágenes, pero haciendo clik. Hoy veremos una forma muy sencilla de ampliar las imágenes con sólo pasar el mouse sobre la imagen.

Lo único que tendremos que hacer será pegar el siguiente código en la entrada cada vez que deseemos poner alguna imagen con este efecto. El código es el siguiente:

<img src="URL-IMAGEN" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

Explicación:

» "this.width=400;this.height=300;" es el ancho y alto que tendrá la imagen cuando se agrande.
» "this.width=200;this.height=150;" width="200" height="150" es el ancho y alto de la imagen reducida. Recordar que en este caso ambos width y height deben ser iguales.

Ejemplo:



Referencia : 86707359.at.webry

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.

Navbar transparente

Hace tiempo vimos algunas opciones de lo que podíamos hacer con la navbar (como ocultarla, personalizarla o aplicar un botón para ocultarla y mostrarla). Hoy haremos algo diferente, haremos que la navbar quede como oculta por un velo gracias a la aplicación de transparencia.

♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y encima de este pegaremos el siguiente código:

#navbar-iframe {
filter:alpha(opacity=20);
opacity:.20;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /*--IE 8 Transparency--*/
}

Aquí les dejo una imagen de muestra con el antes y el después.

Formulario de Login a tu cuenta de blogger

Una de las utilidades que nos ofece la navbar es el enlace que tiene para acceder a nuestra cuenta; sin embargo, por estética y otras razones muchos la quitan.
Lo que nos queda es poner algún enlace a blogger para acceder a nuestra cuenta, etc.
Pero encontré una forma sencilla de acceder a nuestra cuenta de blogger, poniendo un formulario de acceso o login en la sidebar de nuestro blog.

Los pasos para agregarlo son los siguientes:

♠ Vamos a Diseño/ Elementos de página/ Nuevo gadget y selessionamos la opción HTML/CSS.
♠ Pegamos el siguiente código y damos click a guardar:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<br/>
<div>
<label for="Email"> Nombre de usuario (e-mail):
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>

</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="¿Ha olvidado su contraseña?">?</a>)

<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>

</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>

</form></div>

♠ Ahora, para darle alguna propiedad CSS a nuestro formulario como color de borde, color del botón, etc, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

#Email, #Passwd{
background: #F6F4DA;
border: 1px solid #B07C3F;
}

#signin-btn-ns {
color: #fff;
background: #B07C3F;
border: 1px solid #B07C3F;
}

Si deseamos podemos cambiar los colores del código por otros y también el tipo de borde.
♠ Damos click en guardar y listo.

Y si hemos seguido todos los pasos el formulario se verá así en nuestra sidebar:

Nombre de usuario (e-mail):

Contraseña: (?)

Si tienen alguna duda, será bienvenida :)

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 .

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

Las imágenes en Blogger

Hay algunas preguntas que recibo con frecuencia sobre las imágenes que suben a blogger. Y las preguntas más frecuentes (aunque hay más) son estas dos: cómo quitar el enlace de la imagen y cómo hacer para que la imagen enlace a alguna web en especial.

Aquí las respuestas:

Las imágenes que subimos a blogger tienen esta estructura, claro que cambiará algunos datos numerícos o el nombre de la imagen, pero en general tienen esta estructura:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Ahora empecemos a resolver las preguntas:

CÓMO QUITAR EL ENLACE DE UNA IMAGEN

En el código de la imagen (antes mencionado) borraremos las siguientes partes resaltadas:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Resultado:



CÓMO HACER PARA QUE LA IMAGEN ENLACE ALGUNA WEB

Para hacer que la imagen enlace alguna página en especil, cambiaremos lo resaltado en naranja por la URL del enlace que deseemos

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s1600-h/el-delfin-poster-diversas-jessica.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf-ENoKF3O-CGKJg4iL-83XpJVAn9fcioazy8AJHrS-4qBdGzT4z7OjckAnWOGLSHFoyLsLcSG-rqGC3oerHwCDSiwOQzwrQzbToSp_u00fRBkXKx87nlrYmYubtk7hz82O_ymFGGLmc/s400/el-delfin-poster-diversas-jessica.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5347674793752714210" /></a>

Resultado:



Como dije al principio hay varias preguntas que se hacen con frecuencia sobre las imágenes que subimos a blogger y las resolveremo en post siguientes.

Escribiendo texto tachado

Iba a publicar una nota sobre un menú...Pero la escribiré después, porque estuve leyendo un mensaje del mail donde me preguntaban como lograr que el texto esté así,tachado..

Para el amigo que me envió el mail y para quien también quiera saber cómo lograr un texto tachado, aquí va la rspuesta. Es bastante sencillo, bastará agregar <strike> y </strike> al texto, de la siguiente forma:

<strike>AQUITEXTO-EJEMPLO</strike>

Resultado:

AQUITEXTO-EJEMPLO

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