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.

domingo, 26 de septiembre de 2010

Agrandar o achicar textos en blog

Seguramente este truco ya lo haz visto, no sólo en algunos blogs, sino también en algunos periódicos virtuales.
Se trata de dos enlaces (en este caso botones) que hacen que las letras del blog completo se achiquen o agranden, según los que indique el botón, para gente con alguna discapacidad visual. Además incluye un botón que hace que las letras vuelvan al tamaño original.
Botones que permiten achicar o agrandar tamaños de letras
El ejemplo del truco, puedes encontrarlo en el Laboratorio de T.B (2)
Poner botones para agrandar o achicar letra en el blogHay un detalle que no mencioné, y es que este truco posee efectos de jquery.
Para instalar el Script del truco debemos ir a Blogger → Diseño → Edición de HTML → Buscamos la etiqueta </head> presionando ctrl+f → Cuando hayamos encontrado la etiqueta </head>, pegamos el siguiente código arriba de la etiqueta:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- más trucos jquery en teoriablogger.blogspot.com -->
<script type='text/javascript'>
$(function(){$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;a&#39;) {finalNum *= 1.1;}
else if (this.id == &#39;achicar&#39;){finalNum /=1.1;}
else if (this.id == &#39;reiniciar&#39;){finalNum =13;}
ourText.animate({fontSize: finalNum + stringEnding},500);});});
</script>
Si ya haz utilizado un código Jquery antes, no agregues el código que está escrito en rojo.
El próximo paso es agregar los botones al blog, a los botones los vamos a alojar en un gadget. Vamos a Blogger → Diseño → Elementos de la página → Elegimos la opción HTML/Javascript y pegamos los códgios siguientes:
<div id='resizefont'>
<input id="agrandar" title="teoriablogger.blogspot.com" type="button" value="A+" />
<input id="reiniciar" title="teoriablogger.blogspot.com" type="button" value="A" />
<input id="achicar" title="teoriablogger.blogspot.com" type="button" value="A-" />
</div>
Debes saber que estos botones sólo achican o agrandan palabras o letras, no imágenes o objetos de video o algo por el estilo.

Etiqueta big

La etiqueta big (<big>)hace que un texto se muestre más grande que lo que debería estar comúnmente.
Ejemplo de etiqueta big:
Texto <big>más grande</big> que los demás.
Texto más grande que los demás.

Atributos opcionales
Muestra de sintaxis
style<big style="">Texto</big>
title<big title="Título">Texto<big>
class<big class="">Texto</big>
id<big id="">Texto</big>
dir
<big dir="">Texto</big>
lang<big lang="">Texto</big>

La etiqueta big puede ser utilizado para resaltar un determinado texto.

Pequeñas diapositivas con imágenes, descripción, enlaces y efectos

Enseñaré una vez más un truco con efectos Jquery, que como muchos saben, casi siempre nos sorprende con sus efectos de transición y demás.
En esta ocasión se trata de una serie de imágenes que van rotando siempre con sus respectivos títulos y enlaces. Y además con transiciones!
Diapositivas con efectos

Instalar diapositivas en el blogPara estos vamos a hacer cambios en la plantilla yendo a Blogger → Diseño → Edición de HTML → Presionamos ctrl+f para buscar:
]]></b:skin>

En donde arriba de este código pegamos el siguiente código CSS:
#s3slider {
border:5px solid #000;
width:250px;
height:190px;
position: relative;
overflow: hidden;
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px;
position: absolute;
top: 0;
margin-left: 0;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
left: 0;
text-indent: 0px;
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: block;
top: 0;

/*
if you put
top: 0; ->
if you put
bottom: 0; ->
*/
}

.clear {
clear: both;
}
Cuando hayas pegado ese código busca lo siguiente: </head>
y pega arriba de el mismo, el siguiente código Javascript:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
Una vez hecho los dos pasos, ya terminaste de instalar los plugins jquery para los efectos y el estilo de todos los elementos.
Ahora necesitamos que el elemento se vea en el blog. Vamos a Diseño → Elementos de la página → Añadir un gadget → Modo HTML/Javascript y pegamos el código siguiente:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 1" target="_blank" rel="nofollow"><img border="0" alt="Describe el contenido de imagen 1" width="250" src="URL de imagen 1" height="190"/></a>
<span>Título 1</span>
</li>
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 2" target="_blank" rel="nofollow"><img border="0" alt="Describe el contenido de imagen 2" width="250" src="URL de imagen 2" height="190"/></a>
<span>Título 2</span>
</li>
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 3" target="_blank" rel="nofollow"><img width="250" height="190" alt="Describe el contenido de imagen 3" src="URL de imagen 3"/></a>
<span>Título 3</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
Modifica las palabras coloreadas por lo que indican las palabras de cada atributo.
En caso de que hayan problemas, es decir, que no suceda nada. Recordar asignar el gadget siempre en el sidebar o sea en la barra lateral (izquierda o derecha).

IMPORTANTE:
Lo más probable es que este truco no funcionen con las plantillas clásicas de Blogger, es decir las plantillas antiguas. Te recomendamos descargar una plantilla en Btemplates.com o diseñar una plantilla en Blogger con el nuevo diseñador de plantillas de Blogger.

viernes, 24 de septiembre de 2010

Propiedad color

Con la propiedad color establecemos el color de letra de algún elemento. Aunque suene muy obvio, la propiedad color, se escribe como tal: color.
¿Cómo obtener un color determinado?
Lo más dificil de explicar es cómo obtener un color preciso. Para empezar, hay tres formas de definir los colores en la internet: Con los valores Hexadecimales, con los valores RGB y con el nombre del color (en inglés).

¿Qué significa hexadecimal?

El código hexadecimal es una manera de definir un determinado color en una planilla de estilo. El código siempre está compuesto por seis dígitos (de ahí hexa-) que puede adoptar números del 0-9 y también letras de la A-F. Además siempre adelante habrá un numeral (#).
Ejemplo: #FFA500

¿Qué significa Valor RGB?

Principalmente RGB significa Red Green y Blue: Rojo Verde y Azul. Para entenderlo más sencillamente, estos tres colores se mezclan para formar muchos más. El valor máximo que puede tener uno de los tres colores es 255.
Si prestamos atención, la partícula sigue su orden "RGB", por ejemplo:
color: rgb(255, 0, 0); = Hola
color: rgb(o, 255, 0); = Hola
color: rgb(o, 0, 255); = Hola
Entonces si aumentamos más algún color de los tres (Rojo, Verde y azul) más se va a parecer a este. Si mezclamos el azul y el rojo vamos a obtener violeta:
color: rgb(255, 0, 255); = Violeta

Nombres de colores y sus respectivos códigos

Nombre Color Código Hexadecimal Código RGB
redrojo#FF0000 rgb(255, 0, 0)
blue azul #0000FF rgb(0, 0, 255)
yellow amarillo #FFFF00 rgb(255, 255, 0)
orange Naranja #FFA500 rgb(255, 165, 0)
green Verde #008000 rgb(0, 128, 0)
purple Morado#800080 rgb(128, 0, 128)
chocolate Chocolate#D2691E rgb(210, 105, 30)
brown Marrón #A52A2A rgb(165, 42, 42)
maroonGranate #800000 rgb(128, 0, 0)
salmon Salmón #FA8072 rgb(250, 128, 114)
olivedrab Verde olivo #6B8E23 rgb(107, 142, 35)
fuchsia/magentaFuccia #FF00FF rgb(255, 0, 255)
skyblueCeleste #87CEEB rgb(135, 206, 235)
gold Dorado #FFD700 rgb(255, 215, 0)
violet Violeta #EE82EE rgb(238, 130, 238)
silverPlateado #C0C0C0 rgb(192, 192, 192)
gray Gris #808080 rgb(128, 128, 128)
black Negro #000000 rgb(0, 0, 0)
white Blanco #FFFFFF rgb(255, 255, 255)
Para ver una lista completa de nombres de colores Click aquí.

Utilización/Sintáxis

Para aplicar un color, copiamos el valor hexagecimal, rgb o el nombre del dicho color y lo pegamos como un valor de la propiedad color.
Ejemplo utilizando color en CSS:
<style>
span {
color:#008000;
}
</style>
Propiedad: En este caso la propiedad que modifica al objeto (span) es color.
Valor: Aquí es donde va el nombre de un color, ejemplo red; el código hexagecimal, ejemplo #FF0000; o el código rgb, ejemplo rgb(255, 0, 0).

Usando "color" en HTMLUsando "color" en CSS
<span ></span>span {
color:#008000;
}

<span style="color: rgb(0, 128, 0);"></span>
span {
color:rgb(0, 128, 0);
}

<span ></span>
span {
color:green;
}

Cambiar color de un texto en estado de selección (sólo para Firefox)

Si eres detallista el color de un texto seleccionado, en cualquier página, es el mismo. Pero no siempre es así. En el navegador Mozilla Firefox (también en Safari), se puede observar que en algunas páginas no tienen un color en común al seleccionar un texto y que pueden ser diferentes.
Sin embargo, esto se debe a que sólo Mozilla y Safari permiten este cambio (por ahora).
Distintos colores al seleccionar

Cambiar color común de selección de textoPara cambiar esta preferencia, debemos hacer unos cambios en la plantilla. Iremos a Blogger → Diseño → Edición de HTML y buscamos (ctrl+f) la siguiente partícula de código: }]]>
Cuando hayamos encontrado este código, pegamos arriba del mismo, el siguiente código:
::-moz-selection {
background: #4F4F4F;
color:#FFFFFF;
}
::selection {
background: #4F4F4F;
color:#FFFFFF;
}
Lo escrito en verde, va el color de fondo que tendrá el texto al seleccionarlo.
Lo escrito en rojo, va el color de letra que tendrá el texto al seleccionarlo.
Lo escrito en amarillo es la propiedad que se utiliza para modificar la preferencia en Mozilla Firefox (::-moz-selection ).
Lo escrito en violeta es la propiedad que se utiliza para modificar la preferencia en Safari (::selection).

domingo, 12 de septiembre de 2010

Hacer temblar la pantalla en el blog

Un truco simple muy curioso que asustará a más de un lector. Se trata de un script que funciona haciendo achicar la pantalla y haciéndolo temblar, pareciendo que es un virus o algo así.
Para ver funcionar el truco, haz click aquí: Laboratorio de T.B.
Temblor en blogPara esto debemos modificar la plantilla yendo a Blogger → Diseño → Edición de HTML → Busca la etiqueta body (presiona ctrl+f y busca <body>). Cuando lo hayas encontrado, pega el siguiente códgio debajo de la etiqueta body:
<script language='JavaScript1.2'>
function tremer(n) {
if (self.moveBy) {
for (i = 20; i &gt; 0; i--) {for (j = n; j &gt; 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);}
}}}tremer(6)</script>
Guarda los cambios y mira el blog!

IMPORTANTE:
Al agregar este código en la plantilla harás que el código se active cada vez que entres a una entrada o a una página del mismo blog. Esto puede llegar a ser molesto para el lector.

viernes, 10 de septiembre de 2010

Imagen que al pasar el mouse se cambia

El truco es muy simple. Se trata de una imagen que cuando pasas el cursor por encima del mismo, cambiará de imagen inmediatamente. Aquí está el ejemplo:


Cambiar una imagen al pasar por otraAfortunadamente, este truco lo podemos aplicar a cualquier sector del blog, ya sea en las entradas
o el sidebar. Esto se debe a que el código no es un script, sino un código HTML.
Entonces pegamos el siguiente código en donde quieran:
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="URL del enlace"><img border="0" src="URL de la 1ra imagen" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="URL de la 2da imagen" vspace="3"></a>
Lo escrito en verde es para que lo reemplaces por la dirección de la página a enlazar.
Lo escrito en rojo es lo que hay que reemplazar por la URL de la imagen que permanerá
intacto si no pasas el cursor por encima.
Lo marcado en amarillo, se reemplaza por la URL de la imagen que aparecerá al pasar el
cursor.

No hay que olvidarse

Para agregar más de estos códigos en una misma página o blog, se deben hacer los cambios
en el código cada vez que insertes uno: cuando quieras insertar otro código igual, debes cambiar
el número de todas las apariciones de esta pequeña parte del código fpAnimswapImgFP1
a fpAnimswapImgFP2, es decir, cambiamos el número de ese código, por la cantidad de códigos
puestos en el blog. Por ejemplo:
En el primer código puesto por cuarta vez, pondrás en todas las apariciones del código marcado
en violeta
, fpAnimswapImgFP4
O en el quinto código puesto por quinta vez, pondrás en todas las apariciones del código marcado
en violeta
, fpAnimswapImgFP5.
Y así correlativamente: 1, 2, 3, 4, (...).

Ver video explicativo

jueves, 9 de septiembre de 2010

Quitar el número de entradas por categorías

Para ver este truco debes tener el gadget que ofrece Blogger, el gadget de Etiquetas. En este gadget se puede ver la lista de las etiquetas publicadas, y el número de entradas que hay en cada una, a la derecha.
Quitar el número de entradas publicadas por etiquetaPara sacarlo nesecitamos de dicho gadget. Entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget: Etiquetas. Y si el gadget ya lo tienes añadido, haces click en el correspondiente gadget y en editar.
Click en Mostrar cantidad de entradas por etiqueta
Allí hacemos click en la gaceta, Mostrar cantidad de entradas por etiqueta.
Muestra de antes y después de la modificación

Ver video explicativo

miércoles, 8 de septiembre de 2010

Elementos que no deben faltar en un blog

A pesar de decoraciones que el administrador agrega por curisidad, existen elementos que no deben faltarle a un blog por ser básicos o por ser muy útiles.
Elementos y funciones para un blog
  1. Un Buscador: Es parte de la navegación de tu blog, permite más opciones de entradas a tus lectores y ayuda.
  2. Un formulario de contacto: Comunica el admnistrador con el lector, puede ayudar al administrador de un blog con sugerencias y opiniones.
  3. Blogroll: Es una lista de enlaces de blogs publicados a la columna lateral de un blog (o sea en un gadget).
  4. Un espacio de Entradas relacionadas: Con este elemento harás que hayan lectores que quieran leer algo relacionado con lo que les interesa. Otro elemento relacionado con la navegación.
  5. Listado de Categorías: Permite entradas clasificadas por categorías que aumentará el número de páginas vistas.
  6. Archivo de entradas: Haz una lista de todas las entradas según los días, meses o los años.

Valora tu blog en Blogdeldia.org

En el blog llamado Blog de día, una página que premia a los blogs más votados todos los días, hay una trivia de preguntas que te permite saber cuál es la puntuación de tu blog. En alguna parte del formulario, pregunta si tienes algunos de los elementos mencionados.

domingo, 5 de septiembre de 2010

Cómo bajar música mp3

Hemos conseguido la manera segura garantizada de bajar archivos mp3. Para bajar estos archivos, necesitamos dos páginas: Goear.com y downmusic.org. Estas dos páginas las vamos a tener abiertas, ya que nos sirve para llevar a cabo el tutorial.
Descargar música mp3
  1. En la página Goear, buscamos un tema que te guste y hacemos click en el título del tema para ingresar a la página del mismo:
    Elegimos un título
  2. Escuchamos el tema que nos ofrece el reproductor para ver si es el que queremos.
    Reproducimos el tema para comprobar que es el que queremos.
  3. Si lo es, copiamos la url de la página en la que estás.
    Copiamos la URL de la página del tema a bajar.
  4. Ahora nos dirigimos a la otra pestaña o ventana: a Downmusic.org. Y pegamos la URL en el campo de texto.
    Pegamos la URL en downmusic.org
  5. Presionas el botón Descargar canción y esperas a que se descargue la música.
  6. Cuando termine puedes disfrutar de escucharla con seguridad.
Aquí un video tutorial para tener imágenes detenidas:

viernes, 3 de septiembre de 2010

Rotador de botones y links

Este pequeño truco es un botón (común) que tiene la particularidad de que rota las palabras de este, y a la vez, cambia el enlace según el texto que contenga en ese momento.
Puedes ver el truco en el Laboratorio de Teoría Blogger
Obtener un rotador de botonesEsta especie de tener "muchos botones en uno", se puede agregar al blog añadiéndolo a la barra lateral (sidebar).
Por eso vamos a Blogger → Diseño → Elementos de la página → Click en el link Añadir un gadget y pegamos este código:

<script language="JavaScript">
<!-- Mas trucos en teoriablogger.blogspot.com -->
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineaNo = 0
var lineaMax = 5
var lineaArr = new Array(lineaMax)
var urlArr = new Array(lineaMax)

lineaArr[1] = "Lo que muestra el botón "
urlArr[1] = "http://urldeblog"
lineaArr[2] = "Lo que muestra el botón 2"
urlArr[2] = "http://urldeblog"
lineaArr[3] = "Lo que muestra el botón 3"
urlArr[3] = "http://urldeblog"
lineaArr[4] = "Lo que muestra el botón 4"
urlArr[4] = "http://urldeblog"
var lineaText = lineaArr[1]
function StartShow() {
StopShow()
Showlinea()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineaWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function Showlinea() {
if (charNo == 0) {
if (lineaNo < lineaMax) {
lineaNo++
}
else {
lineaNo = 1
}
lineaText = lineaArr[lineaNo]
charMax = lineaText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineaText.substring(0, charNo)
charNo++
timerID = setTimeout("Showlinea()", 100)
}
else {
charNo = 0
timerID = setTimeout("Showlinea()", 3000)
}
}
function IraUrl(url)
{
top.location.href = url
}
document.write("<form name="formDisplay">");
document.write("<input type="button" name="buttonFace" value="&{lineaText}" size="18" onClick="IraUrl(urlArr[lineaNo])">");
document.write("</form>");
StartShow();
</script>
Para modificar el script a tu gusto, debes modificar lo que está en rojo para que establezcas los textos que quieres que se cambien. Y modifica lo escrito en verde por la dirección que se quiere ir cuando aparezca el debido texto.
Se pueden agregar más textos (y sus URLs) siempre y cuando logres el orden de los números de lineaArr y urlArr del código dado.

miércoles, 1 de septiembre de 2010

Atributo alt

Se puede utilizar únicamente con la etiqueta img (<img/>). Y sirve para darle el nombre de la imagen o describir la misma. Para hacerlo debemos pensar que hay navegadores que no leen imágenes y que a cambio se muestran esas palabras.
El atributo alt es un atributo en el que se debe tipear una frase o palabra para nombrar o describir la imagen.

Sintaxis

<img src="imagen.jpg" alt="Nombre de imagen">
Por ejemplo, en la siguiente imagen vamos a ver un paisaje de las Cataratas del Iguazú.

Panorámica de Cataratas del Iguazú

Esta imagen está formada de la siguiente manera:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUV-bFXN1M8L7kAzk6ywijLSJd0qDys7gbx_mWAfAJe0cMdK88DNJ_xZj22wzQWDb0sY12tnw8utiidApkH1wzlqdurfiboB6vMqi1QP-sXeuAZ8L4mQfEP9e96t8JaQ9_7bnM0p61to/s1600/argentina_iguazu_cataratas.jpg" alt="Panorámica de Cataratas del Iguazú" />

Una GRAN ventaja

El atributo alt no sólo es una pequeña frase. Sino que también, al utilizarlo, estas almacenando tu imagen a Google images porque es este el que detecta las páginas webs y blogs que tienen este atributo en sus imágenes y esto puede implicar visitas. Esto fue anunciado por uno de los fundadores de Google en el año 2008.