Ahora podréis encontrarme aquí

viernes, 3 de mayo de 2013

Tutorial a petición de Saku-chan - Plantilla blogger

Muy buenas queridos lectores ^^ 


Me encuentro en la recta final de mis clases. No me lo creo. Parece que fue ayer cuando empecé mi primer año en la universidad. Por ahora, una agradable experiencia. Pero quien diga que en Bella Artes no se hace nada... Todavía recuerdo cuando le pedí consejo a mi profesor de cultura plástica y visual del instituto. Le pregunté que si tenías que entrar con alguna base o algo. Me dijo que no, que podías entrar con cualquier bachillerato (por ahora todo correcto), y que no hacía falta que supieras pintar o dibujar. Que eso no lo machacaban. ¿Perdón? ¿Como? ¿Cuándo estudiaste tú? A mi me machacan mis cuadros -_- Dicen que "mis cuadros son muy oscuros. Que me paso con las sombras" Bueno, lo siento. No se como lo hago, pero siempre mi paleta acaba siendo de colores oscuros. Pero bueno... Vamos a dejar de lado mis clases (aunque me he desahogado ^^ )

Hoy vengo con algo nuevo, que nunca me lo había propuesto (por lo menos en lo relacionado con blogger) pero ha sido una petición de Saku-chan. Me hace feliz poder ayudar ^^ En serio. Así que si tenéis alguna petición, de lo que sea; anime, manga, música, photoshop, blogger, etc. si está en mi mano, y puedo ayudaros, me encantaría ser de utilidad ^^

El tutorial de esta ocasión está relacionado con las plantillas de blogger. Yo no se hacer plantillas, pero si se modificar la plantilla sencilla de blogger. Así que os voy a hablar de lo que yo se. Espero que os sea de ayuda. Y también que te ayude, Saku-chan ^^

¿Qué tal lleváis el nuevo aspecto de la plantilla de HTML? Al principio no entendía ni jota. Pero creo que ya lo he pillado.

Cuando lleguéis a la parte de la plantilla , os aparecerá algo como esto. La primera vez que lo ví me quedé en plan ¿WHAT? ¿Donde está mi "plantilla"? XDDD
Lo que pasa es que le tienes que dar a las flechitas de la izquierda, para "ampliarla" Supongo que sería lo que antes era "expandir artilugios" que tenía la versión antigua.

Al darle click en la primera flecha, se abrirá lo que sería la "plantilla".

CONSEJO: ¿Os habéis fijado que hay partes con distintos colores? Pues tenerlos muy presente. Si cuando modifiquéis la plantilla, alguna parte que esté en un color, cambia a otro (y no sabéis porque), lo más seguro es que esté mal cerrado, y tengáis que cerrarlo (</ *y lo que venga*>)

Yo siempre uso la plantilla sencilla de blogger. No se como aparecerá en las demás plantillas los códigos. Supongo que no hay mucha diferencia.

LAS COLUMNAS.
Normalmente eso es lo único que cambio, ya que me gusta la plantilla sencilla. En mi plantilla aparece algo como esto. Os pongo al lado, lo que sería cada cosa, según lo que he experimentado con la plantilla.

/* Widgets
----------------------------------------------- */
.main-inner .column-left-inner {
padding: 0 0 0 20px;
}
.main-inner .column-left-inner .section {
margin-right: 0;
}
.main-inner .column-right-inner { *si queréis "colorear" TODA la zona de la columna IMAGEN 1*
padding: 0 20px 0 0;
}
.main-inner .column-right-inner .section { *si queréis "colorear" la zona que OCUPA los gadgets IMAGEN 2*
margin-left: 0;
}
.main-inner .section { *tanto SIDEBAR como la COLUMNA DE EN MEDIO, que sería las entradas IMAGEN 3*
padding: 0;
}
.main-inner .widget {
padding: 0 0 15px;
margin: 20px 0;
border-bottom: 0px solid $(widget.border.bevel.color);
}
.main-inner .widget h2 { * los TÍTULOS de los gadgets. Pero también se cambia la FECHA*margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}
.footer-inner .widget h2 {
padding: 0 0 .4em;
}
.main-inner .widget h2 + div, .footer-inner .widget h2 + div {
padding-top: $(widget.padding.top);
}
.main-inner .widget .widget-content {
margin: 0;
padding: 15px 0 0;
background: url()right no-repeat;
}
.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
margin: -$(widget.padding.top) -15px -15px;
padding: 0;
list-style: none;
}
.main-inner .sidebar .widget h2 { *solo se cambia el TÍTULO de los gadgets*
border-bottom: 1px solid $(widget.title.border.bevel.color);
background:#A9F5F2;
text-align: center;
font-size:20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 30px;
border-bottom: 4px dotted #BE81F7;
}
.main-inner .widget #ArchiveList {
margin: -$(widget.padding.top) 0 0;
}
.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
padding: .5em 15px;
text-indent: 0;
}
.main-inner .widget #ArchiveList ul li {
padding-top: .25em;
padding-bottom: .25em;
}
.main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}
.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
border-bottom: none;
}
.main-inner .widget .post-body ul {
padding: 0 2.5em;
margin: .5em 0;
list-style: disc;
}
.main-inner .widget .post-body ul li {
padding: 0.25em 0;
margin-bottom: .25em;
color: $(body.text.color);
border: none;
}
.footer-inner .widget ul {
padding: 0;
list-style: none;
}
.widget .zippy {
color: $(widget.alternate.text.color);
}
.sidebar .widget { *los GADGETS se ven separados, como el que tengo yo IMAGEN 4*margin: 10px 2px 20px;
background:#FBEFEF;
padding: 17px 3px;
background:#FBEFEF;
border-bottom: 5px solid #DF013A;
border-radius:30px;
box-shadow: 0 0 5px #ccc;
border-bottom: 5px solid #DF013A;
border-top: 5px solid #DF013A;
}


IMAGEN 1 

IMAGEN 2
no se si se nota la diferencia entre esta imagen y la anterior -_- 

IMAGEN 3 

IMAGEN 4 

Teniendo en cuenta para que sirve cada apartado, podéis editarlo como queréis. Cambiando el fondo, poniendo borde, o redondeandolo.

.sidebar .widget {
margin: 10px 2px 20px;
background:#FBEFEF; *fondo de los gadget*padding: 17px 3px;
background:#FBEFEF; *fondo de los gadgets*border-bottom: 5px solid #DF013A; *borde de abajo.*border-radius:30px; *borde redondeado*box-shadow: 0 0 5px #ccc; *el color del borde de las cajas (gadgets)*border-bottom: 5px solid #DF013A;
border-top: 5px solid #DF013A; *borde de arriba*}

Aquí podréis mirar los tipos de bordes, y más maneras para cambiar, tanto los sidebar, como los títulos de estos.

También podéis modificar vuestra plantilla, combinándolo con el diseñador de plantillas de blogger. Pueden elegir la opción de fondo transparente, separando cada columna.



Para los post sería algo parecido. Lo mejor es ir probando, y mirando que semejanzas hay entre los apartados del widget y del post en la plantilla.

Hay una cosa que me he percatado con esta plantilla, y es que cuando modificas algo, y te da error, te dice lo que falta. El problema es, que si no sabes sobre código HTML, pues no sabes donde poner lo que te falta. Aunque por intuición más o menos yo me defiendo.


Pues con esto termino la entrada. Como dije no se mucho sobre hacer plantillas, pero el saber para que sirve cada apartado me ayuda a la hora de cambiar el diseño ^^ Como ya dije, no dudéis en hacer una petición. Si os puedo ayudar :) Me hace feliz ser útil.

Besos de barro
Furukawa=^-^=

7 comentarios:

  1. que pedazo de tuto muchas gracias n-n

    ResponderEliminar
  2. :o gracias por el tutoo :3
    Saludos , que tengas un bue fin de semana! :3

    ResponderEliminar
  3. Hola Fukurawa! Qué bueno que te haya gustado la insignia!
    Te envié un email! Te llegó? Responde en mi blog por favor si te llegó el email, o directamente responde el email xD
    Saludos.

    ResponderEliminar
  4. amiga!!!!!!! muy muy buen tuto esta super bien explicado mira como son las cosas justo hoy me empece a llevar mejor con el editor porque sin previo aviso aparecieron algunos codigos que pense perdidos, pero si no es por ti nunca hubiera sabido lo que aprete, ahora entiendo porque estan esas reberendas flechas XDD se agradece en grande este aporte y gracias por tomar mi peticion de ayuda :D

    ResponderEliminar
  5. MUY BUEN APORTE
    yo tambien solo cambio las columnas la cabecera y poco mas y queda todo bonito XD, el tuyo me ha encantado!! el diseño y esta entrada me la voy a guardar por si las moscas, algo controlo pero cosas basicas de un html

    NOS LEEMOS!!
    www.eldiadiordeshira.blogspot.com

    ResponderEliminar
  6. muy buen tutorial, gracias por el ^^

    ResponderEliminar
  7. Muy buen tutorial amiga, de verdad nos ayuda mucho, estoy poniéndome al dia para comentar tus entradas amiga disculpa el retraso x_U

    ResponderEliminar

Todo comentario se agradece (siempre que sea constructivo y no destructivo) Gracias por el comentario. ¡Me has alegrado el día! =^-^=
-No Spam

LinkWithin

Related Posts Plugin for WordPress, Blogger...