Este sitio documenta experimentos en plantillas de Diseño de Google Blogger y almacena la colección de esas plantillas. Siguiendo la documentación de los experimentos, el lector debe familiarizarse con la anatomía de una plantilla de Blogger Layout para diseñar uno.
El conocimiento más esencial a adquirir para permitirle diseñar plantillas de Blogger Layout es la comprensión del comportamiento de los elementos del blog y cómo posicionar esos elementos del blog en una página.
Después de lo cual, el formato, las imágenes y el fondo caerían en su lugar fácilmente. Este sitio es para aprender a crear plantillas de diseño desde cero. Este sitio cubriría a tiempo no sólo los conceptos básicos, sino también los diseños de documentos en el nivel elemental o detallado. Al comprender el comportamiento elemental, solo puede un diseñador proceder a crear plantillas de diseño complejas.
$ads={1}
Un manual técnico debe ser un instrumento de velocidad donde el lector desee encontrar tanta información como sea posible, lo más rápido posible, con el menor número posible de información Cubierto en este sitio:
La anatomía barebones de una plantilla de diseño Blogger
El siguiente es el esquelético básico de una plantilla. El uso de esta plantilla dará lugar a una página en blanco.
Plantilla barebones
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com 2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<cabeza>
<title><data:blog.pageTitle/></title>
<b:skin><![ CDATA[/*
<!-- CONTENIDO DE LA PIEL -->
]]></b:skin>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>code-box
Las dos etiquetas resaltadas en rojo son secciones que debe modificar un diseñador de plantillas potencial.
La plantilla Diseño se compone principalmente de secciones y widgets.
Las secciones marcan áreas de su página, como la barra lateral, el pie de página, etc.<body>
Declaración de sección
</b:section>code-box
Un widget es un elemento de página individual, como una imagen, un blogroll o cualquier elemento de la pestaña Elementos de página. Puede incluir cualquier CÓDIGO HTML alrededor de las secciones de una plantilla.
Declaración de widget
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>code-box
Plantilla Blogger b:section de sección
A de Blogger puede tener los siguientes atributos.<b:section>
| Atributo | ¿Obligatorio? | Descripción |
| id | Obligatorio | Un nombre único, solo con letras y números. Un identificador sirve como identificador único para una sección. |
| class | Opcional | Los nombres de clase comunes son 'navbar', 'header', 'main', 'sidebar' y 'footer'. Si cambias de plantilla más tarde, estos nombres ayudan a Blogger a determinar la mejor manera de transferir sobre tu contenido. Sin embargo, puede usar diferentes nombres, si lo desea. |
| maxwidgets | Opcional | El número máximo de widgets que se permitirán en esta sección. Si no especifica un límite, no habrá uno. |
| showaddelement | Opcional | Puede ser 'sí' o 'no', con el 'sí' como predeterminado. Esto determina si la pestaña Elementos de página mostrará el vínculo 'Agregar un elemento de página' en esta sección. |
| growth | Opcional | Puede ser 'horizontal' o 'vertical', con 'vertical' como predeterminado. Esto determina si los widgets dentro de esta sección están dispuestos uno al lado del otro o apilados. |
Una sección puede contener widgets; no puede contener otras secciones u otro código. Si necesita insertar código adicional entre o alrededor de ciertos widgets dentro de una sección, deberá dividir la sección en dos o más secciones nuevas.
Plantilla Blogger b:widget Etiqueta
Un widget puede tener los siguientes atributos.
| Atributo | ¿Obligatorio? | Descripción |
| id | Obligatorio | Puede contener solo letras y números, y cada ID de widget de la plantilla debe ser único. El ID de un widget no se puede cambiar sin eliminar el widget y crear uno nuevo. |
| type | Obligatorio | Debe ser uno de los tipos de widget válidos enumerados en la lista debajo de esta tabla. |
| blocked | Opcional | Puede ser 'sí' o 'no', con el 'no' como predeterminado. Un widget bloqueado no se puede mover ni eliminar de la pestaña Elementos de página. |
| title | Opcional | Un título de visualización para el widget. Si no se especifica ninguno, se inventará un título predeterminado como 'List1'. |
| pageType | Opcional | Puede ser "todo", 'archivo', 'principal' o 'elemento', con 'todos' como predeterminado. El widget se mostrará solo en las páginas designadas de su blog. Todos los widgets se muestran en la pestaña Elementos de página, independientemente de su pageType. |
Los tipos de widgets que se pueden especificar son:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
documento el contenido que se puede colocar en el cuerpo del widget.
Etiqueta del widget
<b:widget [...attributes...]>
<!-- Widget Contents-->
</b:widget>code-box
Los siguientes son contenidos de widget permitidos.
b:etiqueta includable
<!-- Contents of Includable -->
</b:includable>code-box
| Atributo | ¿Obligatorio? | Descripción |
| id | Obligatorio | Identificador único dentro de la plantilla que consta de letras y números. Cada widget debe tener uno incluido como punto de entrada para realizar la tarea del widget. El principal includable normalmente contendrá la mayor parte o la totalidad del contenido que se mostrará para este widget, y en muchos casos será todo lo que necesita. id='main' |
| var | Opcional | Un identificador compuesto por letras y números, para hacer referencia a los datos puestos a disposición por Blogger a través de la etiqueta de datos. Consulte la sección de datos a continuación. |
El 'principal' includable puede llamar a otros includables con la etiqueta b:include. Cualquier includable también podría llamar a otro includable.
b:incluir etiqueta
<b:include name='name-of-includable' data='argument-of-includable'/>code-box
| Atributo | ¿Obligatorio? | Descripción |
| name | Obligatorio | Id. del includable para llamar. El includable debe haber sido declarado dentro del mismo widget. |
| data | Opcional | Un argumento para pasar al includable que se llama. Esto se convertirá en el valor del atributo en el includable. El argumento puede ser una expresión o datos puestos a disposición por Blogger a través de la etiqueta de datos. Consulte la sección de datos a continuación. var |
Ejemplo de llamar a otro includable
<b:loop var='i' values='posts'>
<b:include name='zebra' data='i'/>
</b:loop>
</b:includable>
<b:includable id='zebra' var='p'>
Title: <data:p.title/>
<b:include name='showURL' data='p.url'/>
</b:includable>
<b:includable id='showURL' var='u'>
<data:u/>
</b:includable>code-box
etiqueta de datos
<data:data-namespace/>code-box
El espacio de nombres de datos es el identificador de un fragmento de datos puesto a disposición por Blogger para el widget.
Los identificadores de datos disponibles para el widget son
los atributos del widget en sí y la lista de identificadores de datos proporcionados en la página siguiente.
Estos datos de Blogger siguen una convención de membresía de componentes.
Si los datos tienen miembros, se puede hacer referencia a los miembros del fragmento de datos mediante la convención de puntos.
Ejemplo de espacios de nombres de datos
<data:photo.url/> <!-- the url member of photo data -->code-box
b:Etiqueta de bucle
<!-- repeated content -->
</b:loop>code-box
| Valor del atributo | ¿Obligatorio? | Descripción |
| loop_variable | Obligatorio | Puede ser cualquier nombre alfanumérico. Se utilizará como identificador para cada miembro de la lista de iteración. |
| iteration_list | Obligatorio | El identificador de los datos que contienen varios miembros sobre los cuales el bucle va a recorrer en iteración. Cualquiera de los identificadores de datos de la lista de identificadores de datos proporcionados en la página siguiente se puede usar como lista de iteración siempre y cuando los datos tienen miembros. |
Básicamente es un bucle de antes de la infilcación
{
display loop_variable.member_value;
}
foreach animal in (donkey elephant tiger leopard)
{
display animal.average_height;
}code-box
Ejemplo de contenido b:loop
<h2><data:i.title/></h2>
</b:loop>code-box
b:if y b:else Etiquetas
<!-- content to display if condition is true -->
<b:else/>
<!-- content to display if condition is false -->
</b:if>code-box
La etiqueta b:else es opcional.
'condición' puede ser cualquier cosa que se evalúe como verdadera o falsa.
Algunos identificadores de datos se resuelven en valores true/false por sí solos, por ejemplo. en un poste y por lo tanto se puede utilizar como condition.allowComments
Ejemplos de b:if condición:
| <b:if cond='data:post.showBacklinks'> | Verdadero si la publicación actual está configurada para mostrar vínculos de retroceso. |
| <b:if cond='data:blog.pageType == "item"'> | Verdadero si la página actual es una página de elemento (página de publicación). |
| <b:if cond='data:displayname != "Fred"'> | Verdadero si este no es el nombre para mostrar de Fred. |
| <b:if cond='data:post.numComments > 1'> | Verdadero si la publicación actual tiene más de un comentario. |
Publicar un comentario