Personalizar Un Blog

¿Cuáles son los pasos necesarios para modificar una plantilla en blogger?

En primer lugar lo primero que hemos de hacer es elegir la plantilla que queremos poner. Las plantillas pueden ser de dos tipos: estándar o personalizadas.

Antes de comenzar a instalar cualquiera de las plantillas es muy importante que guardemos nuestra plantilla actual, para poder retornar siempre atrás. Para guardar nuestra plantilla recomiendo mirar este artículo.

Colocar una plantilla estándar
Para poner una plantilla estándar tendremos que hacer los siguientes pasos:
1. En nuestro panel de Blogger, elegimos la pestaña “Diseño”, y como subpestaña “Seleccionar plantilla nueva”.

2. A continuación, Blogger nos mostrará una lista de las plantillas definidas. A continuación, seleccionamos la plantilla que más nos guste y pulsamos sobre “Guardar plantilla”. Una vez hecho esto las plantilla ya tendremos la plantilla seleccionada.

Las plantillas de blogger, a pesar de ser las recomendadas de blogger, no tienen poque ser mejores que las que voy a presentar a continuación que más vistosas, simplemente en las de blogger nos aseguramos que podremos usar perfectamente los diferentes “trucos” presentados en muchas de las webs para dar un aspecto más agradable a blogger.

¿Cuales Son Los Pasos Necesarios Para Personalizar El color O Imagen De Fondo En Un Blog?

En esta ocasión aprenderemos cómo cambiar el fondo de nuestro blog por una imágen o cambiar la imagen de fondo actual por otra. Para ello ve a Diseño->Edición de HTML y busca este código:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma;
font-size: 100%;
width: 100%;
}

Es posible que tu código no se vea exactamente como este, ya que varía según su plantilla, lo importante es que localices el background que está dentro de body {
Ahora lo que hay que hacer es cambiar lo que está en rojo por este código:

background: url(URL de la imagen) no-repeat;
background-attachment : fixed;

Sólo cambia donde dice URL de la imagen por la dirección donde tienes alojada la imagen de fondo que vas a usar. Si quieres que el fondo se mueva cuando bajen la página con el scrollbar entonces omite la última línea del código.
Con ese código la imagen no se repetirá, pero si tu imagen es pequeña o un patrón (pattern) entonces elimina lo que está en negrita para que la imagen de fondo se repita.

Si sólo quieres cambiar el color de fondo en lugar de una imágen entonces sólo cambia el código de color, por ejemplo: background:#fffff; esto dará un fondo de color blanco.

¿Cuales Son los Pasos Necesarios Para Personalizar El Color & El Formato De El Texto De la Pagina & Del Titulo Del Blog?

Generalmente dependiendo de la persona que realizó el diseño de tu blog, todo lo que sea título, se define como head, o encabezado (si se traduce)
En mi blog este código que presento a continuación define la mayoría de los cambios que se pueden hacer en el título.
(esto es parte de lo que se define como, hojas de estilo (CSS): por ejemplo, en ellas se escribe: el titulo 1 será así(tipo letra, color, otros), el título 2 será asá, entonces, cuando comienza el código del blog, solo se utiliza la palabra titulo 1 y no es necesario volver a definir el color, el tipo de letra, el tamaño, cada vez que se quiera hacer algo con este título)
La hoja de estilo es independiente del tipo de plataforma que se utiliza, la única diferencia es en donde se puede editar esta CSS.

En el caso de betablogger la hoja de estilos es todo lo que se encuentra entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>. Algunas plantillas acceden de manera externa al archivo .css. En este caso, para realizar un cambio se debe descargar el archivo de la dirección en la que se detalla en la parte superior de la plantilla, luego realizar los cambios, despues subir el archivo nuevamente a un servicio que te lo permita y finalmente cambiar la url de la nueva dirección en donde alojaron el archivo. Si quieren tambien pueden copiar todo este codigo que esta en el .css y agregarlo al principio de la plantilla dentro de la correspondiente etiqueta que ya mencioné.
Si necesitan un servicio para subir sus archivos revisen este post: Paginas para Subir Archivos

COPIA EL CÓDIGO

/* Header */
#blog-header {
 color: #ffe;
 background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;
 margin: 0 auto;
 padding: 0 0 15px 0;
 border: 0;
 }
#blog-header h1 {
 font-size: 24px;
 color: #FFE;
 text-align: left;
 padding: 15px 20px 0 20px;
 margin: 0;
 background-image: url(http://www.blogblog.com/moto_son/topper.gif);
 background-repeat: repeat-x;
 background-position: top left;
 }
#blog-header p {
 font-size: 110%;
 color: #ffe;
 text-align: left;
 padding: 3px 20px 10px 20px;
 margin: 0;
 line-height:140%;
 }

y esta otra parte:

COPIA EL CÓDIGO

h2, h3, h4, h5 {
 margin: 25px 0 0 0;
 padding: 0;
 }
h2 {
 font-size: large;
 }
h3.post-title {
 margin-top: 5px;
 font-size: medium;
 }

ALGUNAS DEFINICIONES:

color: obviamente es el color, en header h1 es el del título y en p es el de la descripción.
text-align: alineación del texto, puede ser right(derecha), left(izquierda), center(centrado). Solo es necesario reemplazar en este caso left por la que quieran.
font-size: es el tamaño de la letra no deben borrar el px, solo cambien el numero.
padding: corresponde a los margenes (px o em). Si escriben un solo valor, por ejemplo 5px ó 1em, se asume que es el margen con todos los lados (arriba, abajo, derecha, izquierda). Si especifican 4 valores, por ejemplo
padding: 0; 5px; 3px; 0px; Esto significa que tendra 0px de margen superior, 5px de margen derecho 3px de margen inferior y 4px de margen izquierdo