Formato del Blog

Descubrí este truco por casualidad, visitando el blog de Gema y me pareció estupendo puesto que siempre estaba indeciso sobre si los que visitan mi blog verian mejor o peor el blog y no hacia mas que rectificar el tamaño de las letras y nunca quedaba satisfecho.
Por lo tanto ahora con este truco me quedo mas tranquilo, puesto que si el que me visita no lo puede ver a su gusto puede cambiarlo ampliando o reduciendo el tamaño del blog.

He puesto esta frase en un elemento HTML y la he colocado encima del Blog y asi todas mis visitas sabran que tienen que hacer.

´´Si no es de tu agrado el formato del blog, puedes agrandarlo o disminuirlo, clicando en la tecla Ctrl y moviendo la ruedecilla del mouse arriba o abajo``

Así de fácil y sencillo.

Efecto "Leer Mas"

Lo apliqué hace poco en el blog, "leer más" con la particularidad de recoger el texto.
Si buscas la forma de aplicarlo no lo pienses más y vamos a empezar.

Nos situamos en Plantilla/Edición HTML y marcamos la casilla para expandir plantillas de artilugios.

Después buscaremos en nuestra plantilla </head> y justo antes añadimos...

<script src='http://forevergema2.googlepages.com/functiontoggleIt2.js' type='text/javascript'/>


Después vamos a buscar lo siguiente:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Y lo vamos a sustituir por:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>





Donde dice SIGUE LEYENDO y CIERRE TEXTO puede sustituirse por otra frase.

Por último debemos añadir un código en las entradas donde aparecerá "Leer más"

Para facilitar la tarea y evitar tener que copiar y pegar ese código cada vez que deseemos añadirlo hay una solución y es aplicarlo en la plantilla de entrada.

¿Dónde está eso?
Nos situaremos en Plantilla/Opciones/Formato casi al final encontraremos la plantilla de entrada, es una ventana con opción para escribir donde añadimos:

aquí texto
<span id="fullpost">
aquí el texto escondido
</span>

Ahora cada vez que editamos una entrada aparecerá ese código, escribiremos en la primera línea donde dice "aquí el texto" el inicio de la entrada y en la segunda línea de "aquí texto escondido" es el texto que aparecerá al expandirse la entrada.

Traductor

Para poner un traductor del blog como el que tengo yo, debes pegar el siguiente codigo en un elemento de HTML y luego lo mueves a donde mejor te parezca

CODIGO:

<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation"target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://luisgontad.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>

Debes modificar donde dice http://luisgontad.blogspot.com/ por la url de tu blog.

Etiquetas¿Para que sirven?

Cuando escribes una entrada, abajo puedes ver esto.


Aparte de los botones para publicarla y guardarla, tienes otras opciones.
Si pinchas en Opciones de entradas verás que por aquí puedes cambiar la fecha y la hora de publicación de la entrada e incluso permitir o no comentarios.
Para cambiar la fecha o la hora, borras la que hay escrita y escribes la nueva. (Recuerda hacerlo en el mismo estilo o volverás loco al sistema)



La línea en blanco sirve para colocarle etiquetas a la entrada.
¿Qué son y para qué sirven las etiquetas?
Las etiquetas son palabras que resumen o definen el tema de la entrada y ayudan a archivarlas, de manera que si tratas varios temas en tu blog, encuadrando en las etiquetas correspondientes cada entrada, quien entre puede ver todo lo que has publicado acerca de un mismo tema, de una vez.
Por ejemplo esta entrada que estoy haciendo estará en Entradas. Si pinchas en la etiqueta Entradas, podrás ver todas la que he hecho tratando del tema.
Si pinchas en Diseño, todas las que he hecho hablando de la pestaña Diseño, etc.
Tienen además la ventaja de ayudar a que los buscadores encuentren nuestros blogs más rápidamente.
Por poner otro ejemplo, en el blog de ideas para plantillas, están todas bajo la etiqueta plantillas blogger, de esta manera si alguien que nunca haya entrado en ninguno de mis blogs, escribe en un buscador, (p.ej. en Google): "plantillas para blogger" mi blog será de los que le aparecerán como resultado de la búsqueda.
Las etiquetas se escriben así: entradas, etiquetas, fecha, (si esta entrada tuviera todas estas así las escribiría), separadas por una coma y un espacio. Si la etiqueta tiene más de una palabra, por ejemplo esta que ves en la imagen, Fuentes y colores, la coma va al final de la última palabra.
Como he capturado las que hasta ahora he ido colocando puedes ver que están subrayadas y que algunas constan de más de una palabra.
Si ya has usado alguna, al escribir la primera letra se abre un menu con todas las que tienes que empiezan por esa letra para que puedas elegirla y te ahorres escribirla; y si pinchas en mostrar todas, las verás ahí abajo, para elegirlas sin escribir ni esa primera letra.

Enmarcar los Post

Como podeis ver he enmarcado lo que aparece debajo de las entradas, (pie del post o post footer), para separarlo de la entrada y diferenciarlo de ella.
Si quieres hacerlo entra en Plantilla/Edición de HTML (no es necesario expandir artilugios).
En el CSS busca la zona que empieza por /*Posts y en ella localiza el .post-footer {
Inmediatamente debajo añades esto:


border:solid 1px;
border-color:#006600;
padding:5px;

Descripción de datos:
solid es el modelo, puedes poner el que te guste más, dashed, dotted, etc.
1px es el grueso de la línea, a mayor número mayor grosor;
el número 000000 corresponde al color negro, pon el del color que prefieras,
padding es la separación del contenido a la línea que lo enmarca.

Vista previa y guardar si todo funciona bien.

Enmarcar el titulo de las entradas

Si te apetece enmarcar el título de tus entradas, has de localizar en el sector del CSS de tu plantilla este bloque:


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

y añadirle o variarle lo que ves en azul en este nuevo código

.post h3 {
margin:.25em 0 0;
padding:5 5 5px;
font-size:140%;
text-align:center;
text-transform:uppercase;
font-weight:bold;
border: 1px solid;
line-height:1.4em;
color:$titlecolor;}

Para modificar las líneas que lo enmarcan puedes utilizar varios parámetros diferentes.

Solid = línea recta; dotted = puntitos; dashed = rayitas; double = doble línea sólida; etc.

Para varíar el grosor de la línea, cambia el número en border: 1px.