Image and video hosting by TinyPic Image and video hosting by TinyPic Image and video hosting by TinyPic Image and video hosting by TinyPic Image and video hosting by TinyPic

miércoles, 17 de julio de 2013

Cómo editar una plantilla para tu blog ♥


Hola a todos! La entrada de hoy es una que me han pedido muchísimo así que me di el tiempo de hoy para mostrarles como editar una plantilla, esta no es la manera en que edito mi blog, porque yo empiezo desde cero y creo que es más fácil mostrarle esta manera, es sencilla y todos lo pueden hacer 

¡Empecemos!

Antes que nada debes buscar una plantilla en la cual basarte, recuerda que puedes cambiar el fondo, colores, el tipo de letra, imágenes, etc. Es como un molde al cual le puedes agregar o quitar lo que quieras, pero para que sea más simple y no te compliques tanto elige una cercana a lo que quieres.

Pagina sugerida: BlogSkins

Supongamos que has encontrado la plantilla que quieres usar ahora tienes que descargarla, te vas a la parte de abajo hasta encontrar esto:


Se descargará una nota en donde hay un texto html, al pricipio te parecerán miles de letras y cosas sin sentido, pero ya que lo observas cuidadosamente hay varias cosas muy entendibles.

Ahora vamos a instalar la nueva plantilla:

Ve a blogger - plantilla:


Te vas hasta la parte de abajo y le haces click a "Volver a las plantillas clásicas", de ahí vuelves a hacer click a "Volver a plastilla clásica".


Te aparecerá un cuadro de texto con un código html como este:


Sólo seleccionalo todo y borralo, este código es el de la plantilla normal, es decir no nos interesa. Ya que lo hayas borrado copia y pega el texto de la plantilla que descargaste.

Ahora lo que viene es identificar que es qué para poder modificarlo, es decir, cuál de todas esas palabras es el fondo, cuál es la imagen de cabecera, cuál es para navegar, etc.


Esta es plantilla original, ¿qué es lo que podemos modificar? Pues prácticamente todo, pero sólo le mostraré lo básico. Lo que le cambiaremos es: la imagen de fondo, la imagen de cabecera, el tipo de letra, lo que tiene escrito (pasaremos lo que esta en inglés a español), el color la letra, los botones de "follow" y "Dashboard".

Estamos en la parte de plantilla:


Antes de empezar tienes que saber un poco de vocabulario básico: Background-Fondo, Font-Fuente (la fuente es el tipo de letra), Header-Imagen de cabecera, Cursor-Flecha del mouse.

Consejo: Antes de empezar a cambiar cosas identifica todas la imágenes, una plantilla siempre usa imagénes de fondo, cabecera, de adorno, etc. Las imágenes son todas aquellas que terminan en .png o .jpg o .gif (Así como se señala en la imagen) Ven eso resaltado en azul, ese es el background osea el fondo, copias y pegas en link en una ventana y así sabrás qué imagen es esa. En este caso en la imagen rosa que tiene el fondo.

Al principio lo verás algo complicado y cansado porque parecen muchas muchas cosas, pero es bastante sencillo, ahora para cambiar el fondo simplemente le cambias el link (url), yo cambié la imagen de fondo por esta:


Lo que hice fue copiar en url de esta imagen (sólo apreta el botón derecho de tu mouse y le das a "copiar el url de la imagen"

Consejo: para que se te haga más fácil encontrar cada palabra en el texto, sólo apreta las teclas "ctrl + f", y te aparecerá una ventanita en la parte superior derecha, una como esta:


Ahí puedes escribir todo lo que necesitas buscar y te eso lo buscará por ti, lo resaltará en un color naranja para que veas dónde esta, también si la palabra que estas buscando aparece varias veces, sólo aprenta las flechitas y te llevará a la palabra, es decir si hay 5 veces la palabra "cursor", con esas flechas te llevará a donde estén. Para abajo iras a la palabra cursor numero 2 y para arriba regresaras a la palabra cursor numero 1, etc.

Ahora cambiaremos la imagen de cabecera:


Ponemos en el buscador "header" y te llevará a la palabra header, el link que esté junto a esa palabra es el link de la imagen de cabecera, así será con todo lo demás.

Ahora lo cambiaremos por este:


Esta imagen yo la hice, y obviamente no tiene un "url" porque no esta en internet, así que necesitas un servidor donde puedas subir las imagenes sin bajar tanto la calidad y el cual te dará el link (url) de dicha imagen. Yo les sugiero usar Tinypic.com

Pasa subir tu imagen sólo sigue los simples pasos.

Cuando se termine de cargar la imagen te redireccionara y te mostrará estas opciones, les muestro esto de una vez, cuando quieras añadir una imagen en sí, osea añadirla no suplantara necesitas copiar el link que esta en rosa, esa ya tiene el codigo html para que solo la pongas. En fin nosotros en este momento copiaremos el link de azul, copias y suplantas, como hicimos previamente.

Así harás con todas las imágenes, si quieres agregar una sólo copias el link en rosa, pegas en un espacio donde no interrumpas alguna secuencia, y listo.

Ahora cambiaremos el tipo de letra, pondremos en buscador "font" y nos llevara a varias opciones, busca el que tenga un nombre fuera de lo común, por qué les digo esto, es que no creo que todos se sepan los nombres de las fuentes y estas pueden variar, así que para cambiar el font principal normalmente tiene un nombre fuera de lo común, no es century ni times ni verdana (nombres de fonts que son comunes) Una vez que lo encuentres sólo pegas el nombre del font que tú quieres, es este caso es el "Always in my heart". Para cambiar el color del font, sólo cambias el "a80b8a" que es el código del color, para saber cuál es el código de los colores puedes ir a esta pagina Códigos de colores (aquí están los básicos, yo prefiero buscarlos en photoshop).


En esta plantilla en la parte de "Navigators" tiene unos botonsitos que al apretarlos te llevan a otra sección en el blog, estas secciones son para que puedas poner tu perfil, links u otras cosas. Para editar cada sección sólo busca el nombre de los botones, por ejemplo "about" y te llevará a la sección. Las plantillas tienen espacios donde los creadores usualmente te indican dónde escribir en ese caso sólo modifica esas partes, por ejemplo si te vas a about y dice "aqui escribe tu perfil", ¿qué vas a hacer? Pues escribir tu perfil. Te vas a "links" y ahí te aparece "Aqui pon el link de tu afiliado", "aqui pon el nombre de tu afiliado" ven? Es bastante sencillo, sólo rellena lo que te indica.


Ven es bastante sencillo! Buscarán dependiendo de lo que les indique la plantilla, en este caso, es en las siguientes secciones "Sobre mi", "Redes sociales", "Acerca de mi", "Afiliados", "Chat", ahí escribirán y pondrán lo que se les indique, yo les resalté en dónde hacerlo, para que se les haga más fácil.

Hemos realizado todos los cambios que queríamos, el fondo, el tipo de la fuente, el color de la fuente, le agregamos imágenes, cambiamos las imágenes que no nos gustaban, etc.

Todo es por sentido común, tienes que tener mucha paciencia, puedes hacerlo por intentos, es decir, cambia algo (aunque no sepas que es) hazle click a "Vista previa" y verás lo que te cambió, si no te gusto sólo deshazlo (con tu botón derecho del mouse y en "deshacer").

Este es el resultado final:



Espero que haya sido clara, es que no sé cómo hacerme entender, lol. Las imágenes que usé las hice con photoshop, con excepción de fondo. Cualquier duda espero poder ayudarles  Y como les prometí, les dejo de regalo la plantilla editada, sólo cambien sus datos, agregen sus links, etc. Así como les expliqué, ya previamente les señalé todo lo que tiene que rellenar. 


Pueden modificar la imagen de cabecera de esta plantilla, yo la deje en blanco para que ustedes pudieran ponerle el titulo que quisieran.

Espero les haya gustado, tardé mucho poniendo mis ideas en claro de mas o menos cómo les iba a mostrar las cosas, pero les repito, es por sentido común image Dejen sus comentarios y no olviden suscribirse al blog, participen en el 4 Give Away! Muchas gracias a todos!

18 comentarios:

  1. gracias gracias gracias ♥ realmente acabo de hacer mi blog y esto me fue de mucha ayuda

    ResponderEliminar
  2. Ahhh muchas gracias Sandra! No sabes cómo me sirvió esta entrada! (~*3*)~ Tenía muchas ganas de modificar mi plantilla y no sabía cómo hacerlo :c Ahora lo intentaré! En serio, me has salvado xD
    Saludos! :)

    ResponderEliminar
  3. Sandra me encantó este tuto, te pasaste! me sacaste de mis dudas como usar las plantillas de blogskin, yo igual modifiqué mi blog desde cero pero muchas veces he querido ponerle una de esas plantillas tan bonitas <3
    tu plantilla está hermosa!

    ResponderEliminar
  4. asdfasd te amé *u* explicas tan bien :) hehehe y yo una vez te pregunte como lo hacias hehehe .
    gracias ^^

    ResponderEliminar
  5. Eres Un Amor!!!!!! Gracias!!!!!! Me Pondré a Trabajars!!!!!

    ResponderEliminar
  6. Gracias por el tuto llevo tres dias intentado diseñarme un blog... pero por desgracia el codigo no me agarra TnT estudie HTML en la escuela, pero pego codigos, y no me agarran, incluso el tuyo :cc

    ResponderEliminar
  7. Gracias por esa infinita paciencia :3 cuando quiera cambiar el diseño de mi blog pondré esta plantilla y te daré los créditos por suspuesto *3* ~chu~

    ResponderEliminar
  8. Mil gracias Sandra *-* eres un amor, me gustaría saber de donde sacas esas imagen y fondos tan lindas? *^*

    ResponderEliminar
  9. Definitivamente me encanto! Este tipo de explicaciones no las habia leido en ningun lado u.u y queria editar mi blog (empezando por hacer uno). Gracias me sirvio. Pero.... que significa dashboard? lo quise cambiar a español y no se que significa jeje

    ResponderEliminar
  10. Annye Rondon: Las imagenes las saco de JapanLoverMe es una pagina dedicada a Japón y te regalan ilustraciones a veces c:

    Ana Rodriguez: Dashboard es como Pagina de Inicio c:

    ResponderEliminar
  11. OWW eres lo maximo sandra en serio ...me quedo super clarito todo en verdad ... *w* gracias y como digo es la primera vez que una famosa me contesta :3 saluditos de peru♥

    ResponderEliminar
  12. <3 Gracias por esta entrada Sandra ;A; La amé. Ahora si tendré un blog bonito que hasta me dará gusto entrar y empezar a escribir entradas. asdfghjk; espero que mi futuro blog vaya en buen camino.

    PD: Quería descagar la plantilla bonita que hiciste para nosotros... Pero no puedo; aparece el mensaje: "File Belongs to Non-Validated Account."

    ResponderEliminar
  13. gracias por el tutorual la verdad me ayudo mucho una pregunta como le podemos poner una lista de reproduccion ahora a la plantilla!!! gracias!!!

    ResponderEliminar
  14. Muchas gracias por el tutorial me sirvio bastante>.< podrias hacer un tuto de como personalizar el reproductor de musica porfis te lo agradeceria mucho!:D saludos!

    ResponderEliminar
  15. ¿Y cómo le añades el cuadro de seguidores para participar en el blog?

    ResponderEliminar
  16. Me parece bien que compartas tus conocimientos.

    ResponderEliminar

Gracias por tu comentario ♥

 

Template by Sandra Inoue