- Desde
- 8 Ago 2012
- Mensajes
- 240
Hola hermanos BETA una vez mas empezamos con un nuevo tutorial, al inicio estaba grabando un vídeo sobre esto.. pero mi voz.. .bueno mi voz no es para ser grabada jajaja, asi que se los dejo aqui para ser leido!
ESTRUCTURA BASICA
ahora declaramos el formato de nuestra plantilla y la codificacion así:
Insertar CODE, HTML o PHP:
<?xml version="1.0" encoding="UTF-8" ?>Esto nos dice que nuestra plantilla estará basada en XML en un lenguaje UTF8 por las tildes y otros signos que tiene nuestro idioma
Ahora declaramos nuestro HTML de la siguente forma
Insertar CODE, HTML o PHP:
<!DOCTYPE html>seguimos estructurando el esqueleto de nuestro blog, esto se hace como si fuera cualquier documento HTML
Insertar CODE, HTML o PHP:
<html lang="es">
[COLOR=#ff0000]<head>
</head>[/COLOR]
[COLOR=#0000ff]<body>
</body>[/COLOR]
</html>Breve explicacion:
- el HEAD es el cerebro de nuestro blog o pagina, aqui incluiremos todos los scripts que dominaran el comportamiento y las funciones de nuestro blog.
- el BODY es el cuerpo y/o esqueleto de nuestro blog, aqui agregaremos todo lo necesario como El Cuerpo de entradas, el sidebar, footer, header, etc
ahora agregaremos el espacio donde incluiremos todos nuestros estilos a nuestro blog, digamos que es donde lo ponemos la ropa a nuestro cuerpo, para esto agregaremos las etiquetas <b:skin></b:skin> dentro de nuestro HEAD y esto quedaria asi:
Insertar CODE, HTML o PHP:
<html lang="es">
[COLOR=#ff0000]<head>
[/COLOR][COLOR=#008000]<b:skin>
</b:skin>[/COLOR][COLOR=#ff0000]
</head>[/COLOR]
[COLOR=#0000ff]<body>
</body>[/COLOR]
</html>Hasta aquí ya tenemos nuestra estructura hecha, ahora debemos agregar las secciones que es donde iran todo los Gadgets y Widgets de nuestro blog, esto es importante ya que sin esto nuestro blog no funcionara.
La primera y la mas importante es el gadget donde aparecerán nuestras entradas, para esto agregamos la siguente etiqueta:
Insertar CODE, HTML o PHP:
[COLOR=#ff0000][B]<b:section id="cuepor de entradas">[/B]
[/COLOR][B][COLOR=#0000ff]<b:widget id="blog1" type="blog">[/COLOR][/B]
[B][COLOR=#008000]<b:includable id="main" var="top">
[/COLOR][COLOR=#ffa500]<b:loop values="data:pots" var="post">[/COLOR]
[/B][B][COLOR=#696969]<div class="top">
<div class="post-title"><data:post.title/><div>
<div class="post-body"><data:post.body/></div>
<div class="post-footer">Pise de Post</div>
</div>[/COLOR]
[/B][COLOR=#ffa500][B]</b:loop>[/B][/COLOR]
[B][COLOR=#008000]</b:includable>[/COLOR]
[/B][COLOR=#0000ff][B]</b:widget>[/B][/COLOR]
[B][COLOR=#ff0000]</b:section>[/COLOR][/B]Breve explicacion:
- ROJO: Esto indica la sección donde se sitúa el gadget BLOG (el que muestra las entradas)
- AZUL: Este indica que lo que esta dentro es un Widget que muestra las entradas.
- VERDE: Ester permite que se incluyan la data necesaria para las entradas
- NARANJA: Este etiqueta LOOP hace repetir la información deseada cuantas veces sea necesario, en este caso hara repetir la solicitud de los datos de los post, la misma cantidad de veces de la cantidad de entradas creadas, es decir si tenemos 50 entradas este repetirá 50 veces la solicitud y asi mostrara las 50 entradas
- GRIS: esto es el cuerpo de la entrada (estas estan basadas en las etiquetas DATA)
PARA VER MAS VARIABLES DATA AQUI LES DEJO UN PDF:
ENTONCES... Nuestra estructura base se veria asi:
HTML:
<html lang="es">
<head>
<bkin>
/*AQUI CSS*/
</bkin>
</head>
<body>
<bection id="cuepor de entradas">
<b:widget id="blog1" type="blog">
<b:includable id="main" var="top">
<b:loop values="data:pots" var="post">
<div class="top">
<div class="post-title"><data:post.title/><div>
<div class="post-body"><data:post.body/></div>
<div class="post-footer">Pise de Post</div>
</div>
</b:loop>
</b:includable>
</b:widget>
</bection>
</body>
</html>Si ponen esto en su plantilla de blogger podran ver el resultado.
CREAR SECCIONES PARA GADGETS
Agrego esto porque me parece que es muy importante y en su momento no me percate de ello..
Para crear una nueva seccion donde podamos poner nuestros Gadgets debemos agregar este codigo:
Insertar CODE, HTML o PHP:
<b:section id='[B][COLOR="#FF0000"]nuevos-gadgets[/COLOR][/B]'/>ROJO: este es e l id para poder darle el estilo en CSS a esta
agregado esto inmediatamente podremos ven es nutros blog la nueva seccion:
ha estas etiquetas <b:section> tambien le podemos agregar algunas configuracion de esta forma:
<b:section id='nuevos-gadgets' maxwidgets='1' showaddelement='yes'/>
ROJO: Indica el ID que identificara el CSS
AZUL: Este indica la cantidad de widgets que se pueden agregar a esta seccion.
VERDE: Este bloquea la seccion permitiendo añadir mas gadgets o no
ESTRUCTURA COMPLETA
Ahora mostraremos como es una estructura completa, no explicaremos como desarrollarla porque si entendiste bien lo de arriba... es solo cuestion de acomodar lo necesario y dale el CSS para que todo en su lugar.
Ahora ¿COMO ES UNA ESTRUCTURA COMPLETA?....
Imaginemos nuestra estructura humana, CABEZA, CUERPO y EXTREMIDADES, bien... de esta misma forma debe ser nuestra estructura:
Para ahorrarles el tiempo a muchos les dejare la estructura que yo uso para crear mis plantillas (solo deben borrar toda la hoja de su plantilla y remplazarla por esta)
HTML:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title>
</b:if>
<b:skin>
<![CDATA[
#contenedor-general {
width:960px; /*Ancho del blog*/
margin:0 auto 0; /*Centramos el contenido*/
padding:0; /*Evitamos espaciados internos*/
}
#cabecera {
margin:0 0 30px 0; /*Márgenes de la cabecera*/
height:100px; /*Alto de la cabecera*/
}
#cuerpo-entradas {
float:left; /*Alineación de las entradas a la izquierda*/
width:650px; /*Ancho de las entradas*/
padding:10px; /*Espaciados internos*/
}
#columna-lateral {
float:right; /*Alineación de la sidebar a la derecha*/
margin:0; /* Sin márgenes */
width:280px; /*Ancho de la sidebar*/
}
#pie-de-pagina {
padding:10px; /*Espaciados internos*/
margin:30px 0 0 0; /*Márgenes*/
}
]]></b:skin>
</head>
<body> <div id="contenedor-general">
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div>
<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>
<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div>
<div style="clear:both" />
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div>
</div></body>
</html>Como veran todo esta en ESPAÑOL, asi que no se perderan.
Seguro muchos estan pensando "PERO QUE HACEMOS CON ESTO" o "ESTO NO ES NADA"... ¿Ustedes Creen?.. como ya mencione antes ahora todo queda en su imaginacion y sus ganas de querer aprender.. aca les dejo algunos enlaces de las webs que yo hice con esta simple hoja de codigos:
Con esto me despido por hoy.. saludos a todos y SUERTE EN SUS PROYECTO!
Este botonsito es gratis
Última edición:
