Notis

Síguenos en Twitter: @teoria_blogger | Para tu blog, recomendamos: que el diseño no esté cargado, que las entradas no sean muy largas y que contengan imágenes. Para más consejos Click aquí | Pon un link de Teoría Blogger en tu blog!!! Click aquí. | Para cualquier duda o problema sobre tu blog, escríbenos en nuestro formulario de contacto.

martes, 8 de febrero de 2011

Marquesinas al estilo Teoría Blogger

Estilo T.B.




Blanco y negro




Negro y blanco




Azul




Rojo




Verde




Naranja




Amarillo




Violeta




Fuccia




Dorado




Marrón




Morado




Plateado




Agregar una caja marquesina en mi blogPara hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:
  • Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
  • Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.
Personalizar tu cajaPara crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:
<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>
Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativoVer video en Teoría Blogger videos | Ir a Teoría Blogger videos

domingo, 6 de febrero de 2011

Subir plantilla desde el ordenador a Blogger

Para los que recién empiezan, el diseño es vital para atraer al lector. Es decir, si queremos "vender" que nuestro blog es muy bueno, los lectores tienen un 50% de la "compra" hecha en su cabeza si el diseño del blog les parece visualmente un poema. Si bien varias veces lo repetimos, Btemplates.com es para nosotros una de las mejores páginas para descargar plantillas de cualquier tipo (incluyendo, premium).
A pesar de, el ya no tan nuevo diseñador de plantillas de Blogger (que puede ser atractivo y seductor para algunos blogueros) y de las plantillas que nos permite tener y modificar Blogger con el editor mencionado anteriormente, las plantillas personalizadas y creadas por expertos no deja de ser una opción válida para los blogueros y para los que les gusta apuntar más arriba.
En este post te vamos a enseñar a descargar una plantilla y luego subirla a Blogger (la nueva versión).
Cambiar plantilla de tu blog en Blogger
  1. Para empezar,vamos a btemplates.com (aunque hay otras páginas de similar rubro)
    Btemplates.com
  2. Buscamos en BTemplates, la plantilla que creas ideal para tu blog.
  3. Una vez que hayas encontrado tu plantilla y hayas visto el demo (para ver el demo se hace clic en el botón "Preview" de la página de tu plantilla) le das clic a "Download".
  4. Guardamos en la carpeta que querramos y veremos en la misma, que se ha descargado un archivo de extensión .zip
  5. Estos archivos de extensión .zip son archivos compactados, es decir que para descomprimirlo necesitamos un programa instalado en nuestro ordenador que sepa usar ese tipo de archivos. Existen varias opciones, pero nosotros recomendamos la opción fácil, segura, rápida y gratuita, el programa 7-Zip. Para descargar en la página oficial clic aquí.
  6. Cuando hayamos descargado e instalado 7-Zip en nuestro ordenador, vamos a dirigirnos una vez más al archivo .zip mencionado en el punto 4 y le damos clic derecho y buscamos el botón "7-Zip" y las opciones que aparece le damos clic a Extract here to "Nombre de la plantilla/"
  7. Vamos a Blogger → Plantilla y en la parte superior derecha de la pantalla hay un botón que dice "Crear/Restablecer copia de seguridad".
  8. Cuando hagamos clic nos va a aparecer una ventana emergente con un campo de texto junto a un botón que dice Examinar le damos clic ahí.
  9. Buscamos la carpeta que descomprimimos y dentro de esta carpeta, es probable que haya otra carpeta con el mismo nombre de la plantilla deseada (aclaro que "es probable" porque en algunos casos no existe tal o tales carpetas).
  10. De todos modos si encontramos carpetas, debemos asegurarnos de que tenga el mismo nombre que la plantilla y vamos a encontrar un archivo con extensión .xml que también debe tener exactamente el mismo nombre de la plantilla que descargamos y que vimos en Btemplates.
  11. Clic en el botón Subir.
  12. Ver la nueva apariencia del tu blog!

sábado, 5 de febrero de 2011

Efecto nieve en el cursor

Este truco llamativo, consiste en que el cursor generará una especie de "nieve" al mover el mouse. No es un truco necesario, pero es ideal para los que quieren un poco más divertido y con más movimiento su blog. El truco sólo está formado por códigos Javascript. Para saber de qué se trata este truco visita el Laboratorio de T.B.
Efecto en el cursorPara esto debes ir a Blogger → Plantilla → Clickear el botón Edición de HTML [Para la anterior interfaz Diseño → Edición de HTML]→ Busca el código </body> y arriba pega esto:
<script type="text/javascript">
// <![CDATA[
var colour="#0000ff";
var sparkles=50;
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>
Para cambiar el color de la "nieve", cambia el código que está en rojo