Marquesinas al estilo Teoría Blogger

Estilo T.B.

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Estilo T.B.</marquee></p>

Blanco y negro

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% white; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="3" truespeed="1">Blanco y negro</marquee></p>

Negro y blanco

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% black; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Negro y blanco</marquee></p>

Azul

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Azul</marquee></p>

Rojo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% red; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Rojo</marquee></p>

Verde

<p style="border: 1px solid black; padding: 10px; background:green; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Verde</marquee></p>

Naranja

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% orange; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Naranja</marquee></p>

Amarillo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% yellow; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Amarillo</marquee></p>

Violeta

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Violeta</marquee></p>

Fuccia

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Fuchsia; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Fuccia</marquee></p>

Dorado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Gold; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Dorado</marquee></p>

Marrón

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Brown; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Marrón</marquee></p>

Morado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Purple; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Morado</marquee></p>

Plateado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% silver; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Plateado</marquee></p>

---

Agregar una caja marquesina en mi blog

Para 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 caja

Para 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 explicativo

Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

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)
   
   
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!

Listado de directorios

Estos son los directorios que conseguimos, si te registras en muchos de estos obtendras más posicionamiento.
INTERNETIZA2
Directorio de blogs
Blog Directo
Directorio x
Blogalaxia Arg
Buzzear
Direarg
Catablogo
Argentino
Blogesfera
Blogalaxia
Alfadir
Directorio de Blogs
Directorio-blogs
Red Argentina
Guía-Páginas
Directorio Web Blog
The house of Blogs
Blogust
Blog Adir
Blog Unite
Espacio Blogs
Directorio Plus
Booster Blog
Blogs de México
Blogueros
Blogs Encontra
Directorio Blogs
Blogalaxia Mexico
Directorio blogs
Famosoblog
Blogs Colombia
Visitas Blog
Direct Links
Blog Directorio
Blogs Perú
Directorium
Enlazalo
Zona de Blogs
Directorico
Blogs Directorio

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 cursor

Para 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