¡Más trucos para decorar!

¡¡Aloha!! :)

Llevo tanto tiempo sin hacer una entrada de estas que se me han acumulado las cosas que quiero poner y seguramente me dejaré alguna >.<

1. Centrar los gadgets de imagen.

Este código ya lo puse en otra entrada, pero bueno lo pongo aquí para que no quede suelto:

.sidebar img { display: block; margin: 0 auto;}

Si utilizáis el escritorio antiguo de blogger tenéis que ir a Escritorio -> Diseño -> Diseñador de plantillas -> Avanzado -> y pegáis el código en Añadir CSS

Si utilizáis el escritorio nuevo de blogger tenéis que ir a Escritorio -> Plantilla -> Personalizar -> Avanzado -> y pegáis el código en Añadir CSS

2. Poner borde a las imágenes de las entradas.

Hay diferentes bordes entre los que elegir y además podemos personalizar el color y el grosor de éstos, este es el código:

.post img {
border: 1px dashed #db0033;  /* Grosor de Borde, tipo de borde, color del borde */
background:#eee;  /* Color de fondo */
padding: 3px;  /* Relleno del borde */
}

A ver, os he marcado ya por colores lo que es cada cosa por si os hacéis un lío. En el azul que pone "dashed" es el tipo de borde, es porque hay varios, no sé si hay más de los que os pongo aquí:

• none
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Luego lo de color de fondo, no lo he probado xD, pero hay bordes como el "double" que son dos rallas, por lo que supongo que será para cambiar de color la 2ª ralla, o para rellenar el hueco que hay entre el borde y la imagen (creo que me suena que es más esto que lo primero).

Si lo que queréis es ponerle borde a la cabecera tenéis que poner este que es casi lo mismo:

.header img {
border: 1px dashed #db0033;  /* Grosor de Borde, tipo de borde, color del vorde */
background:#eee;  /* Color de fondo */
padding: 3px;  /* Relleno del borde */
}

Si vuestra cabecera no tiene imagen, este:

.header {
border: 1px dashed #db0033;  /* Grosor de Borde, tipo de borde, color del vorde */
background:#eee;  /* Color de fondo */
padding: 3px;  /* Relleno del borde */
}

Si utilizáis el escritorio antiguo de blogger tenéis que ir a Escritorio -> Diseño -> Diseñador de plantillas -> Avanzado -> y pegáis el código en Añadir CSS

Si utilizáis el escritorio nuevo de blogger tenéis que ir a Escritorio -> Plantilla -> Personalizar -> Avanzado -> y pegáis el código en Añadir CSS

3. Códigos de colores.

En el punto anterior os dije que podíais cambiar el color del borde, y ya habéis visto que va con los códigos esos de m***** que no sabes de donde sacarlos xD, bueno pues aquí os dejo una página muy útil con la que podréis elegir el color sin ninguna dificultad y después copiar el código.

http://elblogdenya.blogspot.com.es/2008/01/cdigos-de-colores-para-tu-blog.html

4. Poner el fondo de la cabecera semitransparente.

El blog te ofrece personalizarlo prácticamente todo, pero se les ha ocurrido la maravillosa idea de dejarte poner el fondo de la cabecera o totalmente opaco con un color o totalmente transparente, con la consecuencia de no verse bien las letras si no tienes imagen.

No sé si este código sirve si en la cabecera tienes una imagen, sólo lo he probado como lo tengo yo, con letras.

.header {
background-color: rgba(255, 255, 255, 0.5)
}

Este código va con los niveles, ya sabéis eso de rojo, verde, azul y el que pone 0.5 es el nivel de transparencia, el color que está ahora mismo puesto es el blanco, tenéis que ir cambiando los números hasta que deis con el color que os guste ^^.

Como ya he dicho no lo he probado, pero supongo que si tenéis una imagen el código tendría que ser así (digo supongo, si no funciona, probadlo con el de arriba):

.header img {
background-color: rgba(255, 255, 255, 0.5)
}

Bueno, probadlo y ya me diréis ;)

Si utilizáis el escritorio antiguo de blogger tenéis que ir a Escritorio -> Diseño -> Diseñador de plantillas -> Avanzado -> y pegáis el código en Añadir CSS

Si utilizáis el escritorio nuevo de blogger tenéis que ir a Escritorio -> Plantilla -> Personalizar -> Avanzado -> y pegáis el código en Añadir CSS

5. Poner separadores entre entradas.

¿Habéis visto las alitas que tengo al principio y al final de cada entrada? Bueno, ahora alitas como en otro momento será otra imagen normal o con movimiento, porque siempre lo estoy cambiando todo xD. Bien, esto es un poco más complicado, porque hay que tocar la plantilla directamente, por lo que otra vez os recomiendo que os descarguéis primero la copia de la plantilla, por seguridad, lo digo porque yo ya la lié y mejor prevenir que curar xD (se me borro la barra de búsqueda de arriba y no había manera de recuperarla).

Para colocar el código tenéis que ir, si tenéis el escritorio antiguo de blogger a Escritorio -> Diseño -> Edición de HTML -> Expandir plantilla de artilugios.

Si usáis el escritorio nuevo de blogger a Escritorio -> Plantilla -> Edición de HTML -> Continuar -> Expandir plantilla de artilugios.

Una vez habéis llegado a ese punto, le dais a Ctrl + F y buscáis:

<b:include data='post' name='post'/>

Tenéis que poner este código:

<center><img src='URL de la imagen'/></center>

Si queréis que el separador esté al final de la entrada, lo ponéis después de <b:include data='post' name='post'/> y si queréis que quede al principio, lo ponéis delante (y si lo queréis como yo, en los dos sitios, pues se pone las dos cosas xD).

Tenéis que sustituir el 'UR de la imagen' por la imagen que queráis (pero no quitéis las comillas esas que hay a los lados!). Es muy fácil, vais a una imagen, le dais encima con el botón derecho, Copiáis la URL de la imagen y lo pegáis donde os he dicho.

Podéis ir mirando como queda, dándole a "Vista previa" antes de guardarlo.

Aquí os dejo unas páginas donde hay muchos separadores:

http://www.smashingmagazine.com/2008/09/09/the-hr-contest-results-download-your-fresh-hr-line-now/

http://aitokawaii.blogspot.com.es/2012/04/divisores-algunos-kawaii-separadores-o.html

http://cosiitasparatublog.blogspot.com.es/2011/03/separadores-para-blogstutorial-de-como.html

http://kawaiifans.blogspot.com.es/2011/01/separadores-kawaii-parte-ii.html

http://kawaiifans.blogspot.com.es/2011/01/separadores-kawaii.html

6. Efecto aumento en la cabecera.

Por si no os habéis fijado, ahora cuando pasáis el cursor por encima de la cabecera, esta aumenta ^^ creo que hay muchos efectos (como uno que la hacía girar) aunque sólo he encontrado este. tenía pensado explicaros yo misma como se hace, pero en vista de que la mayoría tenéis imágenes en la cabecera (y he visto que hay que tener en cuenta el rollo de la proporción y no sé que xD) y yo simplemente tengo letras, prefiero dejaros la página de donde lo he sacado y vosotros ya os hacéis un apaño xDD (si algún día me pongo imagen en la cabecera y lo hago, lo explico, por el momento nada xD)

http://ciudadblogger.com/2011/11/aumentar-el-titulo-del-blog-o-imagen-de.html

7. Poner purpurina/brillo al cursor.

Pensaba que el brillo que soltaban los cursores en muchos blogs era debido al cursor que cogían, pero resulta ser que es independiente y puedes combinarlo con el cursor que quieras.

Para colocar el código tenéis que ir, si tenéis el escritorio antiguo de blogger a Escritorio -> Diseño -> Edición de HTML -> Expandir plantilla de artilugios.

Si usáis el escritorio nuevo de blogger a Escritorio -> Plantilla -> Edición de HTML -> Continuar -> Expandir plantilla de artilugios.

Una vez ahí le dais a Ctrl + F y buscáis </head>, delante suyo colocáis este código:

<script type='text/javascript'> // <![CDATA[ var colour="#FFFFFF"; var sparkles=40;
var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

Muy largo, lo sé >.< Para cambiar el color del brillo, volved a buscar el Ctrl + F: var colour, y en el punto 3 podréis elegir el color que queráis.

8. Poner de cursor una cruz.

Para colocar el código tenéis que ir, si tenéis el escritorio antiguo de blogger a Escritorio -> Diseño -> Edición de HTML -> Expandir plantilla de artilugios.

Si usáis el escritorio nuevo de blogger a Escritorio -> Plantilla -> Edición de HTML -> Continuar -> Expandir plantilla de artilugios.

Una vez ahí le dais a Ctrl + F y buscáis <head>, detrás suyo colocáis este código:

<style type='text/css'> <!-- body {  cursor: crosshair} --> </style>

Por lo que tengo entendido no se puede cambiar el color, pero si tenéis un fondo negro, no os preocupéis porque también se ve!

Bueno y creo que esto es todo, seguramente me dejaré algo de mis descubrimientos, pero en fin, un besazo y espero que os sea útil (si os enteráis de algo jajajaja xD) un besazo y os quiero :) <3