Tutorial: Cómo crear plantillas de Blogger desde cero

Serjal

Serjal

Gamma
Social Media
Verificación en dos pasos desactivada
Desde
9 Dic 2016
Mensajes
151
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
muchas gracias por el aporte amigo, he estado aprendiendo un poco mas de este medio para unos proyectos que tengo en mente y esto me ha venido como anillo al dedo.
 
otakueli1313

otakueli1313

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Ago 2021
Mensajes
101
nxovoix dijo:
CREAPLANTILLA.png


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! :D

​
Primero explicaremos un poco lo que es la estructura basica de BLOGGER, empezaremos borrando todo lo que tenemos en nuestro editor de plantillas HTML.

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]
[COLOR=#008000]<b:includable id="main" var="top">
[/COLOR][COLOR=#ffa500]<b:loop values="data:pots" var="post">[/COLOR]
[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:

or9n7.png
​

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:


fiu3h.png

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 == &quot;item&quot;'>
<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 :p
pbjwr.png
Hacer clic para expandir...
De por casualidad aun tienes el pdf que mencionas???
Me seria de gran ayuda Gracias!!
 
Sereri

Sereri

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Mar 2021
Mensajes
60
A probar, muchas gracias.
 
Coderz

Coderz

Préstamo
1
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
¡Usuario popular!
Suscripción a IA
Desde
30 Ene 2019
Mensajes
2.436
Lastima ya esta baneado.
Pero el tutorial sirve.
 
An6oro

An6oro

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
16 Ago 2021
Mensajes
53
Tutorial del siglo pasado, pero me sirvió, aun me cuesta entender la estructura XML
 
Alwazzz

Alwazzz

Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
23 Jul 2013
Mensajes
629
Edad
35
Estos tutoriales, creo que fue en la epoca de el concurso de tutos en forobebeta, fue creo la mejor epoca, cada tanto salia un tuto genial.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!
Registro

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba