[Tutorial] Poner el código para los banners y subir imagenes en photobucket

¡Hola a todoss! ¿Qué tal las vacaciones? Espero que geniales, aunque sólo hayan sido para desconectar un poco de la rutina, como se me hace extraño ponerme ahora a escribir un entrada convencional después de tantos días sin pegar ni golpe,jajaja, he decidido seguir con mis tutoriales, y esta vez seguimos donde lo dejamos la última vez, que fue hacer un banner con photoshop  y hoy os diré como se pone el código, que nadie se me ponga nervi, que no es tan complicado ;)


[Primer paso]
Buscar nuestro banner que creamos la otra vez con photohop, tutorial *aquí*
Una vez encontrado, tenemos de subir nuestro banner a alguna página donde alojar imágenes, en este caso usaremos *Photobucket*, es gratuito y puedes hacerlo privado para que nadie pueda ver las imágenes que tienes.

[Segundo paso]

Ya estamos en la web, nos registramos, en nada se hace, 2 minutillos escasos. Ahora viene subir la imagen.
1 - Darle a Upload.
2 - Poned la opción My computer, ya que la imagen se encuentra en el ordenador.
3 - Clicar en Select photos and videos.
4 - Os saldrá una ventana, y una vez allí busca la imagen.
5 - Selecciona la imagen (si más adelante queréis subir más de una, clicar en  Ctrol + Alt) *ctrol = control*
6 - Clicar en Abrir.
7 - Veréis que os redirecciona a otra página, tranquilos, es que se esta subiendo nuestra imagen, nos esperamos a que se haya subido. (Atención: Muchas veces se queda estancado al 99%, por ello, abrir el álbum en una página aparte.)

8 - Ahora se ve nuestro banner con una serie de códigos abajo, el que nos interesa es el de Dirent link. ¡Ya tenemos el enlace! Pues ahora tenemos de crear nuestro código.

[Tercer paso]

  <a href=""> </a>
1 - Lo primero que se tiene de poner es el enlace, donde pondremos la url de la entrada del sorteo, eso se pone en medio de las comillas, en mi caso, como no he creado ninguna entrada, pondré la url de mi web.
Quedaría así:
<a href="http://welcometopinkiland.blogspot.com.es"> </a>

Paso optativo - Una cosa que particularmente, uso mucho, es poner el enlace para que se abra en una ventana nueva, la opción para realizar esto sería target="_blank"
Quedaría así:
<a href="http://welcometopinkiland.blogspot.com.es" target="_blank"> </a>

2 - Y ahora solo falta poner el enlace de la imagen:
Que es esto:
<img src=""/>
Dentro de las comillas pondremos en enlace que hemos cogido de photobucket, os recuerdo, se tiene de coger dirent link.
Quedaría así:
<img src="http://i3.photobucket.com/albums/y98/kristie_chan/bannerkristie.jpg"/>

En teoría ya hemos terminado de hacer el código, os dejo como se vería:
<a href="http://welcometopinkiland.blogspot.com.es/" target="_blank"><img src="http://i3.photobucket.com/albums/y98/kristie_chan/bannerkristie.jpg"/> </a>
Como podéis observar el cierre del enlace, se ha movido al final ;)
Y aquí pasaríamos a hacer la cajita de texto, pero si queréis seguir, aquí va un truquito, por si vuestra imagen es grande.

Paso optativo - La imagen quizá sea muy grande, en mi caso mide, 250 x 250, así que pondremos un código para redimensionarla.
Este:
style="width: --px; height: --px;"

Bien, tenemos width, que significa ancho y height que significa alto.
Donde están los guiones pondremos nuestras medidas en pixeles, es decir, no pongas un 10, porque no se verá una mierda, así de claro, jaja, lo mejor es ir trasteando, en este caso he decidido poner la medida de 150 en ambos.
Quedaría así:
style="width: 150px; height: 150px;"

Y para poner las medidas en nuestro código se pone de la siguiente manera:
<img style="width: 150px; height: 150px;" src="http://i3.photobucket.com/albums/y98/kristie_chan/bannerkristie.jpg"/>

4 - ¡Y ya hemos terminado!
Quedaría así:
<a href="http://welcometopinkiland.blogspot.com.es" target="_blank"><img style="width: 150px; height: 150px;" src="http://i3.photobucket.com/albums/y98/kristie_chan/bannerkristie.jpg"/> </a>
Como podéis observar el cierre del enlace, se ha movido al final ;)

[Cuarto paso]
Crear una cajetilla de texto para que la gente pueda coger el código, es muy sencillo, tan sólo con poner <textarea>
1 - ¡Muy importante! Aquí como con la imagen hay que ponerle un estilo, es decir, quizá sobrepase nuestro sidebar, es fácil de modificar ya que se puede ir moviendo desde el mismo cuadro de redactar, dándole a las dos rayitas.
Pero os diré como se modifica desde html, en mi caso, como el código es bastante largo, pondré 150 de alto (height) para que no se tenga de usar la barra de desplazamiento, y de ancho (width), he puesto 400.
Luego están los bordes (margin) , se pueden dar estilo, yo los he dejado tal y como se han puesto automáticamente al mover el cuadrado.

2 - Ponemos nuestro código en Edición de Html.
<textarea style="height: 150px; margin-bottom: 1.11111px; margin-left: 1.11111px; margin-right: 1.11111px; margin-top: 1.11111px; width: 400px;"> <a href="http://welcometopinkiland.blogspot.com.es" target="_blank"><img style="width: 150px; height: 150px;" src="http://i3.photobucket.com/albums/y98/kristie_chan/bannerkristie.jpg"/> </a> < / textarea >
Atención: A mí no me deja poneros el cierre correctamente, pero sería todo junto, ¿ok?
Nota: Para agregar este código en la sidebar, tan sólo se tiene de ir a: Diseño, Añadir un gadget, HTML/Javascript.

3 - ¡¡Y ya hemos terminado!! El resultado final sería esto: 

<a href="http://welcometopinkiland.blogspot.com.es/" target="_blank"><img style="width: 150px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcEbJ9sZW9xoS92tPy1CVxbVxmekJDUr5IB4eq7r6K8E0m8lTXb2xGWN2CO7y9daXstx32iQKR5KipsTn1DwnRGJWqXiD8uRlOTV7Nd4AvwCABruyxTJaf25glIilqT44o70LjGkSqJA/s1600/bannerkristie.jpg"/> </a>

Y ahora os pongo el código copiado, para que se vea el cambio en la imagen ;)

----------

Si a pesar de este tutorial, alguien tiene alguna duda, que me la deje por aquí e intentaré resolverla!! Besoss!!