Estos últimos tutoriales son a petición de amigas que pasan y visitan mi blog realizandome preguntas sobre como lo modifico y cambio su aspecto.
Esta vez toca cambiar las etiquetas que tenemos en los laterales del blog como las que veréis en la imagen que os dejo. No todas se pueden modificar con un Código HTML pero si la mayoria, yo tengo personalizadas suscribete en seguidores del blog, mis blogs, etiquetas, blogs afiliados, blogs recomendados, los más vistos...
No es complicado poner el código HTML pero si tendréis que tener un poco de idea sobre como manejar Photoshop, os dejo el tutorial de las herramientas básicas de este programa por si no lo conocéis.
Para encontrar full el programa podéis mirar este otro tutorial sobre como encontrar programas en la web.
Lo primero que haremos sera capturar una imagen a nuestro blog utilizando el programa Paint de nuestro pc, en el teclado veréis una tecla llamada Imp Pan Pet Sis, solo hay que presionarla para realizar la captura.
La captura la haremos de una de las etiquetas que aparezcan en uno de nuestros laterales del blog para poder recortar después el tamaño ajustándonos al margen que nos ofrece la barra lateral donde colocaremos la etiqueta personalizada.
Una vez presionada la tecla Imp Pan Pet Sis abriremos nuestro Photoshop. Ahora haremos clic en Archivo y clic en Nuevo. En la ventana que se habré haremos clic en OK.
Ahora haremos clic en la opción Edición y haremos clic de nuevo en Pegar.
Nos aparecerá la captura que hemos hecho a nuestro blog.
Con la Herramienta Recortar seleccionaremos la zona donde en mi caso aparece etiquetas en la captura que he hecho y la recortare.
Para ver mejor la zona a recortar ampliare esa zona con la Herramienta Zoom.
El candadito que hay en la zona azul de la derecha lo quitaremos haciendo doble clic sobre el y clic en ok. De esta forma desbloquearemos la capa para seguir trabajando con ella y poderla modificar.
Nos quedara el recorte en Photoshop,ya tenemos nuestra plantilla para comenzar a preparar nuestras etiquetas.
Personalmente me gusta trabajar teniendo seleccionada la herramienta mover asi que os recomiendo que en este paso la seleccionéis.
Ahora crearemos una nueva capa, encontréis el icono para poder crearla abajo a la derecha os la he dejado dentro de un circulo rojo en la imagen.
Ocultaremos la primera capa haciendo clic sobre el ojo, veréis que este desaparecerá y nos quedara visible la capa que hemos creado antes.
Ya podemos comenzar a colocar las imágenes que queremos poner un nuestra etiqueta personalizada, también podéis poner texto con la Herramienta texto.
Para colocar las imágenes haremos clic en Archivo y clic en colocar.
Por ultimo haremos clic en Archivo y clic en Guardar como y elegiremos la opción PNG y clic en guardar.
Si os resulta complicado preparar la plantilla os dejo aquí la que yo utilizo.
Clic sobre la imagen para descargar ,clic de nuevo sobre la imagen y con el botón derecho y clic en guardar como.
Como ya vimos en otro tutorial podéis utilizar blogger como hosting de imágenes os dejo el tutorial para que veáis como hacerlo, también podéis utilizar:
Tutorial:
Una vez subida la imagen iremos a Diseño, añadir un gadget. Elegiremos HTML javascrip y pegareis el siguiente código que os comparto en la ventana que os aparecerá , clic en guardar.
Cambia el texto en rojo por la URL de tu imagen.
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="AQUÍ LA URL DE TU IMAGEN" /></div>
Veréis que os aparece ya la imagen en el blog.
Ahora moveremos el código HTML que acabamos de poner justo encima en mi caso de las etiquetas.
Ahora abriremos Etiquetas y cambiaremos el nombre de esta sustituyéndolo por un punto.
Ya solo queda hacer clic en guardar y guardar cambios.
Podéis ver vuestro blog con la etiqueta personalizada.
Si queréis añadir un enlace a este tipo de etiquetas también se puede hacer pero lo veremos en un proximo tutorial.
muchisimas gracias trasterare un poco copn el blog de prueba antes de ponerme en el mio.
ResponderEliminarUna preguntita. He intentado añadir estos dias imagenes a los lados de mi blog pero me obliga a poner titulo cosa que antes no me hacía te pasa a ti igual?? Han cambiado algo?? hay alguna forma de eliminar ese titulo o saltarse esa obligacion?? :S
Tienes que ponerlas utilizando el código HTML javascrip en cuanto pueda te lo explico en un proximo tutorial lo tengo pendiente de hacer . un saludo linda
EliminarGracias!!! ese tutorial sera super util!!! Sinceramente es mucho mejor que la opcion de poner la imagen y el enlace (que ahora te obligan a poner titulo y siempre tengo que volver a subir la imagen porque no me acepta los enlaces que le pongo desde la web) Asi que me quedo con tu opcion....lo unico que tengo que andarme con cuidado cuando cambio algo de sitio por tanta cantidad de html/javascript que he puesto. Que alguna vez he cambiado lo que no tenia que cambiar jejejejje
EliminarA mi también me ha ocurrido eso en alguna ocasión.
EliminarUn abrazo XD
Aqui vuelvo. Me ha ido perfecto. Solo me gusta un poquito menos cuando tengo que poner el punto pero prefiero dejar un mensajito y listo. Pero sabes lo mejor es que voy a poner todas las imagenes siguiendo este procedimiento. Porque lo del título obligatorio para las imagenes no me gusta nada :D
ResponderEliminarGracias por las explicaciones!!!!
Gracias por la visita XD
Eliminar