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