caja de texto html

Caja de texto HTML para que enlacen tu blog

Caja de texto HTML para que enlacen tu blog

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í:

Mónica Lemos

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.

url de imagen en wordpress CAJA DE TEXTO HTML

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:  

Mónica Lemos
<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.

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

6 comentarios

  1. Nerea Curiosa

    Oh, mi código es distinto. Me permite personalizar también el recuadro donde se encuentra el código.
    He de subir el código algún día al blog, jajajaja.

    Conseguiste centrar las etiquetas! ¿Me expliqué bien en el tutorial? ¿O lo encontraste lioso?

    PD: Cuando cambié la plantilla del blog, instalé de nuevo los iconos a pie de página. Lo hice siguiendo el tutorial que había publicado. Y tenía una cosa mal: me faltaba una barra en un codigo. Una así /
    Y ya sabes… se te olvida algo y todo a la mierda. Lo raro es que esa barra no la tenía cuando lo hice en mi plantilla, por eso no la puse. Pero en la nueva, al intentar hacerlo, me dio error. Así que a lo mejor el problema que tuviste fue ese.

    Mua!

    • Mónica Lemos

      Nere¡¡ pues si, yo quería algo sencillo y este me ha gustado. Pero súbe el tuyo que nada sobra¡¡
      Sí las centré, pero la verdad de la buena,(como buenas sincerosas que somos 😉 solo vi por encima el código y vi el mítico < cente.. y luego cerrando con ' / ' y ya me dije "tonta" y me fuí al lío en cuanto tuve hueco, jaja, osea que ya sabía hacerlo, pero me lo recordaste¡¡
      Con respecto a tu postdata..jajajja, la verdad que no pienso tocar eso hasta que termine los exámenes¡¡ o el curso¡¡ qué se yo¡¡ jajajja, pero gracias, de todas formas cuando lo haga si necesito algo te digo 🙂

      Muchas gracias guapa¡ por comentar y fijarte en mis cosillas 😛

  2. Satoshi Sekai

    Hola Monica, muchas gracias por el tutorial, estaba intentado crearme la caja de texto con el código y encontre muchos tutoriales que no me daban la respuesta exacta de lo que estaba comentando.

    De todo corazón gracias. Si te interesa visitar mi blog te dejo mi link: https://sekai-nostrum.blogspot.pe

    Saludos

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *