17 julio 2013

Edición y Diseño | Personalizando una plantilla♥

Hola, ¿cómo estan?c: Soy Rocío y me estaré encargando de la sección de edición y diseño del blog: intentaré hacer cosas utiles y sencillas, cualquier duda que tengan dejan un comentario y yo les ayudaré.
Les enseñaré a modificar una plantilla ya creada para así personalizarla, es muy fácil y así no me meto tanto a detalle ya que el codigo html de las plantillas cambia según el autor de la plantilla.
La plantilla que utilizaremos para éste tutorial es de este sitio, tiene plantillas preciosas.
Esta en particular me gusta mucho... muy sencilla pero bonita y podemos modificarla muy fácilmente; fue la primer plantilla que usé en mi blog :3
Pueden encontrarla en ''Design Gallery'' ahí tiene otras plantillas bonitas y muchas similares a ésta, la bajan e instalan.
-instalen la misma que yo para que no tengan problemas en entender-
No creo que haya problema en editar ésta plantilla por qué:
1. Es gratis y disponible para todos para bajarla
2. No quitaremos los créditos que están hasta abajo del creador de la plantilla como diciendo ''es mía'' si no que tiene los respectivos créditos del que la creó, quitar eso si estaría mal.
3. leí todos sus términos y condiciones sobre la plantilla en la página de la creadora y no prohíbe hacer esto.
-Los créditos correspondientes a la creadora de la plantilla-

Si no sabes como instalar una plantilla en tu blog checa éste tutorial ajeno.
-Tutorial para instalar una plantilla- 



Como pueden ver es una plantilla preciosa! corazoncillos y bordes redonditos, muy simple
entradas-sidebar.
Pero queremos usar ésta plantilla para acomodarla a nuestro estilo!





Lo primero que vamos a hacer es entrar a nuestro menú de blogger y entrar al blog que queremos editar.. entrar a ''plantilla'' y luego edición html
La forma en que luce el codigo html de cada plantilla varia dependiendo del que la creó...por eso son diferentes los pasos para editar cada plantilla. El primer paso para editarla será encontrar las ''partes editables''  y para esto tenemos que encontrar las imagenes que se muestran en la plantilla, tipo la barra con los corazoncitos o la figura que sale en donde va la fecha etc.
Para esto damos ''click'' en el cuadro donde está todo el codigo y damos ''ctrl+f'' para que nos abra el buscador de palabras en el código; aparecerá en la esquina superior derecha.
Buscaremos ''photobucket'' y damos enter, lo que pasará es que nos resaltará con amarillo donde se encuentre esta palabra.
¿Por qué photobucket? porque es el servicio de imágenes que uso el creador de esta plantila para almacenar sus imagenes de la plantilla.

si copiamos el link que aparece ahí que es:
http://i200.photobucket.com/albums/aa231/free_blogger/InnerBGLLL.gif
Y lo abrimos en otra pagina nos mostrará lo que representa el link y ¡sorpresa! es la imagen con corazones que conforma la plantilla, a esto es a lo que me refería, ahora lo que tendrán que hacer es guardarla y abrirla en su editor para modificarla a su gusto.
-Por el momento no le movemos al codigo html-

Yo uso photoshop, es el que más opciones tiene y me gusta para trabajar, se supone abramos la imagen solo para guiarnos en cuando tamaño y esas cosas, así tenemos una base en que guiarnos.
Empezaremos a modificar esto a nuestro gusto: ¿ cambiarle de color?, ¿ modificar los corazones por otras figuras?, ¿Cambiar las partes redondeadas por otro diseño? ¡Sean creativos! >3<

A mi se me ocurrió hacerlo tipo hoja de una libreta~ así que iré con esa idea.
Texturas que usé para la libreta: >>Aqui<<
Por cierto, si tienen pensado cambiar el color de fondo de su blog, tendrán que cambiar el color de lo moradito que sale ahí o quitarle el fondo.
Recuerden que esto se va a repetir una y otra vez por lo que el color tiene que ser uniforme o de forma que no se vea raro al repetirse.
La mía quedó así(le puse fondo negro para que lo aprecien, el que usé no tiene)...ahora el siguiente paso será subirla a algún servidor de almacenamiento de imagen y obtener el link! C: yo uso photobucket.
>>Aqui<< un tutorial por mi sobre como subir imagenes a photobucket.
Otros hosting de imagenes que pueden usar: Tinypic.com / http://imageshack.us/ 



¿Recuerdan la parte del código donde encontraron la imagen que editaron? pues ahí pegaremos nuestro nuevo link.
Lo que tenemos que borrar es lo que está entre paréntesis -los paréntesis no- y pegar nuestro nuevo link  entre estos.
Asegúrense que sea el link de la barra lo que están cambiando xD si no pondrán la imagen en otro lado, copien el link y asegúrense que es el de un principio.

Borremos el antiguo y entre los paréntesis pegamos el nuevo link de imagen
background: url( Aquí el nuevo link de tu imagen) repeat-y; 
Le damos en preview para ver como se ve con éste cambio c: y podemos notar que se cambia la barra de corazones por el nuevo diseño que hemos hecho.
Si todo se ve bien le damos guardar.



 Vemos nuestra plantilla y así es como nos queda:



Y eso es básicamente todo, casi todas las plantillas que es de otros autores y no de blogger son de ésta forma, por lo que modificar algunas cosas es bastante sencillo y solo es cosa de buscar los enlaces de fotografías en las plantillas y editarlas.
-No todos los autores suben sus imagenes a photobucket por lo que debemos buscarle
-Con éste método puede buscar las demás imágenes en la plantilla ésta, solo le das ''enter'' otra vez a la barra de buscar en el código escrito ''photobucket'' y te resaltará el siguiente link, lo checas y editas y blabla...
-No quites los créditos del autor de la plantilla, que aunque sea descargable es su propiedad y tu solo la usas de base.

-Yo recomiendo crear un blog de pruebas para cuando queremos hacer una plantilla, así luego descargamos la plantilla y la instalamos en nuestro blog sin problemas de que movamos algo mal y arruinemos nuestro blog principal.
-Si queremos cambiar los textos podemos editarlo con las opciones de blogger... vamos a plantilla y en lugar de ir a editar html daremos en customizar>avanzado y ahí modificamos colores.

¿Quieren que les enseñe a cambiar el color o imagen de fondo de esta plantilla?
¿Cómo poner un header? ¿Cómo editarla más?
Díganme en los comentarios, también sus sugerencias de tutoriales o plantillas que quieren aprender a personalizar.
Estoy trabajando en una plantilla parecida a la de mi blog para proporcionárselas y enseñarles a editarla¿ les gustaría?

Fue todo por la entrada de hoy, espero les haya agradado y les sea de utilidad, recuerden que es cuestión de creatividad y mucha paciencia! verán que pronto podrán crear sus propias plantillas.
Así empecé a crear las plantillas de mi blog, es una forma muy sencilla y útil.
Pd: Siempre recuerden leer las condiciones de la plantilla que quieren modificar, pueden meterse en problemas.
¡Besos!




7 comentarios :

  1. Me encanta la entrada, yo soy media floja para esto, pero algun día lo haré

    Gracias Rocío =D

    ResponderBorrar
    Respuestas
    1. Por eso yo me tomo mi tiempo y lo hago de poquito a poquito, es pesado xDD

      Borrar
  2. Estupendo post!!besos
    dezazu.blogspot.com.es

    ResponderBorrar
  3. Yo tengo un problema cuando pongo plantillas , esque siempre que pongo una quedan muy chiquitas y sobra un buen de espacio en blanco al lado , y trato de ajustar el tamaño y termino hechandola a perder y mejor la quito >.< , crees que podrias ayudarme con eso?? Te lo agradeceria mucho *w*

    ResponderBorrar
    Respuestas
    1. Deja investigo bien y te digo sale? porque la verdad nunca me ha pasado *n* yo te contacto... besos>3<

      Borrar
  4. ¡Gracias! He intalado varios temas pero ninguno me gusta, así ya pordré personalizarlos :3 a mi me gustaría ver más cosas como esta xD como editar plantillas, lugares para descargarlas, recursos, etc :3

    ResponderBorrar
  5. ¡Gracias! Justamente estaba buscando como personalizar las plantillas de esa página, ojala puedan continuar muy activos con esta sección. Me gustaría saber como cambiar el tamaño de la cabecera, por ejemplo: En tu blog la imagen de la cabecera es muy grande y crece hacia abajo, algo así me gustaría aprender a hacer precisamente con las plantillas de ese sitio (espero haberme dado a entender > < )

    ResponderBorrar

Gracias por Leer Blogger's México