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.

1º 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.
3º 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