lunes, 23 de septiembre de 2013

Guía rápida para crear vuestra propia plantilla de blogger

Tal y como dije con mi primera entrada de vuelta de vacaciones, os voy a hacer un resumen o un mix de los pasos para crear vuestro propio template de blogger.

Lo primero de todo, explicaros un poco como el la estructura de la página, y bueno enseñaros como es la que yo he creado finalmente. Dentro de una template de blogger podemos distinguir dos elementos principalmente las sections y los widgets. Las principales sections que existen son para la cabecera (header), para la parte del cuerpo (main), el pie (footer) y las secciones laterales (sidebar). Dentro de cada sección puede haber diferentes widgets, por ejemplo, en la sección lateral podéis tener los widgets para el archivo, la nube de etiquetas, ...


Si nos metemos un poco más dentro del html, cada una de estas secciones está dentro de un div con una etiqueta particular, al que le aplicaremos el estilo que queramos. Así en código la estructura básica de un blog con cabecera, pestañas para las páginas, la sección principal con las entradas, una sección lateral y el pie de página, es la siguiente:

<body>
  
  <div id='outer-wrapper'>
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
        <b:widget id='Header1' locked='true' title='Prueba (cabecera)' type='Header'>
        </b:widget>
      </b:section>
    </div>

 <div class='tabs-wrapper'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
        <b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
        </b:widget>
      </b:section>
    </div>

    <div id='main-wrapper'>
      <b:section class='main' id='main' maxwidgets='' showaddelements='yes'>
        <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>
        </b:widget>
        <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
        </b:widget>
      </b:section>
    </div>
   <div id='footer-wrapper'>
      <b:section class='footer' id='footer' maxwidgets='' showaddelements='yes'>
        <b:widget id='Attribution1' locked='false' title='' type='Attribution'>
        </b:widget>
      </b:section>
    </div>
  </div>
  
</body>

Así lo único que obtenemos es un bonito blog en blanco :). Que no está mal si quieres algo muy muy sencillo, pero presupongo que querrás como yo algo con más color :P. Para darle vidilla al blog tendremos que trastear un poco con el CSS de la template.

Como la template la estamos creado nosotros inicialmente no tendrá nada, así que lo primero será ver donde se añaden los estilos. Dentro del head, casi al final aparece esta etiqueta

<b:skin><![CDATA[
 ...
]]></b:skin>

Ahí dentro es donde vamos a añadir el estilo que vayamos a crear para nuestro blog.

Aquí tampoco quiero meterme mucho, porque ya depende un poco de como queráis vuestro blog, pero si que quiero que os quedéis con algunas etiquetas básicas. Vamos a crear la hoja de estilos empezando por el principio, y es que lo primero para mi es decirle las características generales de la página. Estas características irán dentro de las siguientes etiquetas:
  • body, aquí he añadido todo sobre el fondo, el tipo de letra, color de la letra, ...
  • a (link, hover, visited), aquí indico el formato general de los enlaces, sólo lo sobreescribo cuando en alguna sección quiera que aparezca de otra manera.
body {    
font-family:Verdana,Helvetica,sans-serif;    
font-style:normal;    
font-size:12px;    
color:#000000;    
background-image: url(images/img.png);     
background-repeat: repeat;  
}     

a:link, a:visited {
text-decoration: none;
color: #0073e1;
}
a:hover {
text-decoration: underline;
color: #044179;
}

Una vez definido lo más general, me meto con lo que hay dentro de cada sección:
  • outer-wrapper, que es la sección contenedora.
  • header-wrapper, para la cabecera.
  • tabs-wrapper, para las páginas.
  • main-wrapper, que contiene las entradas, los comentarios y todo lo que metamos en la parte principal.
  • footer-wrapper, para el pie de página.
  • sidebar-wrapper, para la columna lateral
#outer-wrapper{
width:1360px;
margin-top:30px;    
margin-bottom:30px;
margin-right:auto;    
margin-left:auto;
padding-top:10px;    
padding-bottom:10px;    
padding-right:10px;    
padding-left:10px;
}
#header-wrapper{
width:1360px;
height:300px;
floating:center;
background: url(images/header.png) left       center no-repeat; 
color:transparent;
margin-top:10px;    
margin-bottom:10px;    
margin-right:0px;    
margin-left:0px;
display:inline-block;
}
#tabs-wrapper{
width:100%;
margin-top:10px;    
margin-bottom:10px;    
margin-right:10px;    
margin-left:10px;
display:inline-block;
}
#main-wrapper{
width:1000px;
float:left;
margin-top:10px;    
margin-bottom:10px;    
margin-right:10px;    
margin-left:10px;
padding-top:10px;    
padding-bottom:10px;    
padding-right:5px;    
padding-left:5px;
word-wrap:break-word;
overflow:hidden;
background-color:#ffffff;
}

#sidebar-wrapper{
width:300px;
float:right;
margin-top:10px;    
margin-bottom:10px;    
margin-right:10px;    
margin-left:10px;
word-wrap:break-word;
overflow:hidden;
}

#footer-wrapper{
width:100%;
margin-top:10px;    
margin-bottom:10px;    
margin-right:10px;    
margin-left:10px;
padding-top:10px;    
padding-bottom:10px;    
padding-right:5px;    
padding-left:5px;
display:inline-block;
}

De la parte del css no os voy a comentar mucho más, casi que os dejo que experimentéis un poquito. De hecho os aconsejo que cojáis una plantilla ya existente y hagáis un poco de tecnología inversa e investiguéis para que sirve cada cosa y como cambia el aspecto del blog dependiendo de lo que toquéis. Es bastante interesante y se aprende mucho. A parte lo que yo haya tocado no tiene que ser lo que vosotros vayáis a necesitar :P.

Después todo es te rollo, os dejo los enlaces a las páginas que he usado como ayuda para crear la template:
Y bueno si alguien se anima a crear su template y tiene alguna dudilla nada más que pregunte, yo no soy una experta ni mucho menos, pero intentaré echarle una manilla :).

No hay comentarios:

Publicar un comentario