Tres columnas en el pie del blog

Hoy he instalado tres columnas en el pie de este blog, ¿Te apetece ponerlas en el tuyo?

Ante todo debemos retirar cualquier elemento que tengamos colocado en el pie del blog desplazándolo momentáneamente a la sidebar.

Accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Cambiaremos la línea <b:section class='footer' id='footer'/> por este código:

<div id='footer-columna-contenedor'>


<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>


<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>


<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>


<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>


<div style='clear:both;'/>

<p>

</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>


<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>


</div>

<div style='clear:both;'/>


</div>

Una vez hemos añadido el código anterior antes de ]]></b:skin> pegaremos este nuevo código.

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

Guardamos los cambios y ya podemos colocar los elementos que habíamos retirado a la sidebar en el sitio que deseemos, el resultado final seria este:

Cambiar de lado la sidebar

Shani me hacia la siguiente pregunta: ¿Como puedo mover una columna wrapper de la dcha al lado izqdo?

A lo que se refiere Shani es como puede mover la sidebar que tiene situada a la derecha de su blog para ponerla en el lado izquierdo.

Para colocar la Sidebar del lado derecho al izquierdo, accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

La parte que permite el ajuste es donde dice float y lo haremos partiendo de left (izquierdo) o right (derecho).


En la parte de código #sidebar-wrapper cambias el float, en este caso lo modificas por right (derecho) y en #main-wrapper, cambias el float por left (izquierdo).

Referente a la pregunta que me hace Shani dejaremos el código de la siguiente forma:

#main-wrapper {
  width: 410px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Y el resultado será este:

Bordes

Si queremos dar un nuevo aspecto a nuestro blog, podemos utilizar los distintos tipos de bordes para delimitar y diferenciar espacios en el, los bordes los podemos definir en diferentes tipos, grosores y colores siguiendo el siguiente esquema:

border: grosor tipo color;

grosor: se expresa en píxeles

tipo: define el aspecto del mismo

color: código html del color deseado


Tipos de borde:

dotted: Borde punteado

dashed: Borde discontínuo

solid: Borde contínuo

double: Borde doble

groove: Borde con sombra oscura

ridge: Borde con sombra clara

inset: Borde 3D hacia afuera

outset: Borde 3D hacia adentro


Ejemplo:

border: 10px dotted black

border: 10px dashed black

border: 10px solid black

border: 10px double black

border: 10px groove black

border: 10px ridge black

border: 10px inset black

border: 10px outset black

También podemos ubicar nuestro borde:
Parte superior: border-top
Parte inferior: border-bottom
Parte izquierda: border-left
Parte derecha: border-right

La propiedad "text-decoration"

El editor de entradas de Blogger entre muchísimas mas cosas, no admite propiedades para dar efectos a nuestro texto, hoy veremos la propiedad "text-decoration".

Si aplicamos esta propiedad a una palabra o frase esto nos permite añadir distintos tipos de efectos que no podemos obtener mediante el editor de entradas de nuestro blog.

Los valores que podemos obtener con "text-decoration" son:

·none: ninguno

·underline: subrayado

·overline: sobrerayado

·line-through: tachado

·blink: parpadeo (No funciona en Internet Explorer)


Para aplicarlo tenemos que usar los siguientes códigos, poniendo el texto que queremos resaltar donde pone "NUESTRO TEXTO":

<span style="text-decoration: underline;">NUESTRO TEXTO</span>

<span style="text-decoration: overline;">NUESTRO TEXTO</span>

<span style="text-decoration: line-through;">NUESTRO TEXTO</span>

<span style="text-decoration: blink;">NUESTRO TEXTO</span>

Y el efecto obtenido es el siguiente:

Texto subrayado

Texto sobrerayado

Texto tachado

Texto en parpadeo (El efecto parpadeo no funciona en I.Explorer ni en G.Crhome)

Formulario de comentarios

Blogger nos ofrece tres posibilidades para que nuestros visitantes puedan dejar sus comentarios, para ello seguiremos los siguientes pasos:

1.- Panel de Control.
2.- Configuración.
3.- Comentarios.
4.- Ubicación del formulario de Comentarios. Es aquí donde encontraremos las tres opciones:

Página completa.

Ventana incrustada.

Entrada incrustada a continuación.

Esta última opción del formulario incrustado a continuación de los propios comentarios en plantillas originales (que no hayan sufrido modificaciones) funciona sin dar problemas, pero en plantillas modificadas suele darlos.

En oloblogger he encontrado la solución a esto, para ello debemos buscar esta parte de código en nuestra plantilla:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

Y lo sustituiremos por este:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

Recuerda que aunque yo pruebe antes los trucos, vosotros debéis hacer copia de vuestra plantilla por si algo no funciona bien, yo siempre lo hago.

Conociendo nuestra plantilla: 2-Wrappers

Para poder ubicarnos y identificar las partes de nuestra plantilla debemos saber en primer lugar que es cada cosa, hoy hablaremos de los “wrappers”, o sea de las capas que forman nuestro blog.

Distribución:
En base al siguiente esquema de colores,

La parte mas externa del blog se llama outer-wrapper y es la encargada de englobar el resto de capas.

header-wrapper, Parte superior del blog.

content-wrapper, Es en esta parte donde se ubica la main-wrapper y la sidebar-wrapper.

Ver el siguiente esquema en base al color:

(Click en la imagen para ampliar)

Conociendo nuestra plantilla: 1-Ubicación

Que tengamos un blog más o menos bonito u original depende de las modificaciones que podamos hacerle a nuestra plantilla, pues es esta la encargada de que todo funcione. Y a tal efecto es muy importante que sepamos identificar cualquier parte de la misma antes de hacer cualquier modificación importante
Un buen consejo es que antes de hacer ningún cambio guardemos siempre una copia de nuestra plantilla por si algo no acaba de salir bien, otro buen consejo es utilizar la vista previa para comprobar si el cambio a funcionado.
A nuestra plantilla se accede a través del panel de control del blog seleccionamos la pestaña “Diseño” y en ella encontraremos el enlace “Edición Html”.
Es aquí donde podemos ver el código de nuestra plantilla.

En próximos post iremos viendo cuales son las partes que forman nuestra plantilla y para que sirve cada cosa.

Text transform

Seguramente en mas de una ocasión os habréis dado cuenta que por ejemplo al poner el título en un post no aparece tal y como lo hemos escrito, por ejemplo ponéis “Título” y al publicarlo aparece “TÍTULO” de igual forma puede suceder que os aparezca todo en minúsculas, o que el inicio de cada palabra venga en mayusculas.

Partiendo de una entrada en el blog de Gema donde nos explica como solucionar este problema.
Vemos que los datos que aparecen son por la propiedad text-transform, la cual aparece añadida en la CSS de nuestra plantilla.

¿Que significa cada propiedad?
Capitalize: Todas Las Palabras Del Texto Empiezan De Esta Forma.
Uppercase: TODO EL TEXTO APARECE EN MAYÚSCULAS.
Lowercase: todo el texto aparece en minúsculas.
None: El texto aparece tal y como lo hemos escrito.

Si queremos controlar la propiedad text-transform de nuestro blog, en primer lugar tenemos que localizar que parte de nuestra plantilla queremos modificar.

Todo el Blog: body {
Título del blog: #header h1 {
Descripción del título: #header.description {
Entradas: .post {
Sidebar: .sidebar {
Pie de las entradas: .post footer {
Comentarios: #comments {
Y también en los enlaces, una vez ubicado body { a continuación
a:link es el enlace tal y como se ve
a:visited es el enlace visitado
a:active es cuando pulsamos en el
a:hover es cuando nos situamos encima con el cursor

Fuente:

Eliminar la numeración de los archivos

En un comentario del post anterior me preguntaban si también era posible eliminar la numeración de los archivos:

Pues si, es igual de sencillo como eliminar la numeración de las etiquetas y para hacerlo iremos a nuestra plantilla, expandiremos artilugios y localizaremos el siguiente código:

(<data:i.post-count/>)

Puedes utilizar las teclas Ctrl + F para encontrar mas rápido el código.

Una vez localizado, tal y como hicimos en las etiquetas lo eliminamos y ya no aparecerá este numerador.

Recordad de utilizar la vista previa antes de aceptar el cambio realizado, si ya no aparece el numerador podemos guardar y listos.

Partes básicas de nuestra plantilla

Cuando empezamos a manipular nuestra plantilla nos encontramos con que no sabemos muy bien donde ubicar ciertos códigos o elementos, a tal efecto he creado un pequeño croquis para que os sirva de guía y así poder identificar las partes básicas:




Si ahora lo que queremos es ajustar el tamaño de las partes mirar esta entrada.

Cambio de plantilla sin perder los artilugios

Cuando queremos cambiar de plantilla en nuestro blog tenemos el problema que perdemos los artilugios o widgets instalados.
Si nos interesa conservarlos y no perderlos podemos hacerlo de una manera muy fácil y sencilla.
Para poder conservar estos artilugios en la nueva plantilla, sencillamente (antes de instalarla) vamos a Edición de HTML y sin expandir artilugios buscamos el siguiente código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Una vez localizado veremos en la parte inferior del mismo los widgets que tenemos colocados en nuestra plantilla, más o menos así:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog'
type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales'
type='Profile'/>
(Etc.)

Una vez localizados, lo copiaremos y guardaremos en nuestro Bloc de Notas o pegados en documento de Word, una vez guardado ya podemos instalar la nueva plantilla. En el momento de guardarla, Blogger nos advertirá de que se borrarán los artilugios, sin aceptar iremos a buscar los códigos que hemos guardado en el Blog de Notas y los pegaremos debajo de la línea mencionada, ósea en el mismo lugar de nuestra nueva plantilla, recuerda que la línea es esta:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Ahora pegaremos los widgets, justo después de la línea anterior y antes de cerrar el código, este se cierra con:

</b:section>

El resultado final seria este:

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog'
type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales'
type='Profile'/>
</b:section>

Recuerda que antes de guardar los cambios siempre es mejor utilizar la vista prévia.

Visto en: Randomness

Buscar en tu plantilla

¿Sabias que para buscar cualquier código en tu plantilla puedes hacerlo con el buscador que lleva incorporado Blogger?

Es tan fácil como apretar las teclas "Ctrl" + "F", en el interior del cuadro de busqueda escribimos el código que estamos buscando y este nos lleva directamente a él.

Seguiremos con estos consejos breves.

Actualización 07/02/2009:

Actualmente el cuadro de busqueda aparece en otro formato al final de la página.

Enmarcar el blog

Hoy vamos a enmarcar los espacios de nuestro blog en la plantilla Minima y lo haremos añadiendo una sencilla línea en los CSS de la plantilla.

Podremos añadir grosor: border ?px;

Podremos variar el color: #000000;

Podremos enmarcar la sección que nos interese, partiendo de las siguientes partes en que se divide nuestro blog:

#main-wrapper{ es el espacio donde van las entradas o post.

#sidebar-wrapper{ es la columna lateral de nuestro blog.

.post-footer{ es el pie del blog.

#outer-wrapper{ enmarca todo el blog.

#header-wrapper{ enmarca la cabecera del blog.

Teniendo todos los espacios ubicados solo tenemos que ir a nuestra plantilla y seleccionar Edición de HTML, una vez allí en cada sección que nos interese añadiremos una línea con el siguiente código:

border: dotted #000000; 4px
Recuerda que puedes variar el color #??????; y tambien el grosor ?px, es cuestión de probar el que mas nos guste.

Solo nos queda poner el diseño que mas nos guste:
border: dotted #000000; 4px; (puntos)
border: dashed #000000; 4px; (guiones)
border: solid #000000; 4px (línea)
border: double #000000; 4px (doble línea)
Etc., segun tabla estilos.

Una vez tenemos los espacios enmarcados si queremos poner un color de fondo, tendremos que añadir el siguiente código:

background-color: #??????;
Ponerlo a continuación del código anterior, en todas las secciones de la plantilla que nos interese.

Espero os sea de utilidad,

Modificar ancho plantilla minima

Sabias que una de las plantillas mas fáciles de personalizar es la Mí­nima, haciendo unos ajustes y cambios en su código puedes conseguir un aspecto único y original. Hoy vamos ha hacer algo tan básico como modificar el tamaño en que nos viene predeterminada.

¿Quieres probar y hacer estas modificaciones? Pues vamos a ello:
En primer lugar, no situaremos para saber que es cada elemento, encontramos:

#header-wrapper { es la Cabecera del Blog
#outer-wrapper { es el cuerpo del Blog
#main-wrapper { es la parte de las entradas, donde van los post
#sidebar-wrapper { es la columna lateral, o sidebar
#footer { es el pie del blog


Para empezar entraremos en Edición HTML de nuestra plantilla y iremos localizando:

CABECERA DEL BLOG:
#header-wrapper { Aqui cambiaremos la lí­nea del width por:
width:850px; es el total de ancho que nos interesa que quede el blog, así­ haremos que la cabecera se ajuste al espacio que ocupan las entradas o post y la sidebar juntas.

CUERPO DEL BLOG:
#outer-wrapper {

Veras que pone lo siguiente:
#outer-wrapper {
width: 660px;
Cambiaremos esa lí­nea por width: 850px;

PARTE DE LAS ENTRADAS O POST:
Seguidamente modificaremos la parte donde van las entradas o post, por eso tenemos que buscar más abajo, donde dice lo siguiente:

#main-wrapper { vamos a cambiar la línea del width (ancho) por esta: width: 500px;

SIDEBAR:
Si seguimos bajando veremos lo siguiente:
#sidebar-wrapper { (hace referencia a nuestra sidebar o columna laterial) aquí­ cambiaremos la lí­nea del width (ancho) por esta:
width: 250px;

Y ya para terminar nuestros ajustes buscaremos el código del pie de nuestra plantilla:

PIE DEL BLOG:
#footer { (pie del blog) cambiaremos tambien el ancho para darle el total del blog entero, cambiaremos el width por esta:
width:850px;

Consejo: Recordar que hemos cambiado la medida que nos venia fijada por defecto dándole un máximo de 850, tened en cuenta que la suma de los dos valores no deben nunca sobrepasar la anchura total del blog en este caso 500 + 250: 750, los píxeles sobrantes que son 50 cosa que nos dará una distancia optima entre los elementos y así­ tendremos una correcta visualización del mismo. De todas formas podeis probar con distintos pí­xeles en cada zona.

Espero que os funcione, recordar que para ser precavido es muy importante tener copia de nuestra plantilla, y antes de grabar los cambios no está de mas hacer una visualización previa.