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 :).

viernes, 20 de septiembre de 2013

Angry birds everywhere en la oficina

Este verano he estado un poco vaguilla para ponerme a tejer, he estado perezosa para coger las agujas y adelantar cosas para el invierno. Siempre me pasa y es que con el calor ponerme con algún proyecto grande y de lanilla se hace insufrible. Intenté hacer un jerselillo de bebé y fue todo un fracaso U_U. Así que decidí emplear mis sobremesas en algo que supiese que no me iba a cansar tanto, y a lo que sé que durante el invierno no le dedico tanto tiempo, a hacer amigurumis :D.

En la oficina, un par de compañeros me habían pedido que les hiciese algo, y bueno ya que me ponía no iba a hacerles sólo a ellos, ya que estaba les hacía algo a todos, bueno a todos con los me relaciono todos los días, vaya a mis amigos del trabajo, para que nos vamos a engañar :).

Como tenían que ser bastantes, como unos 14 muñequitos, y no quería que fuesen todos iguales, decidí escoger algo de algún juego o serie que tuviera unos cuantos personajes diferentes y ya esos sí repetirlos las veces que hiciese falta :P. Después de mucho mirar, ver las posibles opciones y eso, me decidí por hacer toda la familia de los Angry birds. Fue un poco paliza la verdad, porque algunos tenían bastantes detalles, y porque las partes que eran iguales para todos, se me hicieron al final un poco pesadas. Eso de hacer 28 ojos se me ha hecho duro jejeje.

En total en hacerlos todos tardé un mesecillo más o menos, empecé a primeros de Julio y los acabé para mediados de Agosto, con los correspondientes días de tocarlos nada xD.

El resultado es el que veis en las fotos:













La verdad me ha gustado hacerlos, ha sido un reto, por la cantidad, que nunca me había puesto a hacer tantos muñequitos tan seguidos :). Y creo que han gustado por la oficina ^^.


miércoles, 18 de septiembre de 2013

Little hearts keychain

Como habéis podido ver, me he tomado unas buenas vacaciones de blog y ahora tengo algunas cosas atrasadas. Lo de cerrar por vacaciones ha sido porque lo necesitaba, necesitaba un poco desconectar de la rutina de todo el año y así dejar tiempo para hacer otras cosas :).

Aunque una de esas cosas que no he dejado de hacer es tejer o crochetear. No es que me haya cundido mucho, porque entre paseo para un lado, piscina, cafés, tapillas, padel, ... he estado bastante entretenida la verdad :P.

Y bueno de entre todo lo que he hecho este mes de agosto, está este llavero de corazones :).






Por fin he quitado los infinitos llaveros que tenía, los lego, la muñequilla, el tulipán, ..., todo, porque había llegado ya un momento que tenía más llaveros que llaves y llevar las llaves en el bolsillo se hacía inmanejable xD.

lunes, 16 de septiembre de 2013

El blog cambia de look :)

Después de unos añillos con el mismo aspecto, estaba ya cansada, estaba cansada de los colores, demasiado rojo ya, la cabecera no me gustaba, y lo que peor llevaba es que pese a haber adaptado una template de por ahí a mi gusto, no era algo que había hecho yo. Había toqueteado un poco, a ciegas, el css, pero llegaba yo a entender algunas de las partes del blog.

Esta vez me he sentado, he leído bastante, el googleado un poco o un mucho, y he hecho la plantilla desde 0, peleándome con los estilos yo solica, con la estructura, las diferentes secciones y widgets. He aprendido bastante, y prometo que en breve os contaré todo lo que he sacado en claro, lo que he aprendido, y un poco como crear una template sencilla ^^.

En estas dos imágenes veréis el antes y el después.

Versión antigua

Nueva versión

Espero que la nueva versión os guste, no sé si será la definitiva, porque poco a poco quiero seguir investigando más. De hecho el próximo paso será hacerla responsive :).