Tutoriales de blogger #1 Botón de afiliación/Banner

¡Hola letritas! Si habéis leído el titulo, y estáis aquí leyendo esto, puedo averiguar, que o bien querías leer mi explicación de porque aun no os he traído una reseña o que os interesa como aprender a hacer un botón de afiliación o banner para tu blog.

Bueno, y la explicación por la cual no os traigo aun una reseña es tan simple como que aun no me he acabado el libro. Y PUNTO. No voy a poner más escusas por que esa es la realidad. Aunque también tengo que deciros que estoy preparando un nuevo diseño de blogger para mi blog. Y por eso os voy a traer un tutorial bastante sencillo.

Y no os entretengo más y vamos a ver los pasos que tenéis que seguir.

- Primero necesitáis tener una imagen que represente vuestro blog por ejemplo algo como esto:

Como por ejemplo
esta

Que tenga el título de vuestro blog y una imagen representativa.

- Y ahora vamos a blogger → Diseño (en la columna lateral izquierda) → Añadir un gadget → HTML / Javascript

- En donde pone "contenido" tiene que poner este código:

<a href="URL DE TU BLOG" target="_blank"><img src="URL DE LA IMAGEN" border="0" alt="Image and video hosting by TinyPic" /></a>
<br />
<br />
<br />

- Y ahora tenéis que cambiar las letras donde pone URL DE TU BLOG y URL DE LA IMAGEN por los url de verdad. (recordar que las comillas no las tenéis que quitar solo lo que está en rosa)

Un truquillo para saber la url de tu imagen es: abres un gadget de imagen y seleccionas tu imagen, luego le das a guardar, vas a tu blog y donde está la imagen clicas con el botón derecho y hacer click donde pone copiar url de la imagen o copiar dirección de la imagen. Y ya está. Puedes eliminar el gadget y no pasará nada.

- Y por último, solo tienes que copiar este otro código debajo del anterior:

<textarea style="margin: 2px; width: 177px; height: 43px; ">&lt;a href="URL DE TU BLOG" target="_blank"&gt;&lt;img src="URL DE LA IMAGEN" border="0" alt="Image and video hosting by TinyPic"&gt;&lt;/a&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;</textarea>

Y al igual que antes substituyes URL DE TU BLOG y URL DE LA IMAGEN por los url de verdad.

Luego le das a guardar y si quieres le pones un titulo.

A si es más o menos como os tiene que quedar (pero con vuestros URL) es decir, así me a quedado mi código completo:

<a href="http://thingsofletters.blogspot.com.es" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9l6AJkqD_AvXUaE0Zouk9Z29AAYu_D7Oji1kEfBABUnMiQBSezHrKFIdNy_juA1ueFRKOJ6mCSyva4FvlwwkuDTtM8Wb6dTar85xUvVsDR5jDTA6YT3kTyMX6sLkDb7jS70KCOQ1LDfA/s1600/boton+de+afiliacion.png" border="0" alt="Image and video hosting by TinyPic" /></a> <br /><br /><br /><textarea style="margin: 2px; width: 177px; height: 43px; ">&lt;a href="http://thingsofletters.blogspot.com.es" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9l6AJkqD_AvXUaE0Zouk9Z29AAYu_D7Oji1kEfBABUnMiQBSezHrKFIdNy_juA1ueFRKOJ6mCSyva4FvlwwkuDTtM8Wb6dTar85xUvVsDR5jDTA6YT3kTyMX6sLkDb7jS70KCOQ1LDfA/s1600/boton+de+afiliacion.png" border="0" alt="Image and video hosting by TinyPic"&gt;&lt;/a&gt; &lt;br /&gt;

Y cuando lo guardéis en vuestro blog os saldrá la imagen y debajo en una cajita el código que tienen que copiar los demás para afiliaros, solo tendrán que copiar el código que sale en la cajita en un gadget de HTML/Javascript. Y entonces les saldrá la imagen y al hacer click encia de ella se irán directos a vuestro blog :)

Algo como esto:

No me culpéis por que la imagen se vea cutre :(
 No sabia como hacer una captura de pantalla y he hecho una foto con el móvil.
Y soy consciente de que debo aprender rápido.

Y fin. Esto es todo. Espero que os sea útil y si tenéis alguna duda podéis dejarla en los comentarios o enviármela por mail (lo podéis encontrar en la pestaña de contacto) y yo os intentaré contestar lo más rápido posible.

Bye :3