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.

sábado, 28 de agosto de 2010

Mostrar a tus lectores cuántos días de vida lleva tu blog

Tal como muestra el título y también el ejemplo que se puede ver a la derecha de este blog (gadget "Relleno...") es lo que mostraremos. El script consiste en mostrar cuántos días pasaron desde una fecha determinada por vos. El ejemplo se puede ver en la siguiente imagen (o como mencionamos, a la derecha de este blog).
contador de días
Pero si verdaderamente lo vas a usar como indicador de antigüedad (en días), debes averiguar o acordarte de cuándo creaste el blog1. Pero también se puede usar este gadget para contar los días de antigüe dad de lo que quieras.
Crear contador de díasPara obtenerlo, debemos pegarlo en un gadget. Vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Seleccionar gadget de modo HTML/Javascript y pega el siguiente código allí mismo:
Este blog tiene <script> function DiasOnline(Dia, Mes, Year, Texto)
{ Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year);
Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000);
document.write(Resultado + " " + Texto); } DiasOnline(14, 05, 2009, "" );
</script> días
Sólo modifica lo que está marcado en rojo para determinar la fecha, de lo demás se encarga el código.

1 Para averiguar cuándo empesaste tu blog, T.B., recomienda ver la fecha de la primera entrada publicada ya queconsideramos que ese es el comienzo de un blog. Para encontrar la lista de entradas ve a la sección (en Blogger) Editar entradas, dentro de la solapa Creación de entradas

miércoles, 25 de agosto de 2010

Complementos especiales para una marquesina

Para completar bien una marquesina, le hemos agregado algunos trucos interesantes de más para que seas un experto en marquesina!

Detener e iniciar marquesina al pasar el cursor por encima

Este truco hace que al pasar el cursor por encima de la marquesina se detenga la misma y al no pasarlo, siga funcionando normalmente. Para hacerlo debes agregar estos atributos con su contenido: onmouseout="this.start()" onmouseover="this.stop()".
El resultado sería el siguiente (prueba pasar el cusor sobre la marquesina):
Texto
<marquee onmouseout="this.start()" onmouseover="this.stop()">Texto</marquee>

Marquesina que rebota

Esto quiere decir que el texto nunca va a desaparecer ya que va a ir de un lado a otro sin parar (excepto si lo indica el atributo loop).
Para que rebote, pon este atributo con su contenido: behavior="alternate"
Texto rebota
<marquee behavior="alternate">Texto rebota</marquee>

lunes, 23 de agosto de 2010

Etiqueta marquee

La etiqueta marquee (<marquee></marquee>) permite dar movimiento a un determinado texto que corre básicamente en sentido horizontal y hacia la izquierda (efecto "marquesina"). Aunque esto se puede modificar mendiante algunos atributos.
Para dar a entender del tipo de movimiento del cual me refiero, aquí un ejemplo:
Marquesina
Este ejemplo refleja una marquesina común, sin atributos y modificaciones. En el siguiente punteo, mostraré atributos para modificar la marquesina en cuanto a la dirección, la cantidad de veces que semostrará el mensaje, etc.

Atributos para implementar

Direction

Como bien dice su nombre, este atributo indica la dirección de la marquesina. Dentro de este atributo se puede añadir lo siguiente: right (derecha), down (abajo), up (arriba).
  1. Texto
  2. Texto
  3. Texto

  1. <marquee direction="right">Texto</marquee>

  2. <marquee direction="down">Texto</marquee>

  3. <marquee direction="up">Texto</marquee>

Loop

Es un atributo "contable" en el que se añade la cantidad de veces que uno quiere que se repita el movimiento del texto. Cuando termine la cantidad, la marquesina deja de funcionar.
Texto aparecerá 12 veces
<marquee loop="12">Texto aparecerá 12 veces</marquee>

Scrolldelay

Indica la velocidad de la marquesina. Es contable, cuanto mayor sea el número, más lento irá.
  1. Texto muy rápido

  2. Texto rápido

  3. Texto lento

  4. Texto muy lento
  1. <marquee scrolldelay="20">Texto muy rápido</marquee>

  2. <marquee scrolldelay="100">Texto rápido</marquee>

  3. <marquee scrolldelay="300">Texto lento</marquee>

  4. <marquee scrolldelay="500">Texto muy lento</marquee>

Visita:
Puedes agregar más trucos en una marquesina en el siguiente link: Complementos especiales para una marquesina.

Crear link de "Añadir a favoritos"

Una forma de tener visitas en tu blog es que tengan tu blog incluida a la lista de favoritos o marcadores.
En este post enseño a crear un enlace en el que al hacer click abra una pequeña ventana del navegador (ya sea IE o Mozilla, sólo compatible con ambos navegadores).
El truco puede significar más popularidad y por esta razón, este puede ser un truco muy valioso y buscado por bloggers.
Obtener enlace para que marquen tu blog como favoritoPara lograrlo, la única manera es plasmarlo en un gadget entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos la opción HTML/Javascript y pegamos este código (Siempre de modo Edición de HTML):
<script type="text/javascript">
function agregar(){
//IE
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";
var titulo="Tu blog";
window.external.AddFavorite(url,titulo);
}

else {if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}
}
</script>
<a title="Teoría Blogger" href="javascript:agregar()">Agregar a mis favoritos</a>
Para personalizar el script a modo de tu blog, reemplaza los datos coloreados por los de tu blog según corresponda:
Rojo = URL del blog
Verde = Nombre del blog
Obtener botón para que marquen tu blog como favoritoACTUALIZACIÓN EXCLUSIVA:
Hemos encontrado la forma de hacer que el enlace para añadir a favoritos, sea un botón. Así es más original y tienes más opciones de modificar el estilo a tu gusto.
Este truco hay que añadirlo como gadget entonces vamos a Blogger → Diseño → Elementos de la página → Elegimos el modo HTML/Javascript y pegamos el siguiente código:
<script type="text/javascript">
//Este truco en teoriablogger.blogspot.com
function agr(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";var titulo="Tu blog";window.external.AddFavorite(url,titulo);}
else {
if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}}
</script><input onclick="agr(this)" title="teoriablogger.blogspot.com" type="button" value="Añadir a favoritos" />

Post actualizado el 26 de septiembre de 2010. Este truco, en particular, fue creado por Teoría Blogger, si encuentran otro blog explicativo con este mismo truco, es coincidencia.

domingo, 22 de agosto de 2010

Simple juego con un contador

Este truco consiste en un muy simple juego con un contador. En el que hacemos click en un botón para iniciar el contador (que retrocede) y hay que pararlo en el número 0 con el botón parar.
Esto sólo se puede agregar en un gadget como la mayoría de los scripts que mostramos.
Este truco lo puedes ver en el sidebar de nuestro blog de pruebas: Laboratorio de Teoría Blogger.
Añadir mini juego con javascriptPara instalarlo debemos agregar un script en la plantilla. Vamos a Blogger → Diseño → Edición de HTML y pegamos el siguiente código arriba de la etiqueta <head;>
<script type='text/javascript'>
playing=false;
function startClock(){
if(playing == false) {
the_time=setInterval(&#39;document.game.timer.value++&#39;,1);
}
playing = true;
}

function stopClock(x) {
// You can change the two numbers (&quot;500&quot;) below to a different value.
score = Math.abs(document.game.timer.value - x);
if(playing==true) {
clearInterval(the_time);
alert(&#39;Puntaje: &#39;+ score);
playing=false;
if(score==x) {
alert(&#39;Qué puntería, lo detuviste!!&#39;);
}
document.game.timer.value = -100;
}
}
</script>

Y luego de guardar los cambios nos dirigimos a Diseño → Elementos de la página y añadimos un gadget de modo HTML/Javascript. Luego de esto pegamos el siguiente código:
<form name="game">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody><tr><td align="center">Detener el contador en 0<br /><input style="text-align: center;" readonly name="timer" size="3" value="-100" type="text" />
<input value="&#9658;&#9658;&#9658;" onclick="startClock()" type="button" /><input value="PARAR" onclick="stopClock(0)" type="button" />
</td><td width="15"></td></tr><tr><td colspan="3" height="5"></td></tr></tbody>
</table>
</form>

Advertencia:
Este truco no es recomendable para el usarlo en el navegador Opera, ya que el contador va muy rápido.

sábado, 21 de agosto de 2010

Etiqueta blink

Es una etiqueta (<blink>) que debes ponerlo encerrarlo entre textos para que el mismo dé el efecto de un "parpadeo" o realiza la acción de "desaparecer y aparecer" constante. Como en el siguiente ejemplo:
Texto de ejemplo.
La etiqueta para lograr este efecto es: <blink>.
Se puede agregar atributos como style y title y se utiliza principalmente para llamar la atención en algo.
Y para que un texto llame aún más la atención, se puede modificar el color del texto con el atributo style y la propiedad color:
<blink style="color:#FF782F;">Texto</blink>
No funciona en IE 7.

Utilizar blink también en CSS

Para agregar el efecto blink en CSS se lo debe tipear como una decoración, o sea en la propiedad text-decoration y dentro, blink.
Efecto blink en HTMLEfecto blink en CSS
<blink>Contenido del texto</blink>
p {
text-decoration: blink;
}

sábado, 14 de agosto de 2010

Haz que tu blog salude a un visitante con su nombre

Este truco está relacionado con las cookies de tu navegador. En donde al entrar a tu blog el visitante deberá introducir su nombre o un nick y luego en la columna de gadgets se muestra un mensaje que saluda al visitante con el nick ingresado. Ver el truco en el Laboratorio de T.B.


En esta imagen se muestra el cuadro para escribir el nombre al entrar el blog.


Ahí se muestra el saludo en el gadget con el nombre incluido.
El código se debe pegar en el mismo gadget. O sea que vasmos a Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript y pegamos este código (siempre en la solapa Edición de HTML):
<script>
<!--

// Boolean variable specified if alert should be displayed if cookie exceeds 4KB
var caution = false

// nombre - Nombre para el cookie
// value - value of the cookie
// [expiracion] - expiration date of the cookie (defaults to end of current session)
// [path] - path for which the cookie is valid (defaults to path of calling document)
// [domain] - domain for which the cookie is valid (defaults to domain of calling document)
// [secure] - Boolean value indicating if the cookie transmission requires a secure transmission
// * an argument defaults when it is assigned null as a placeholder
// * a null placeholder is not required for trailing omitted arguments
function setCookie(nombre, value, expiracion, path, domain, secure) {
var curCookie = nombre + "=" + escape(value) +
((expiracion) ? "; expiracion=" + expiracion.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "")
if (!caution || (nombre + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}

// nombre - name of the desired cookie
// * return string containing value of specified cookie or null if cookie does not exist
function getCookie(nombre) {
var prefix = nombre + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
}

// nombre - name of the cookie
// [path] - path of the cookie (must be same as path used to create cookie)
// [domain] - domain of the cookie (must be same as domain used to create cookie)
// * path and domain default if assigned null or omitted if no explicit argument proceeds
function deleteCookie(nombre, path, domain) {
if (getCookie(nombre)) {
document.cookie = nombre + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expiracion=Thu, 01-Jan-70 00:00:01 GMT"
}
}

// date - any instance of the Date object
// * you should hand all instances of the Date object to this function for "repairs"
// * this function is taken from Chapter 14, "Time and Date in JavaScript", in "Learn Advanced JavaScript Programming"
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}

var now = new Date()
fixDate(now)
now.setTime(now.getTime() + 31 * 24 * 60 * 60 * 1000)
var nombre = getCookie("nombre")
if (!nombre)
nombre = prompt("Ingrese un nick o nombre:", "Internauta")
setCookie("nombre", nombre, now)
document.write("Hola " + nombre + "!")
//-->
</script>
Como es un truco muy simple. No se necesita agregar ninguna modificación.
Haz la prueba verás que es un truco no muy visto en páginas webs y es muy curioso.

viernes, 13 de agosto de 2010

Propiedad border

Esta propiedad permite asignar un borde y establecer su grosor, tipo de borde y color. Para entender qué es precisamente esto, principalmente es una propiedad que se puede usar en códigos CSS y en códigos HTML siempre y cuando lo agregues dentro del atributo style. Por ejemplo:
Usando "border" en HTMLUsando "border" en CSS
<p style="border: 1px solid #2F2F2F;"></p>p {
border: 1px solid #2F2F2F;
}

Hay varios tipos de bordes que se pueden cambiar y cada uno tiene una trama distinta. Para cambiar de borde, reemplaza uno de los siguiente tipos de borde por el que está en el ejemplo (solid): inset, outset, double, solid, none, dotted, dashed, groove, ridge.
Tipo de borde
Ejemplo de borde
Código
insetInset
<span style="margin: 2px; padding: 2px; border: 3px inset rgb(0, 0, 0);">Inset</span>
outset
Outset
<span style="margin: 2px; padding: 2px; border: 3px outset rgb(0, 0, 0);">Outset</span>
double
Double
<span style="margin: 2px; padding: 2px; border: 3px double rgb(0, 0, 0);">Double</span>
solid
Solid<span style="margin: 2px; padding: 2px; border: 3px solid rgb(0, 0, 0);">Solid</span>
none
No implementa un borde, es nulo.

dotted
Dotted<span style="margin: 2px; padding: 2px; border: 3px dotted rgb(0, 0, 0);">Dotted</span>
dashed
Dashed<span style="margin: 2px; padding: 2px; border: 3px dashed rgb(0, 0, 0);">Dashed</span>
groove
Groove<span style="margin: 2px; padding: 2px; border: 3px groove rgb(0, 0, 0);">Groove</span>
ridge
Ridge<span style="margin: 2px; padding: 2px; border: 3px ridge rgb(0, 0, 0);">Ridge</span>

Partes de la propiedad

border: 1px solid #2F2F2F;
Lo que esta marcado en rojo, es el grosor del borde.
Lo que esta marcado en verde es el tipo de borde. Puedes cambiarlo por uno de los mencionados en el cuadro.
Y lo que esta marcado en azul es opcional y establece el color del borde.
Utilización
Esta propiedad como vimos se puede usar tanto para HTML como para CSS. Y también se puede implementar en cualquier etiqueta que esté relacionado con imágenes, textos y cuadros.

sábado, 7 de agosto de 2010

Rotador de mensajes con efectos

Este truco es principalmente un gadget que tiene un recuadro y dentro de este se van cambiando varios textos que van a ser predeterminados por vos. Es decir, van a haber varios mensajes (los que quieras) que se rotarán cada 5 segundos. Y lo mejor es que la trancisión de cada mensaje es llamativa...
El ejemplo del gadget lo podés ver en el "Laboratorio de TB".
Añadir un rotador de mensajesLa única manera de obtener este objeto es añadiendolo en un gadget (porque es un script). Entonces iremos una vez más a Blogger → Diseño → Elementos de la página → Click en el enlace "Añadir un gadget" → Y seleccionamos el modo de HTML/Javascript → Y ahora pegamos este código:
<script language="JavaScript1.2">
var delay=3000 //pausa (en milisegundos)
var fcontenido=new Array()
begintag='<font face="trebuchet" size=2>'
fcontenido[0]="Modifica tu blog en Teoría Blogger"
fcontenido[1]="Teoría Blogger tiene una gran cantidad de categorías para ofrecerte."
fcontenido[2]="En Teoría Blogger creces vos y nosotros también"
fcontenido[3]="teoriablogger.blogspot.com"
closetag='</font>'
var fwidth=150 //ancho
var fheight=150 //alto
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=2000
//function to change content
function changecontent(){
if (index>=fcontenido.length)
index=0
if (DOM2){
document.getElementById("fscroller")
.style.color="rgb(255,255,255)"
document.getElementById("fscroller")
.innerHTML=begintag+fcontenido[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller
.innerHTML=begintag+fcontenido[index]+closetag
else if
(ns4){
document
.fscrollerns
.document
.fscrollerns_sub
.document
.write(begintag+fcontenido[index]+closetag)
document
.fscrollerns
.document
.fscrollerns_sub
.document.close()}
index++
setTimeout("changecontent()",delay+faderdelay)}

// colorfade() partially ////////////
frame=20;
hex=255
function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=10; // increase color value
document
.getElementById("fscroller")
.style
.color="rgb("+hex+","+hex+","+hex+")";// Set color value.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller")
.style.color="rgb(63, 151, 255)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document
.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')
window.onload=changecontent</script><ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>
Antes de pegar este código es bueno mencionar que se debe pegar en modo de Edición de HTML y no hacer click nunca en Edición RTF. Porque modificaría al Script y no funcionaría como queremos.

Modificar los mensajes

Para modificar los mensajes debes reemplazar los pequeños textos de ejemplo que se plasman en el código dado, que los he remarcado en verde.

Agregar más mensajes

Para hacer que aparezcan más de 4 mensajes que puse en el código (0, 1, 2, 3), debemos copiar una línea de mensaje debajo de la última y poner el número correspondiente. El número de mensajes que puedes poner es ilimitado.
Lo que está remarcado en rojo, es donde puedes reemplazar el tipo de fuente del gadget.

Quitar barra Navbar

Para muchos de los que estan en Blogger, la barra Navbar es una molestia. Y muchos desean eliminarlo, más que nada por su estética (aunque actualmente hay para elegir con colores más modernos).
Por si no sabes a lo que me refiero, te ubico en la página principal de un blog recién creado: Verás una barra en la parte superior de la página:Barra Navbar

Quitar la Barra Navbar de tu blogPara quitar la barra navbar debemos modificar la plantilla en Blogger → Diseño → Edición de HTML y buscamos lo siguiente, presionando ctrl + f:
]]></b:skin>

arriba de este código, pegamos este código CSS:
#navbar-iframe {
display: none !important;
}
La parte completa quedaría así:
#navbar-iframe {
display: none !important;
}

]]></b:skin>
Vista Previa y si notas el cambio, Guárdalo!