En este post vas a aprender a crear una caja de texto HTML para que tus lectoras puedan copiar el código y pegarlo en su sidebar, web o blog y enlazarte.

Es una práctica muy antigua. En los inicios del mundo de los blogs se hacía muchísimo para compartir y apoyar a otros blogs.

Se vería tal que así:

Una caja de texto HTML donde puedes copiar el código y pegarlo en cualquier gadget HTML de tu web o blog, sea Blogger o WordPress y que aparezca el logo enlazado al blog o web de esa persona.

Muy sencillo y fácil hasta para quien no entiende mucho de código HTML.

Caja de texto HTML para que enlacen tu Blog o Web a través de la imagen de tu logotipo

Inspirándome en Ciudad Blogger, donde tiene muchas soluciones a dudas que se me han planteado en el pasado y tienen una manera práctica de explicar te comparto cómo conseguirlo.  

Bueno, en primer lugar explica que tienes que crear un widget HTML en el que pegar el siguiente código HTML:  

<center>
<textarea rows="3" cols="30" onclick="this.select();">&lt;a href=&quot;URL de tu blog&quot;&gt;&lt;img alt=&quot;Nombre de tu blog&quot; src=&quot;URL de la imagen&quot;/&gt;&lt;/a&gt;</textarea>
</center> 
<center><a href="URL de tu blog">
<img alt="Nombre de tu blog" src="URL de la imagen"/>
</a>
</center>   

Después explica que si eliminamos onclick=»this.select();» significará que el texto no se seleccionará todo con solo un click, pero es mejor no tocarlo.  

También aclara que con «el tamaño de rows (el alto) y el de cols (ancho)» podrás jugar con el tamaño del cuadro de texto HTML. Me gusta que den este tipo de información porque así vamos interiorizando conceptos y conocimientos.  

Pero si no quieres complicarte puedes dejar el código tal cual, porque tiene un tamaño bastante normal y cómodo.  

Por último solo queda que sustituyas aquello que está en rojo por lo que corresponda. Eso si que es importante, fijándote bien en no cometer errores.    

Te recomiendo que copies y pegues el código HTML en un bloc de Notas para poder modificarlo tranquilamente allí.

[cta id=’2095′]

Conseguir la URL de la imagen

Para la Url de la imagen necesitas subir tus imágenes a un servidor de internet. Dropbox, es un buen ejemplo, pero personalmente yo suelo subirlas también a una entrada del blog que no se publicará nunca, porque me resulta más cómodo para hacerme con la URL de la imagen. Es cosa de cada una/o.  

En el siguiente vídeo te explico una manera muy fácil de hacerlo.

En WordPress basta con subir a tus Medios la imagen y ya te genera una URL de imagen que puedes usar.

Copias la URL de la imagen, como corresponda en cada caso y listo, estará copiado en el portapapeles. Lo pegas sustituyendo por «URL de la imagen» en el código anterior.  

Cómo invertir el orden de la imagen y el cuadro

Resulta que Ciudad Blogger ha puesto el orden al revés de lo que yo quería, porque pone primero el cuadro de texto HTML y luego la imagen o icono del blog. En este caso os facilito el código para que quede el cuadro de texto HTML debajo de la imagen:  

<center>
<a href="URL de tu blog">
<img alt="Nombre de tu blog" src="URL de la imagen"/>
</a>
</center>   
<center>
<textarea rows="3" cols="30" onclick="this.select();">&lt;a href=&quot;URL de tu blog&quot;&gt;&lt;img alt=&quot;Nombre de tu blog&quot; src=&quot;URL de la imagen&quot;/&gt;&lt;/a&gt;</textarea>
</center>     

Para diferenciar el código de la imagen o icono del código del cuadro de texto html tan solo te tienes que fijar en los códigos

• <center> (abre un código)
• </center> (cierra un código)

Que lo que hacen es centrar la imagen y el cuadro en el sidebar, o donde lo coloques.

Si no lo quieres centrado ya sabes, eliminas esos códigos que abren y cierran y ya está.  

Espero que me haya explicado bien, que me entendieras y que te haya resultado de ayuda.

Si no te aclaras o hay algo que no te sale o no entiendes por favor déjame un comentario.

También puedes comentar para lo que quieras, los comentarios son una de las buenas consecuencias de tener un blog.