Principiante: Editar tu plantilla blogger/Html


Hola mis truanes~! un saludo y un besote para mis seguidores ♥! les gusta el nuevo diseño? creo que por primera vez este diseño me agrada n-n♥ a ver cuanto dura~~ e-e bueno tengo unos premios que los tengo en espera solo dejenme vaciar mi lista de post ya programados :'D!  Bueno vamos a lo que vinimos ^^!

1.Esta plantilla está 100% editada desde la raiz: cual es la raiz? el HTML, imaginen un arbol la apariencia del blog y toda pagina web tiene su origen del HTML, sus flores es el valor logrado del cambio de este.
Recuerda que el lenguaje es solo codigo en ingles
Supongamos que este es el blog activo


Esta es la que decido aplicar n-n 'Picture Window'
Sin haberla editado

-y Este es el resultado de la edición












Existe la diferencia en detalles que no nos agrada por Ej.: el fondo en la img, o que ésta son muy espaciosa cosas por el estilo ...
-Para empezar a personalizar te recomiendo al momento de elegir los colores predeterminado de tu blog , escoge la imagen del fondo de este para que se te sea mas facil de combinar o hacer juego con las gadgets, enlaces etc...


3 backgrounds del mismo tema con distintos tonos para más backgrounds clik aqui
 Esos tonos son los colores a combinar no esta de mas que le adhieras otro(s) con tal de que arme el juego.la otra forma de que el background solo sea un color uniforme , existe pagina de combinacion 'paletas de colores' donde te serviran de mucho :DD!

Como Hize el Cambio?
Al tener el Tema del blog y sus colores, elige el diseño, si lleva cabezera o no , si la cabezara esta en la parte superior del blog o 'arriba' del 'post'-como es el caso- para aplicar haz click aqui

-Ahora como elimino el fondo transparente  blanco de tal plantilla?-
esta opcion es depende de cada plantilla algunas se realiza por medio de esta seccion:
/* Content
----------------------------------------------- */
Al igual que las otras plantillas para cambios generales, se encuentran es esa sección content : ya sea el estilo de link (haz click aqui para ver distintos hover de links) de los enlaces etc...

Pero otras plantillas como las picture windows en esta sección Main se encuentran los codigos de los fondos del contenido del blog y columnas:
/* Main
----------------------------------------------- */
Ambas resumidas en ]]><b:skin>


En este caso nos centraremos en Main: Solo elimina el contenido mostrado:

/* Main
----------------------------------------------- */

.main-outer {
  background: $(main.background);

  -moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  -webkit-border-top-left-radius: $(main.border.radius.top);
  -webkit-border-top-right-radius: $(main.border.radius.top);
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

  -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

quedando así: .main-outer {

}
puedes dejar  el background: $(main.background); por si quieres darle color o una imagen...background:url('url de la img'); en todos los cambios le das a vista previa!

Para darle color y estilo a la columna depende de la posiscion es decir:
si es a la izquierda:
.main-inner .column-left-inner {
  padding-left: 0;
}
y si es a la derecha:
.main-inner .column-right-inner {
  padding-right: 0;
}
 Recuerda: que estos cod. se encuantran en la misma sección de Main

Para personalizar es necesario agregarles antes de ]]></b:skin> este codigo: puedes agregarle mas o quitarle detalles:

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
Como pueden notar este es codigo en 'general' que se aplica para ambas columnas ya que contiene ambas descripciones .column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;.... pueden editar el borde: ya sea _____ (linea) ----- (descontinuada) ....... (puntitos) y muchos más cada uno tiene un nombre HTML clik aqui para saber.
Tambien pueden editar el padding: que es el 'espacio' y margin el 'margen'.

El -moz-border-radius:0px;-webkit-border-radius:0px; es la curvatura de las esquinas: el moz para firefox y webkit para chrome , safari etc... click aquí para aprender más o click aqui si quieres tener algunos modelos listos- Recuerda colocarles punto y coma ( ; ) al final de cada caracteristica y cerrar con llave la sección ( } )

Tambien puedes editar el titulo de los Gadgets ; esto se realiza dentro de la sección
/* Widgets
----------------------------------------------- */

Para proseguir con esta idea agrega este cod. .h2 dentro de dicha sección , es decir;
.h2{
background:#ddf;
text-align:center;
border-bottom:5px dotted #000;
}
Esta hecho por mi asi que no se si estrá feito o bonito xD pero ya tienen las caracteristicas principales:
Background (fondo) si quieres una imagen recuerda colocar url:('') como se describió más arriba; si el titulo esté centrado " text-align:center;" o a la derecha "text-align:right;" y el borde:
border-bottom/abajo; border-top/arriba; border-left/izquierda o border-right/derecha el grosor se maneja numericamente en este caso el 5px es el valor del grosor esal gusto de cada quien si lo coloca en 1px ;10px etc dotted es la forma del borde y su color por medio del color en html click aqui para colores HTML.

El caso del titulo del post casi repetimos el caso anterior pero en distinta sección:
/* Posts
----------------------------------------------- */
solo se diferencia en que no tendras que agregarle el .h2 sino solamente las caracteristicas dentro de

h3.post-title {
quedando de esta manera:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
background:#ddf;
text-align:center;
border-bottom:5px dotted #000;
}
Respecto a Footer, (pie de pagina dond se encuentra la atribución) puedes eliminar el fondo transparente negro: en esta sección;

/* Footer
----------------------------------------------- */

Elimina su primera caracteristica general, mostrada a continuación:

/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background);

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-webkit-border-top-left-radius: $(footer.border.radius.top);
-webkit-border-top-right-radius: $(footer.border.radius.top);
-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

Quedando vacia:
.footer-outer {
}

Puedes tener la misma opcion con el fondo transparente blanco Dejando solamente la caracteristica: background.

Opcional


-Si las pestañas de tu blog son de plantilla puedes centrarlas dendo click aqui
- Puedes modificar el estilo de tu menú, pinchando aquí (busca la sección: tutoriales)!
-Editar las imagenes más otros lindos menús clik aquí
-Para decorar tu blog con avatares click 1-2 Gif 1




7 comentarios:

Karkat Bamboshi dijo...

Muy interesante. Soy soy muy mala para codigos, pero esta entrada me servirá de mucho ;)
Saludos!

Luis Garcia dijo...

Ah vale, tranquila no pasa nada n.n para cualquier cosa ya sabes :)

Luis Garcia dijo...

POr cierto, buen diseño :D

sнιиε dijo...

volveré a mirarlo mejor cuando tenga un tiempo para editar c:
se ve increíble el resultado *O*
besitos

Sakuya Aikawa dijo...

ahh esta muy bien explicado!!!!!! no sabia que era plantilla de blogger esta que veo ahora dios te juro que me has engañado pense que era blogskin, quedo precioooosa realmente sabes lo que haces, ojalas puedas ayudarme con lo de la pregunta no hay apuro asi que tomate tu tiempo :D

Lee Rae Mi dijo...

gracias por la ideas^.^
saludos y besos

daniSasuNaru dijo...

Oh dios mio! esta es mi entrada favorita, aki eh aprendido mucho y si me olvido vuelvo aki. gracias saludos...

Participo en..

Nada

ASK~~

Creditos

Plantilla:#sencillo · editado por:Kei · con ayuda de:1234 · imágenes sacadas de Tumblr