Eliminar el enlace (link) de una imagen en Blogger

Cuando insertamos una imagen o fotografía en nuestro blog, ésta lleva un enlace incorporado, es decir, podemos hacer clic en ella y de esta forma la imagen es ampliada. Mira este ejemplo:

Haz clic en la imagen

Por otro lado, si eliminamos el enlace en esa fotografía, es decir, que no se pueda hacer clic en ella, éste será el resultado:

Intenta hacer clic en esta imagen

Cuando insertamos una imagen en nuestro blogspot lo hacemos de la siguiente forma:

Si luego entramos en Edición de HTML veremos que la imagen que acabamos de adjuntar nos aparecerá de la siguiente forma:

Por tanto, todo el texto que he seleccionado es el que se debe borrar para dejar la imagen sin enlace en una entrada, es decir, tendrá esta estructura:

<img border="0" src="http://2.bp.blogspot.com/_aDt36_21zpk/S17zvWyoHVI/AAAAAAAACl0/dgTpZznOA2A/s320/imagen.JPG" />

También puedes emplear esta estructura para adjuntar la imagen que quieras contando sólo con el enlace (http://...imagen.JPG) de la misma.

Tabla de contenidos con las ultimas actualizaciones

Anteriormente ya vimos cómo crear un índice para blogspot, que nos era muy útil porque nos ordenaba todas las entradas por orden alfabético y por etiquetas, y además nos indicaba cuáles eran las entradas publicadas más nuevas. Ahora os traigo un nuevo script de mano de abu-farhan que nos va a permitir poner una tabla de contenidos en blogspot.

Pero, ¿para qué es útil esta tabla de contenidos en tu blog? Pues nos es útil para tener un índice ordenado por fecha de publicación de entradas, y lo más importante: ayudar a tus visitantes con un mejor orden de contenidos, que seguro te lo agradecerán.

¿Cómo instalarlo? Bien sencillo:

1) Vamos a Creación de entrada->Nueva entrada.
2) Ponemos el título que queramos, por ejemplo "Últimas actualizaciones" o "Tabla de contenidos"
3) Como texto únicamente pondremos el siguiente script:

---

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://www.quierocrearunblog.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

---

Tan sólo debes cambiar la dirección de mi blog por la del tuyo.

4) Aún queda una cosa más: debes elegir la fecha de esta entrada. Como no la consideraremos una entrada normal, lo más lógico sería poner una fecha anterior a todas nuestras entradas. Yo por ejemplo le he puesto como fecha un día antes a la primera entrada que realicé. ¿Cómo modificar la fecha de publicación de una entrada?

En Opciones de entrada cambiamos la fecha en Programado para. Ya habremos terminado. Publicamos la entrada y listo.

---

¿Quieres ver un ejemplo? Visita las últimas actualizaciones de mi blog.

---

Copian el contenido de mi blog. ¿Qué puedo hacer?

¿Copian el texto y/o imágenes de tu blog sin compasión? No te quedes de brazos cruzados. He aquí una pequeña guía para saber qué hacer en estos casos.

Antes de todo, recomiendo tener una licencia de Creative Commons en tu blog o web. También deberías informarte sobre el plagio vs Creative Commons en esta web.

1) Contacta con el plagiador para que retire el contenido o te cite en sus fuentes.

2) Si no cesa su actividad puedes denunciarlo a:
- Blogger (si tu blog es de Blogger) en esta dirección.
- Wordpress (si tu blog es de Wordpress) vía contacto de Wordpress.

3) Puedes mandar un e-mail a google a para que retire el contenido. También puedes optar por mandar un fax al número 650-963-3255. Más información en SEOmoz.

4) Si pese a todo esto, la cosa persiste siempre puedes denunciarlo a la autoridad competente en una comisaria de tu región como delito informático.

Empieza evitando que te copien visitando esta entrada.

---

Recuerda, si copias cita tus fuentes.

---

Cómo poner una faviconera en tu blog de blogger

Si deseas añadir en tu blog una faviconera como la siguiente deberemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) Pegamos en él el siguiente código:

---

<style type="text/css">
#faviconera {
width:300px;
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
}
#faviconera .contimg a:hover img{
border:1px solid #ffffff;
}
</style>
<div id="faviconera">
<div class="contimg">

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

</div>
</div>

---

Podemos modificar el tamaño de la faviconera cambiando el valor del width. Lo mismo haremos con el borde.

Si queremos añadir más favicons deberemos pegar tantos códigos como el siguiente queramos añadir:

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

Seguimos las instrucciones para colocar las URL correctamente.

---

¿No sabes cómo crear un favicon? Visita esta entrada.

---

Cómo poner banners de 125x125 en tu blog de blogger

Si quieres añadir en tu blog banners de tamaño 125x125 para añadir patrocinadores o tus enlaces favoritos, deberemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget -> HTML/Javascript
4) Pegamos en él el siguiente código:

---

<div class="banner125">

<center>

<a href="http://www.URLdelBLOGaENLAZAR.com" target="_blank" title="DESCRIPCIÓN DEL BLOG A ENLAZAR"><img border="0" width="125" src="http://URLdeLAimagen125x125.png" height="125"/></a>

<a href="http://www.URLdelBLOGaENLAZAR.com" target="_blank" title="DESCRIPCIÓN DEL BLOG A ENLAZAR"><img border="0" width="125" src="http://URLdeLAimagen125x125.png" height="125"/></a>

<a href="http://www.URLdelBLOGaENLAZAR.com" target="_blank" title="DESCRIPCIÓN DEL BLOG A ENLAZAR"><img border="0" width="125" src="http://URLdeLAimagen125x125.png" height="125"/></a>

<a href="http://www.URLdelBLOGaENLAZAR.com" target="_blank" title="DESCRIPCIÓN DEL BLOG A ENLAZAR"><img border="0" width="125" src="http://URLdeLAimagen125x125.png" height="125"/></a>

</center>
</div>

---

Sustituyes los datos en rojo por los tuyos y ya está todo listo. Este gadget está configurado para 4 banners, si te fijas en la estructura del código ya sabrás que para añadir más banners deberás añadir otro código como este:

<a href="http://www.URLdelBLOGaENLAZAR.com" target="_blank" title="DESCRIPCIÓN DEL BLOG A ENLAZAR"><img border="0" width="125" src="http://URLdeLAimagen125x125.png" height="125"/></a>

Cómo crear un índice (sitemap) con todas las entradas de tu blog de blogger

Gracias a bloggerbuster y a ciudadblogger os traigo esta gran utilidad para poder crear un sitemap o también llamado tabla de contenido para poder mostrar todas las entradas del blog como si de un índice se tratara.

Para poder crearlo es tan sencillo como crear una entrada y pegar en ella el siguiente código:

---

<script style="text/javascript" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/tableindex.js"></script>
<script src="http://www.tublog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

---

Pones los datos de tu blog y ya hemos terminado.... ¡No! No hemos terminado. Ahora debes editar esta entrada en la que has pegado ese código y ponerle una fecha anterior, por ejemplo una fecha anterior a la que creaste tu primera entrada del blog.

Cada vez que crees una entrada el índice se actualizará solo y encima las entradas más nuevas tendrán la palabra Nuevo! a su lado. Ahora sí que ya hemos terminado.

Quizá te interese también como poner ultimas actualizaciones en el blog.

Abrir links en una ventana aparte en tu blog

Si quieres que en tu blog de blogger cada vez que se haga clic en un link, la página sea cargada en otra página, deberemos hacer lo siguiente:
1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "expandir artilugios"
4) Buscamos tecleando Ctrl + F   ]]></b:skin&gt;
5) Justo antes pegamos el siguiente codigo:

---

<script language='javascript'>
var dominio = "www.TUBLOG.blogspot.com";
var dominio1 = "TUBLOG.blogspot.com";
var script = "javascript:void(0);";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
var imagenesblogger2 = "bp2.blogger.com";
var imagenesblogger3 = "bp3.blogger.com";
var blogger1 = "www.blogger.com";
var blogger2 = "www2.blogger.com";
var publicidad = "pagead2.googlesyndication.com";
function LinksExternos() {
var Externo;
if (document.getElementsByTagName('a')) {
for (var i = 0; (Externo = document.getElementsByTagName('a')[i]); i++) {
if (
Externo.href.indexOf(dominio) == -1 &amp;&amp;
Externo.href.indexOf(dominio1) == -1 &amp;&amp;
Externo.href.indexOf(script) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger0) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger1) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger2) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger3) == -1 &amp;&amp;
Externo.href.indexOf(publicidad) == -1 &amp;&amp;
Externo.href.indexOf(blogger1) == -1 &amp;&amp;
Externo.href.indexOf(blogger2) == -1
)
{
Externo.setAttribute('target', '_blank');
//Externo.setAttribute('class', 'linkexterno');
}
}
}
}
window.onload = function() {
LinksExternos();
}
</script>

---

Cambiamos los datos en rojo por los tuyos y listo.
 
Gracias a esto, los lectores de tu blog no se irán de tu blog al pulsar sobre un link.





Truco para sólo abrir las etiquetas en una ventana nueva:
1) Vamos a Diseño -> Edición de HTML y damos clic a "Expandir plantilla de artilugios"
2) Buscamos este código (tecleamos Ctrl + F para buscar más rápido)

---

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

---

Y lo sustituimos por este:

---

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

---

Si quieres que cuando pulsen una imagen no salgan de tu blog busca este codigo y añade lo que esta en negrita:

---

type='Image'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link' target='blank'&gt:

---

Si por culpa de tu plantillalos trucos anteriores no te funcionan correctamente no te preocupes, siempre podrás hacerlo manualmente con todos los links de la siguiente forma:

---

<a href="http://www.LINK.com/" target="_blank">

---

Debes agregar a cada link target='blank' despues del enlace

Como crear un icono o botón para que enlazen tu blog

Si queremos crear un icono o botón para que puedan enlazar nuestro blog de blogger, deberemos hacer lo siguiente:

<a href="http://www.quierocrearunblog.com/" target="_blank"><br /> <img width="80" alt="Crear un blog de blogger blogspot" src="http://img179.imageshack.us/img179/6169/8721722226191252526300.png" height="15" /></a>

  

1) Vamos a esta página: lucazappa.com

2) Nos encontraremos con la siguiente pantalla:


3) Aquí crearemos un icono como el de arriba dividio en dos partes. En el bloque de arriba vemos que pone "pixels from the... (0 to 80)" Si ponemos el valor 40, el icono que creemos estará igualado, es decir, left box y right box tendrán el mismo tamaño.

4) Modificar los valores a nuestro gusto y cuando esté listo le damos a create para ver el resultado final. Una vez finalizado le damos a save it! (a la derecha del logo creado). Nos aparecerá una ventana para guardarlo en nuestro PC. Si queremos podremos subirlo a imageshack.us directamente clicando en el enlace host to imageshack. Nos guardamos el link.

5) Ahora sólo queda crear una ventana o gadget para poder añadir un código HTML para que lo copien nuestros lectores y nos enlacen. Para ello hacemos lo siguiente: Vamos a Diseño -> Elementos de página -> Añadir un gadget -> HTML/Javascript.

6) Pegaremos el siguiente código:

---

<center><div class="widget-content">

<a href="http://www.TUBLOG.com/" target="_blank"><img width="80" alt="TU TEXTO" src="http://LINKDETUICONO.png" height="15"/></a>

<br/>

<textarea><a href="http://www.TUBLOG.com/" target="_blank"><br/><img width="80" alt="TU TEXTO" src="http://LINKDETUICONO.png" height="15"/></a></textarea></div>
</center>

---

Nota: Si te fijas en este código, al principio y al final poner "center". Es para que quede centrado este gadget. A mitad de código nos encontramos con br, es para crear un espacio. Se puede eliminar si se desea.

Pones tus datos y ya está listo.

Cómo crear enlaces de texto y con imagen a otra web

Para crear un enlace que vaya a una dirección URL (o link) debemos seguir esta estructura:

---

<a href="enlace a la web donde quieras ir"> titulo de la web</a>

---

Si quieres que en ese enlace aparezca una imagen debemos seguir esta estructura:

---

<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>

---

Si quieres que estos links hagan que no se abandone tu blog deberas añadir el siguiente codigo despues de la direccion a donde quieras ir:

---

<a href="enlace a la web donde quieras ir" target="_blank"> titulo de la web</a>

---

Cómo poner un enlace con imagen en blog

Para poner un una imagen con enlace que nos lleve a otra página (link) debemos hacer lo siguiente:

1) Vamos a diseño
2) Elementos de la página
3) Añadir un gadget
4) HTML/Javascript

Y en HTML/Javascript añadimos lo siguiente:

<a href="http://www.ENLACEdelaPAGINA.com" target="_blank">
<acronym title="TÍTULO">
<img src="http://www.URLdelaIMAGEN.jpg"/>
</acronym></a>

Tan sólo debemos modificar en el código anterior la dirección de la web y sustituirla por la dirección deseada; y sustituir el enlace de la imagen por la imagen que queramos. Para alojar la imagen recomiendo subirla a imageshack. Tan sólo hay que dimensionarla de acuerdo al tamaño de la sidebar.

---

Nota: Si quieres que el link se abra en otra vetana aparte visita esta entrada.

---

Consejos sobre los links (enlaces)

Los enlaces (links) en las páginas web y blogs son los que realmente dan magia a todo internet. Pero, ¿cómo podemos saber que nuestra web o blog contenga enlaces útiles para nuestros lectores? A continuación algunos consejos útiles:


1) NO DIGAS A TUS LECTORES PULSA AQUÍ. Utilizar el texto "pulsa aquí" para generar links en tu página es uno de los peores errores que cometen los bloggers y creadores de páginas web.

Uso incorrecto: Pulsa aquí para saber cómo poner vídeos de youtube en tu blog.

Uso correcto: Aprende cómo poner vídeos de youtube en tu blog.


2) LOS LINKS QUE PONGAS SIEMPRE DEBEN LLEVAR EL PROTOCOLO HTTP://

Uso incorrecto: <a href="www.google.com">Google</a>

Uso correcto: <a href="http://www.google.com">Google</a>


3) NO REPETIR ENLACES EN EL MISMO ARTÍCULO. ¿Qué ocurre si escribiésemos un artículo sobre esta web donde mencionáramos el nombre de esta web como mínimo unas 200 veces?

Uso incorrecto: Quierocrearunblog.com es una web que trata de favorecer la creación de blogs con toda la ayuda posible y accesible para que el usuario pueda aprender poco a poco en este loco mundo de la creación web. Quierocrearunblog.com ofrece consejos, trucos, diseños para comenzar desde cero... Quierocrearunblog.com

Uso correcto: Quierocrearunblog.com es una web que trata de favorecer la creación de blogs con toda la ayuda posible y accesible para que el usuario pueda aprender poco a poco en este loco mundo de la creación web. Quierocrearunblog.com ofrece consejos, trucos, diseños para comenzar desde cero... Quierocrearunblog.com


4) LINKS VALIOSOS. Los buscadores, como google o yahoo, toman muy en cuenta los links integrados en la web a la hora de indexar los contenidos de la red. Todos los links que llegues a realizar desde tu sitio web o blog son votos de confianza que le das a otros sitios web. Siempre que puedas cita otras fuentes en los contenidos de tu sitio y dale tus votos de confianza a los proyectos que admiras. De esta forma creamos una telaraña que relaciona cada parte entre sí, consiguiendo así llegar mucho más rápido a la información requerida.