viernes, 8 de agosto de 2008

Haciendo una plantilla blogger.Otro intento

Pues nada, hago otro intento de hacer una plantilla blogger.
Lo primero que escojo es una plantilla chunga de esas que no tienen na.
Aqui guardo las plantillas (N.A. para conseguir meter este iframe de microsoft, ha y que meterlo dentro de un div y editarlo como edicion html de entrada, porque si no, se va todo a tomar por saco.)
Aqui estan los ficheros que he necesitado.





Si miramos solo las secciones: vemos lo siguiente:

<body>
<div id='outer-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
....................
</b:section>
</div>
</body>


solamente hay una seccion, y eso es porque no hay columnas, solo un cuerpo en la plantilla.



Ahora la seccion y los widgets.



<body>
<div id='outer-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='miratelo (cabecera)' type='Header'>
</b:widget>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
</b:widget>
<b:widget id='Profile1' locked='false' title='Hakk�mda' type='Profile'>
</b:widget>
<b:widget id='Slideshow1' locked='false' title='Slideshow' type='Slideshow'>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
</b:widget>
<b:widget id='Feed1' locked='false' title='GosuBlogger' type='Feed'>
</b:widget>
</b:section>
</div>
</body>
Estas son las partes del blog, para verlas bien, hay que entender como se mete el html en estos widgets.

Cada widget tiene esta forma en la plantilla

<b:widget .....>

<b:includable .....>
</b:includable .....>

<b:includable .....>
</b:includable .....>

....
....
<b:includable .....>
</b:includable .....>

</b:widget .....>

Cuando accedemos al blog, blogger lee esta plantilla y genera el html del blog de los includables, de este modo :
Se incluye el contenido del includable de identidad main. Dentro de este main, se puede usar b:include para incluir otros b:includable, y así se genera el código.

Para ver esto mejor, buscamos los include de identidad main.
<b:includable id='main'>

y inmeditatamente despues escribimos un parrafo para luego poner la plantilla y probar que ocurre.
<b:includable id='main'>
<p>Esta es la seccion....</p>


Pues nada, voy a hacerlo, podeis ver el fichero correspondiente.
En este caso solo hay tres widgets, el header, post1, adsense. El texto del adsense no sale por lo que sea, pero nos da igual, el caso es que ya sabemos como va el código.

Repito :
Una sección por columna,
Los widgets que queramos por sesiòn, pero el mas imporante es el post1.
El incudable main, es el que inicia el tema del widget el main llamará a los otros includables, con la instrución b:include.



Vamos ahora a ver un poquillo los divs.
La cosa está facil. realmente solo hay uno que en principio nos interese (recordamos que hemos cogido aldrede una plantilla chorras que solo tiene un cuerpo).

outher-wrapper,es el unico div principal donde está todo.



Voy a coger una plantilla líquida que he usado de pruebas por ahi, que tiene cuerpo central y dos columnas, si esta plantilla no tiene divs y class que interfieran con nuestra plantilla blogger, vamos a ver como mezclar la plantilla html con la plantilla blogger.

paso primero :

De la plantilla html, copio todo el css en la plantilla blogger. Solo he tenido la duplicación del body, que he dejado la de la plantilla.

paso segundo : copio de la plantilla blogger toda la seccion(solo tenemos una) y la guardo en un fichero a parte.

paso tercero : borro de la plantilla blogger todo el body y pongo el body de la plantilla html.

paso cuarto: en la plantilla blogger, en el body, en la columna central, pego la seccion que copiamos en el paso segundo.

MILAGRO.... FUNCIONA........
Faltan algunos detalles pero eso ya es otra historia.

No hay comentarios: