jueves, 16 de mayo de 2013

THE BLOG WORKSHOP : PONER BOTONES, BANNERS Y OTRAS COSAS


Vuelve el taller del blog con más ideas de "tunning bloguero" para que estemos orgullosas de nuestros blog y nos digamos a nosotras mismas "Pero que requetechuli es mi blog".  Y para hacer cosas chulis ya sabéis que tenemos que trastear el código  aunque las ideas que os traigo hoy dejaremos un poquito de banda la plantilla y trabajaremos en la pestaña de Diseño del blog que aunque os parezca raro ahí también se puede jugar con códigos de programación HTML jiji. 

Lo se ahora pensaréis esta tía es una friky del blog y ella misma se ríe con lo que dice . . . jajaja  . .  lo siento a veces soy friky pero el tutorial de hoy va hacer que vuestros Blogs sean a la última moda !!


Como veis en el orden del día vamos a tratar casi todo el tema de insertar botones, imágenes que estén linkeadas a alguna página o como en el caso de la firma de los post es una imagen que queremos que salga predefinida en nuestras entradas del blog. 


Como crear e instalar bonitos botones debajo de la cabecera del blog


Seguro que habéis visitado muchos blogs que tienen botoncitos debajo de la cabecera ( psss en mi blog los tengo puestos solo tienes que levantar un poco la mirada jiji) yos habréis preguntado " ¿alaaa como se hacen? quedan super mega ways" (voz de ultra pija). Pues a eso vamos , hacer botoncitos !!

Para dibujar los botones podemos utilizar cualquier programa de diseño normalito como Power point, Picmonkey, Gimp, Photoshop o hasta podéis hacerlos sencillitos en Paint. Tenéis que dibujar cada botón por separado y recordad de ponerle fondo transparente o del color del fondo de vuestro blog.

Cuando tengáis los botones creados ya podemos ir a instalarlos a nuestro blog de la siguiente forma:

PÁGINAL GENERAL DE BLOGGER - DISEÑO -AÑADIR GADGET -CONFIGURAR HTML/JAVA SCRIP

Dentro de este gadget tenemos que pegar el siguiente código que será el que nos genere los botones y permita que tengan un link.


<a href="http://theraspberrycolor.blogspot.co.uk/search/label/craft"><img src="http://imageshack.us/a/img202/6039/botncraft.jpg" width="250" height="100" alt="craft" /></a>

Y ahora vamos a explicar que tenemos que poner en cada sitio de este código:

COLOR ROJO: ahí tenemos que poner la dirección web  del link a la que queremos que se nos dirija al pinchar sobre el botón.

COLOR AZUL :  ahí tenemos que poner la URL de la imagen del botón.

Para obtener la url de la imagen es necesario que nuestra imagen está guardada en un host . . .  vale muy bien pero  . . .¿que es un host ?  Un Host para que sea entendible es una carpeta de imágenes en internet y a las cuales se les asigna un código para que puedas utilizar esas imágenes en las páginas web.
En internet hay muchos host de imágenes pero yo recomiendo dos: 

- PICASA:  Es la carpeta de imágenes que utiliza blogger
- IMAGESHAK: Es un host muy facilito de utilizar y a mi me ha dado buenos resultado.

Entonces dentro de la página del host subimos nuestra imagen y cuando la hayamos subido en el caso del host Imageshak le damos a la "i" de info que sale al lado de nuestra foto y copiamos la dirección web que hay al lado de Direct y esa es la URL de nuestra imagen que tendremos que poner en la parte azul del código anterior.

COLOR NARANJA : En color naranja está el alto y el ancho de nuestro botón. Width=ancho Heigh=alto
Tenéis que poner las medidas que queráis pero si ponéis más de un botón calculad que os quepan con las medidas que pongáis. 


Si no lo veis claro siguiendo los pasos he hecho un pequeño vídeo con todos los pasos a seguir desde la creación del botón en Picmonkey hasta su instalación. En el vídeo veréis que copio dos veces el código del botón porque instalo dos botones.




Como poner un banner o imagen linkeado a una web


Para poner una imagen en nuestra sidebar y que nos dirija a una web es muy sencillo, basta con que creemos la imagen con las medidas de nuestra sidebar como mucho (más o menos 280px de ancho y lo que queramos de largo).

PANEL GENERAL DE BLOGGER - DISEÑO - AÑADIMOS EL GADGET DE "IMAGEN"

En el tenemos que subir la imagen y donde pone link adjuntar la dirección web donde queramos que nos redireccione cuando cliquemos en la imagen




Como poner una firma personalizada y que siempre salga en los post automáticamente


Creo que una firma personalizada en el blog le da eso "más personalidad"  y es tan fácil predefinirla en nuestros post que ya veréis como en nada tenéis vuestras entradas en el blog con firma personalizada.

Creamos la imagen de la firma que queremos que aparezca .
2º Abrimos una entrada del blog y la insertamos como imagen. Seguidamente visualizamos la entrada como html en vez de Redactar.
Copiamos el código html que aparece en la entrada
4º Nos vamos a la configuración del blog a entradas y comentarios.
5º Entramos en "Añadir plantilla" y allí pegamos tal cual el código que habíamos copiado
6º Guardamos configuración

¡ Y ya tenemos firma predefinida en las entradas ! 


El taller del blog de hoy venía completito pero espero que os sirva para que vuestros blog seas requetechulis.

BESITOS 



13 comentarios:

  1. Muchas gracias por tus tutoriales,son muy explicativos ^^.
    Tengo que probar lo de la firma, a ver si se me ocurre alguna chachi.
    Besitos!

    ResponderEliminar
  2. Que interesante, en esto tengo que ponerme con mas calma, gracias por explicarlo! :)

    BesitoS!!

    ResponderEliminar
  3. Gracias por ayudarnos a conseguir que nuestro blog sea un poquito mejor.Un saludo desde la Fragua!

    ResponderEliminar
    Respuestas
    1. De nada ! Por cierto tu nombre del blog es súper original! jejej

      Saludos

      Eliminar
  4. ¡Hola! Acabo de empezar con mi blog, y soy bastante torpe en esto del html y el diseño de blogs... por eso tutoriales como éste me vienen de lujo. Te estaré eternamente agradecida!!!

    He seguido los pasos para instalar mis botones con las secciones de mi blog, y lo he podido colocar debajo de la cabecera, que es donde yo quería. Peeeeero... me salen pegados a la foto que tengo puesta como cabecera, y no sé cómo cambiarlo... ¿me podrías ayudar?

    Muchísisisisisiisisisismas gracias de antemano!!!

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya ayudado el tutorial! Haremos una cosa me apunto tu duda para solucionarla en el próximo taller del blog que saldrá entre esta semana y la que viene .

      Raquel

      Eliminar
  5. Que guay!! Tengo que animarme a usar mas el pickmonkey, que con el gimp no me aclaro mucho.. a ver si hago algún boton bonito!!
    Gracias

    ResponderEliminar
  6. Me gusto mucho tu blog yo tengo que trabajar con lo de la firma te invito a mi blog.
    http://laspaginasquesipagan.blogspot.com/

    ResponderEliminar
  7. Muchas gracias, eres genial pondré en práctica tus consejitos por que soy nueva en este mundo.

    ResponderEliminar
  8. Muchas gracias! Me encanto el tutorial, pero.. ¿Hay que ponerle medidas a los botones?
    Sino Perdóname por la ignorancia Ajejee ;) Saludos desde Colombia *-*

    ResponderEliminar

¡¡ Gracias por hacer el mundo frambuesil más grande !!