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, 2 de junio de 2013

Crear degradados, pero... ¿sin imágenes?

Los degradados en internet, ya son invisibles. Pero no porque no estén, todo lo contrario. Son invisibles porque ya estamos demasiado acostumbrados a ellos y no podemos detenernos a pensar en que un fondo tiene un degradado, por ejemplo.
Pero nosotros somos parte de los que hacemos la web, por lo que este tema sí nos debe interesar y no nos tiene que parecer invisible.
Antes
Para crear un degradado, teníamos que abrir en nuestro ordenador un programa de creación de imágenes (como el Photoshop) y crear el degradado en formato de imagen (png, jpg, gif). Lo cual nos costaba, además de trabajo, un poco de tiempo.
Hoy
Existen muchas aplicaciones y páginas que nos ayudan a crear el degradado sólo copiando y pegando un código de CSS3 y son muy fáciles de usar!
Antes de empezar a explicar, quiero que vean el resultado de lo que les proponemos en este post haciendo click en el enlace que los lleva al final del post. Click aquí para ver los degradés.
Crear degradados con CSS3 ¿Qué es CSS3?
CSS3 es la última versión de CSS (Un lenguaje para establecer estilos a las páginas HTML).
¿Cúal es la diferencia entre la última y la anterior versión?
Es una pregunta amplia, es decir, se le puede dedicar todo un post acerca de esto. Pero en rasgos generales, CSS3 nos permite hacer muchos más cambios en cuanto al estilo propio de una web, como por ejemplo las fuentes, los colores transparentados, los bordes, entre otros. Pero lo que hay que remarcar es que CSS3 nos permite tener un gran resultado en cuanto a efectos visuales sin necesidad de crear imágenes. El ejemplo de esto es justamente, el degradado.

Crear degradados sin imágenes

Empezamos por decir que lo siguiente puede llegar a ser muy fácil o muy difícil, depende del conocimiento que tengan acerca de CSS (sin discriminar versión), de cualquier forma pueden ver este post que puede servirles de ayuda si ponen atención y se concentran.
Dicho esto:
  1. Vamos al siguiente link: Ultimate CSS Gradient Generator - ColorZilla.com
  2. En la pantalla vemos un cuadro con degradés defaults, estos son creados por los de ColorZilla, podemos elegir uno si queremos.
  3. Pero también puedes crear tus propios degradés para que se adapte a tu necesidad. Es muy fácil, basta con saber qué colores hay que usar en la barra de la siguiente imagen. También podés elegir la opacidad de los colores y hacer un degradé con eso:
  4. Bueno, una vez elegido el degradé, vamos a los códigos. A la derecha de la pantalla aparece un textarea en el que aparece el código CSS del degradé. Vamos a copiar y pegar este código y lo pones en un selector en código CSS. Por ejemplo:
    .EjemploDeSelector{
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    }

Preguntas

¿Cuáles son las ventajas de no usar una imagen?
Las ventajas son que no tienes que crear una imagen por tu cueta, lo cual ahorra tiempo y además pesa mucho menos que poner una imagen.
¿Qué uso se le da a esto, es decir, para qué tipo de cosas serviría en una web?
La respuesta es: sólo se usa para fondos. Pueden ser para cualquier objeto en tu web que posea fondo (header, main, sidebar, footer, inclusive body).
¿Funciona para todos los navegadores?
Sí, para los más usados con sus últimas versiones sí (como por ejemplo: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, NetScape, Safari).
¿Se puede usar este degradé para letras y links?
No, es sólo para fondos.

Ejemplos 

Con esta aplicación se pueden crear "cajas" con fondos como estos:
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

miércoles, 1 de mayo de 2013

Volviendo...

Tras largos meses de ausencia, quiero darles las gracias por todas las visitas que nos han regalado cada uno de ustedes. Sé que no serán muchos en comparación con otras páginas, pero son muchos para mí. Sinceramente (me gusta ser sincero), no sólo tuve tiempo para seguir con esta maravilla de los blogs, sino que me ha desepcionado la idea de tener que actualizar todas las entradas debido a la ya no reciente actualización de Blogger (la mejor plataforma de blogs del mundo). Sin embargo, en ésta última semana me estuve interiorizando con esto (una vez más) y renové fuerzas para seguir escribiendo y enseñarles, porque eso es lo que hacemos desde el año 2009. GRACIAS a toda la población de habla hispana que entró en estos meses y a todos los que siguen comentando en un blog a pesar de la presencia subordinada de las redes sociales. Los saludo y los espero pronto. Mayo 2013.


Twitter: @teoria_blogger
Facebook

miércoles, 18 de julio de 2012

¿Qué es un favicon?

El favicon de un blog o página web es un pequeño ícono que aparece en el navegador, al lado de la barra de dirección. En la siguiente imagen se muestra lo que estoy hablando:
Favicon en el navegador
El predeterminado favicon de todo blog de blogger, es el siguiente:
Este ícono que representa a Blogger, puede ser cambiado por otro que quieras. Seguramente esto ya lo sabías ya que hay miles de administradores de blogs que ya lo hicieron.
Por eso, te recomendamos ver el siguiente post y seguir los pasos que se muestran en el siguiente recuadro.
Cambiar favicon de mi blogEntonces, sabemos que lo básico del favicon es una imagen pequeña o un ícono que represente a un blog que lo podemos ver en cualquiera de los principales navegadores.

¿Cómo debe ser el ícono?

El ícono puede tener las medidas que quieras. La desventaja de poner un favicon con una imagen muy extensa es que no se entenderá nada cuando se quiera ver en el navegador. Entonces, para que no ocurra esto, te recomendamos que tenga una medida mínima de 16x16, y una medida máxima de 128x128.
El formato puede se .gif (para íconos animados) .png o .jpg.
La imagen, debe ser algo sencillo, algo que sepas que se puede ver. Debe ser algo representativo del blog.

Vamos a los pasos

  1. Crea tu ícono: Puedes hacerlo o descargarlo de una página y editarla. Procura de que sea desde 16x16 hasta128x128. Guárdalo en formato jpg, gif, o imágenes png.Podemos dibujar en programas como el Paint. En la imagen se muestra que las medidas utilizadas son de 80x80.
  2. Súbela a Blogger o a una página para subir imágenes
    Subir ícono a Blogger
  3. Copia la URL de la etiqueta a <a> en la solapa Edición de HTML. Ver el ejemplo de la imagen:
    Copiar la URL que aparece en la etiqueta a
  4. Pégalo en el siguiente código en donde dice URL de la imagen:
    <link href='URL de la imagen' rel='shortcut icon'/>
  5. Ahora el código que nos quedó lo pegaremos en la plantilla. Así que iremos a Diseño → Edición de HTML → buscamos la etiqueta </head> (presionando ctrl+f). Arriba de </head> pegaremos el código (el del paso 4).
  6. "Guardar cambios" y ver plantillas.

Para dudas: teoriablogger@hotmail.com | Contactar

domingo, 18 de marzo de 2012

Mostrar tus Tweets en tu blog (widget de Twitter)

Sabemos que hoy se obtienen visitas y tráfico por los motores de búsqueda y principalmente por las redes sociales. Es aquí a donde elige ir la mayoría de los usuarios en Interte en todo el planeta.Entonces qué mejor que tener parte de una de las redes sociales más visitadas en tu blog.
En esta ocasión elegimos Twitter, que nos ofrece un gadget que permite que tus lectores vean tus tweets de manera muy práctica.
Widget de Twitter en blog

Tener widget de Twitter en tu blog
  1. Entra a Twitter e inicia sesión [twitter.com]
  2. Ahora nos centramos en la parte inferior de la columna izquierda y vemos el link Recursos
    Recursos de Twitter
  3. Entramos en este link y nos guía a una página la cual le daremos click en "Widgets" [Click en imagen para ampliarla]
    Widgets de los recursos de Twitter
  4. Luego iremos a una página en la que haremos click en la solapa "Mi sitio web" y luego cliqueamos en "Widget de perfil" [Click en imagen para ampliarla]
    Mi sitio webClick en widget de perfil
Una vez que hicimos este último paso, vamos a tener la siguiente pantalla:
Personalizar el widget a tu manera
En el que podemos modificar los colores en la solapa "Apariencia", modificar las medidas en la solapa "Dimensiones", o modificar la cantidad de tweets que querés que muestre en "Preferencias".
Cuando ya tengamos listo nuestro widget, vamos a hacer click en el botón "Finalizar & guardar código " [Ver imagen].

A continuación copiaremos el código que nos aparece [Ver imagen] y sigue los siguientes pasos, luego de la siguiente imagen.

  1. Abrimos una pestaña o ventana nueva de tu navegador...
  2. Vamos a Blogger
  3. Diseño
  4. Click en "Añadir un gadget"
  5. Elegir el gadget del tipo HTML/Javascript
    HTML/Javascript
  6. Pega el código copiado en Twitter
  7. Guardar gadget → Guardar los cambios.

[Pasos para la anterior interfazBlogger → Diseño → Elementos de la página →
Click en "añadir un gadget" → Elegir el gadget en modo
HTML/Javascript→ Pegar código
]

martes, 17 de enero de 2012

¿Cuánto falta para que termine el día?

Este reloj va en cuenta regresiva y te indica cuántas horas, minutos o segundos falta para que termine el día.
Esto sólo se puede añadir a un gadget del blog, ya que este truco lo conforma un script. La única manera de agregarlo en una entrada es poniendo el script solo en un gadget, y en la entrada poner el código HTML ligado al script.
¡No te preocupes! Explicaremos ambas formas.
Aplicar la cuenta regresiva

Tener la cuenta regresiva en un gadget

Para esto vamos a Blogger → Diseño → Elementos de la página [Antigua interfaz] → Añadir un gadget → Elegir el modo HTML/Javascript → Pega el siguiente código en ese gadget:
<form name="Reloj">
<input size="7" name="tiempo" value="mm:hh:ss" title="Tiempo para que finalice el día..." type="text" style="color:lime;font-weight:bold;background:black;" /></form><script type="text/javascript" src="https://sites.google.com/site/teoriabloggerad/home/scripts-para-los-trucos/Cuentaregresivadeldia.js"/>
Guardar el gadget y todos los cambios y vé tu blog!

Tener la cuenta regresiva en una entrada

Para esto debemos aplicar el script en un gadget. Entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegir el gadget en modo HTML/Javascript → Pega el siguiente script:
<script type="text/javascript" src="https://sites.google.com/site/teoriabloggerad/home/scripts-para-los-trucos/Cuentaregresivadeldia.js"/>
Guarda los cambios.
Ahora vamos a crear una nueva entrada o abrimos una entrada ya publicada. En la entrada [Blogger → Creación de entradas o Nueva entrada (nueva interfaz) → Nueva entrada (sólo para la anterior interfaz)] → Pega el siguiente código:
<form name="Reloj">
<input size="7" name="tiempo" value="mm:hh:ss" title="Tiempo para que finalice el día..." type="text" style="color:lime;font-weight:bold;background:black;" /></form>
Publica la entrada y mira el blog
Para saber:
No se pueden tener dos relojes al mismo tiempo de ninguna manera. Si así se hace, no funcionarán.


Contadores de distintos colores






























sábado, 14 de enero de 2012

¿Por qué le decimos No al dominio .tk gratis?

Nosotros hemos probado una de las páginas que te ofrecen tener un dominio .tk gratis, antes de publicarlo como un truco más para Blogger. Nuestro error fue haberlo probado en esta misma página, Teoría Blogger.
Los administradores de aquellas páginas o blogs que enseñan esto, no lo probaron lo suficiente (o sí), aún así con tal de obtener visitas seducen a sus lectores mostrándoles algo que puede ser perjudicial al pasar el tiempo.

Experiencia que he tenido

Para ser sinceros, yo también he sentido por un momento que se me ha cumplido el sueño de todo bloguero de Blogger, es decir he probado el dominio .tk. Usé el servicio de dot.tk, pero no debí usarlo gratis...
En un principio no tuve problemas de ningún tipo: No había publicidades, no se saturaba, no era más lento de lo normal, NADA. Hasta que un día, luego de un año y unos meses entré a "teoriablogger.tk" y ví una página con un diseño precario, parecido al de Google (aclaro que Google no tiene nada que ver con esto) y lleno de links publicitarios.

Explicación del asunto

La única explicación posible es lo comercial Pero, ¿Cómo? Luego de un largo tiempo, luego de que Teoría Blogger tenga varias visitas diarias, un día éste desapareció de la red y fue sustituido por una plagada de links publicitarios.
No estoy en contra del dominio .tk para usarlo como dominio para acortar la URL, sino de que en otros blogs parecidos a éste, proporcionen información desconocida y que no adviertan que comprar un dominio .tk es eficiente y te lo asegura en un lapso de tiempo determinado que si a éste lo obtenemos de forma gratuita.
¿Qué debemos hacer?

Consejos

  • Si dispones actualmente de un dominio .tk gratis te recomendamos que avises a tus lectores que vas a cambiar tu dominio mediante un gadget o escribiendo una entrada.
  • Si dispones actualmente de un dominio .tk gratis y quieres que te lo garanticen alargándole el tiempo, debes comprárselo a la página en el que obtuviste y alargar el lapso.
  • Lee o intenta leer las bases y condiciones del servicio que pretendes usar.

Y recuerda que si son cosas importantes como un dominio, es gratis y fácil, no es 100% seguro.


Actualmente el dominio .com.ar (dominio de la región argentina), es el único dominio gratuito y te asegura 2 años en la red (para extenderlo deben pagar). Este dominio se puede aplicar a Blogger (como todos), pero requiere de conocimientos de los cuales carecemos.
Si conoces otro dominio que garantiza un largo tiempo y es gratuito, envíanos tu sugerencia.

domingo, 8 de enero de 2012

Cambiar la antigua interfaz de Blogger por la nueva y viceversa

Últimamente, los productos Google están evolucionando sus diseños. El último más trascendente es el de Youtube, pero ya hace tiempo que le tocó a Blogger.
Para muchos, la nueva interfaz de Blogger es más moderna y está más organizado que la anterior interfaz. Es mucho más atrayente, ya que sus nuevas tendencias llaman la atención.
Pero, no faltan (y no son pocos) los que se quedan con la antigua interfaz. Esto puede deberse a que les resulta complicado adaptarse a las nuevas funciones del "nuevo Blogger" o simplemente por costumbre a éste.
En este nuevo post, vamos a enseñarles cómo cambiar ambas interfaces, para aquellos que no pudieron hacerlo o que tienen interés.
Cambio de interfaz Blogger

1. Cambiar de la antigua interfaz a la nueva

Para llegar a la nueva interfaz sólo debes entrar a Blogger → y buscar arriba de donde aparece la lista de blogs, que está la selección de idiomas y arriba de éste aparece el link "Probar la interfaz actualizada de Blogger" [Ver la siguiente imagen]
Para ir al nuevo diseño de Blogger debemos entrar a 'Probar la nueva interfaz actualizada de Blogger'

2.Cambiar de la nueva interfaz a la antigua

La única manera de pasar a la interfaz vieja, es presionando un botón que se encuentra en el Escritorio de Blogger. Éste botón aparece arriba de la lista de blogs, a la derecha. El botón es el ícono de un pequeño engranaje.
Opciones
Al hacer click en este botón, se desplega una lista de opciones, la cual elegiremos la opción "Interfaz anterior de Blogger" [Ver siguiente imagen]http://www.blogger.com/img/blank.gif
Elegir la antigua interfaz en la nueva
Suerte!
Dudas: teoriablogger@hotmail.com

Video explicativoHemos preparado el video de este post
Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

sábado, 31 de diciembre de 2011

Las mejores plantillas de juegos

Concurrimos, una vez más, a Btemplates para buscar las mejores plantillas para blogs que se traten de juegos.
Plantillas de juegos para Bloggerhttp://btemplates.com/2011/blogger-template-blackgames/
http://btemplates.com/2011/blogger-template-gameszone/
http://btemplates.com/2011/blogger-template-playgames/
http://btemplates.com/2011/blogger-template-planetgames/
http://btemplates.com/2011/blogger-template-arcadegames/
http://btemplates.com/2011/blogger-template-racinggames/
http://btemplates.com/2011/blogger-template-actiongames/
http://btemplates.com/2011/blogger-template-mini-game/
http://btemplates.com/2011/blogger-template-game-strike/
http://btemplates.com/2011/blogger-template-super-mario/
http://btemplates.com/2011/blogger-template-suvgames/
http://btemplates.com/2011/blogger-template-gameworld/
http://btemplates.com/2011/blogger-template-gamehub/
http://btemplates.com/2011/blogger-template-ivideogames/
http://btemplates.com/2010/blogger-template-game-board/
http://btemplates.com/2010/blogger-template-new-games/
http://btemplates.com/2010/blogger-template-astronova/
http://btemplates.com/2010/blogger-template-gamester/
http://btemplates.com/2010/blogger-template-smart-game/
http://btemplates.com/2010/blogger-template-stargaze/
http://btemplates.com/2010/blogger-template-game-zone/
http://btemplates.com/2010/blogger-template-game-port/
http://btemplates.com/2010/blogger-template-provogue/
http://btemplates.com/2010/blogger-template-dangerous-games/
http://btemplates.com/2010/blogger-template-game-vision/
http://btemplates.com/2010/blogger-template-gamepro/
http://btemplates.com/2010/blogger-template-universe-wow/
http://btemplates.com/2010/blogger-template-guild-wars/
http://btemplates.com/2010/blogger-template-super-mario-land/
http://btemplates.com/2010/blogger-template-games-place/
http://btemplates.com/2010/blogger-template-marioland/
http://btemplates.com/2010/blogger-template-gamerpress/
http://btemplates.com/2009/blogger-template-gamezine/
http://btemplates.com/2009/blogger-template-mass-effect/
http://btemplates.com/2010/blogger-template-grunge-poker/

Para usar una plantilla en tu blog

Una vez que hayamos elegido la plantilla que nos gustó, vamos a descargarlo haciendo click en el botón "Download" y guardaremos un archivo que nos descargará como archivo .zip.Hacer click en Download para descargar el archivo .zipArchivo en formato Zip

Vamos a la carpeta Descargas (o carpeta que contiene el archivo .zip) y hacemos click derecho en ese archivo, y click en "Extraer aquí" (o "Extract Here")
Extraer archivos para el archivo XML
para descomprimir el archivo de formato XML, el archivo que subiremos a Blogger (esto es probable que aparezca dentro de una carpeta con el mismo nombre de la plantilla)

Vamos a Blogger → Plantilla → Botón, Edición de HTML [En la vieja interfaz, Diseño → Edición de HTML], hacemos click en y seleccionamos el archivo XML de la carpeta, que se puede ver en la imagen anterior. Hacemos click en http://www.blogger.com/img/blank.gif
Subir archivo XML a Blogger
Nota:
Para descomprimir el archivo .zip, es decir, hacer click derecho y "extraer aquí", debes tener instalado en tu ordenador un programa para descomprimir archivos o descomprensor. Puedes descargar Win rar o programas similares. No son muy pesados.
Para más info, click aquí: http://www.softonic.com/s/descompresor
Video explicativo
Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

sábado, 3 de diciembre de 2011

Etiqueta a - Crear enlaces (links)

Esta etiqueta es una de las más utilizadas ya que gracias a ella se crean los famosos enlaces o links. Los links nos enlazan o nos llevan a otras páginas al hacer click en uno de ellos.

Ejemplo

Un simple ejemplo, es el siguiente que nos llevará al inicio de esta página Teoría Blogger.

Sintaxis

Como siempre, remarcamos la sitaxis de cada etiqueta, es decir, cómo hacerlo, de qué se compone.
Para crear el link necesitaremos de:
- La etiqueta de apertura
<a>

- Dentro de la etiqueta pondremos el atributo href y dentro pondremos la URL de la página

<a href="http://teoriablogger.blogspot.com">

- El contenido que nos va a decir qué es el link.
"Teoría Blogger"

- La etiqueta de clausura
</a>

Código final

<a href="http://teoriablogger.blogspot.com">Teoría Blogger</a>

Atributos que más se usan

En la etiqueta <a> se usan los siguientes atributos:
Atributos

Muestra de sitaxis

ObligatorioFunción
href<a href="URL"/> Sin esto, no podemos indicar a qué página nos debe llevar el navegador.
target="_blank"<a target="_blank"/> NOCon este atributo podemos la página se abre en otra pestaña o ventana.
style<a style=""/>

id


<a id=""/>

class

<a class=""/>

title<a title=""/>

domingo, 11 de septiembre de 2011

Encuestas muy interesantes para tu blog

Seguramente la mayoría de los blogueros de Blogger, han puesto una encuesta en su blog con el gadget que nos ofrece Blogger. Si bien es una opción, existe una página que no sólo crea las encuestas, sino que también nos da la oportunidad de modificarlas y personalizarlas.
Encuestas en Blogger
Esta es la opción que nos ofrece Blogger
para insertar una encuesta en el diseño del blog

99polls es una página que nos permite crear encuestas flash. Dichas encuestas de dicha página, son simples, ya que cuentan con lo escencial: La pregunta, las opciones, un botón para votar y un botón de resultado.
También nos permite modificar sus colores (ya sean los de las letras, de las preguntas, de los bordes).
Una de las características, respecto de su función, es que sólo nos permite votar una sola vez. De ninguna manera se puede votar dos veces (salvo que tengamos dos ordenadores).

Crear encuestas gratis y eficientes1- Vamos a 99polls.com
2- Damos clic a Registrarse
registrarse en 99polls.com
4- Llenamos el simple formulario y damos clic en donde dice "Para hacer su primera encuesta Hacer clic acá" (como se ve en la siguiente imagen).Crear nuestra primer encuesta
5- Ahora vamos a elegir las funciones de la encuesta:
a) Allí elegimos el diseño (Tema) de la encuesta, entre la gran variedad que se nos presenta.
b) El ancho de la encuesta (recuerda que los números son en píxeles).
c) El color del fondo con código hex. O también puedes cambiarlo con la paleta que nos ofrece.
d) La pregunta la cual vamos a interrogar a los lectores
f) Las respuestas que nos van a dar los lectores (hay un límite de hasta 9 respuestas). Además nos da la opción que asignarle una imagen para cada encuesta.
g) Luego nos da la opción de elegir si queremos que nuestra encuesta aparezca en el listado de encuesta de 99polls.com o no.
h) Aquí van una especie de etiquetas o tags que se ponen para que sea más facil la búsqueda de tu encuesta.
Personalizar tu encuesta
6- Una vez hecho todo, hacemos clic en el botón guardar y luego nos aparecerá la página en la que nos aparece el código para insertar lo en el sidebar o en un post.
Lo copiamos y lo pegamos en donde quieras (los sectores ya nombrados).
Copiar el código de la encuesta y pegarla en un post o el sidebar
7- Para insertarlo en tu blog debemos ir a Blogger y debemos elegir entre publicarlo en una entrada o en un gadget.
Si es en una entrada vamos a Creación de entradas → Nueva entrada → Y lo pegamos en el editor de entradas. Luego lo publicamos.
En cambio, si es en un gadget, vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y lo pegamos allí. Luego lo guardamos.

Crear un diseño para tu encuesta

Cuando creamos la encuesta, en el paso 5- a, elegimos el tema para la encuesta. Las opciones son variadas, pero puede pasar que no estemos satisfechos con algún diseño y queremos que tenga los colores que nosotros queramos.
Para eso vamos a la solapa "Mis Temas" que aparece en la siguiente imagen:
Mis temas
Una vez que entramos en la solapa Mis Temas, hacemos clic en donde dice "Para hacer su primer tema Hacer clic acá".
Crear el primer tema
Allí tenemos todas las opciones para modificar o crear tu tema para tu encuesta.

Consejo
Puedes crear un tema que tenga los colores de tu blog para que tenga la misma temática de éste.

sábado, 10 de septiembre de 2011

¿Cuántas entradas tiene tu blog?

Este truco consiste en un gadget que mediante un script, puede mostrarte la cantidad de entradas publicadas en tu blog.
Es una pequeña función que a pesar de que es lo único que muestra, se actualiza sólo. Es decir, una vez que publiquemos más entradas no hay que modificar nada.
Cantidad de entradas en gadgetVamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Seleccionamos el tipo de gadget HTML/Javascript y pegamos el siguiente código:
Este blog tiene &lt;script style="text/javascript"&gt;
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}&lt;/script&gt;
&lt;script src=http://tublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount&gt;
&lt;/script&gt; entradas
Lo que hay que modificar es lo que está escrito en verde, allí tenes que asignar tu dominio blogspot; y lo que está escrito en rojo, allí tenes la opción de elegir si querés borrar o no el mensaje para que aparezca el número en una frase.
Por ejemplo "Este blog tiene ..... entradas"

viernes, 2 de septiembre de 2011

Etiqueta hr

La etiqueta <hr> se indica cuando se quiere llevar a cabo una línea horizontal para separar un texto con otro. El uso frecuente de esta etiqueta en un solo post o página puede resultar desprolijo e innecesario.

Sintaxis

Para determinar esta línea horizontal vamos a escribir solo una etiqueta: <br/>. ¿Por qué no usamos dos etiquetas, la de incio y la de final? Porque esta etiqueta no encierra un contenido de ninguna manera.
<hr/>
El resultado de esta etiqueta nos da una barra horizontal como esta:

Atributos que más se usan

Atributos
Muestra de sitaxis
style<hr style=""/>
id
<hr id=""/>
class
<hr class=""/>
width
<hr width=""/>
align
<hr align=""/>

domingo, 28 de agosto de 2011

Imagen flotante solo en una entrada particular

Para que se entienda mejor esto, paso a explicar. El "truco" consiste en hacer que una imagen (cualquiera) flote en la parte inferior, es decir, que esta imagen esté siempre presente en la entrada en la que vamos a insertar esta imagen.
Podemos ver el ejemplo en esta entrada en particular, donde la imagen que aparece abajo es sólo por esta entrada. Cuando entremos a otra entrada o página, la imagen desaparecerá.
Una imagen flotante en post1) Vamos a Blogger.
2) Clickeamos en el botón Entrada Nueva Botón Nueva Entrada[Para la anterior interfaz ir a Creación de entradas → Nueva entrada].
3) Vamos a pegar el siguiente código:
<img style="position: fixed; bottom: -1pt; right: 0pt;" src="URL de la imagen" />
En lo escrito en turquesa vamos a cambiar el right por left si queremos que la imagen flote en la izquierda. Esta opción es por supuesto opcional.
En lo escrito en verde, insertaremos la URL de la imagen.

jueves, 18 de agosto de 2011

Propiedad text-shadow

La propiedad text-shadow, permite dar sombra a un determinado texto. Esta sombra se puede modificar en cuanto a posición, nitidez y color. Usar esta etiqueta es muy eficiente estéticamente y además es algo muy moderno.

Sintaxis

En esta propiedad, se pueden poner de 2 a 4 valores: Posición eje X, Posición eje Y, Nitidéz y Color.
Así usamos text-shadow con todos sus valores:
text-shadow: 1px 1px 3px #FF0400;
El primer valor se posiciona de modo horizontal. Y si pones el signo menos (-) la sombra se correrá hacia la izquierda.
El segundo valor hace que la sombra se posicione verticalmente. Si precede un signo menos a este valor, la sombra se irá hacia arriba.
El tercer valor hace que la sombra tenga una especie de "esfumado" o le quita nitidez al aumentar el valor. Este valor es opcional.
El cuarto valor hace que le de color a la sombra. Este valor es opcional.
Así usamos text-shadow en CSS:
<style>
span{
text-shadow:1px 1px 3px #FF0400;
}
</style>
Así usamos text-shadow en HTML:
<span style="text-shadow:1px 1px 3px #FF0400;">

Ejemplos

Ejemplo de texto con sombra nítida
<span style="text-shadow:1px 1px #FF0400;">Ejemplo de texto con sombra nítida</span>
Ejemplo de texto con sombra esfumado menor
<span style="text-shadow:1px 1px 1px #FF0400;">Ejemplo de texto con sombra esfumado menor</span>
Ejemplo de texto con sombra esfumado medio
<span style="text-shadow:1px 1px 3px #FF0400;">Ejemplo de texto con sombra esfumado medio</span>
Ejemplo de texto con sombra esfumado mayor
<span style="text-shadow:1px 1px 6px #FF0400;">Ejemplo de texto con sombra esfumado mayor</span>
Ejemplo de texto con sombra nítida sin color
<span style="text-shadow:1px 1px;">Ejemplo de texto con sombra nítida sin color</span>
Los colores que se ponen al final del valor de la propiedad pueden ser establecidos como Colores Hexagecimal, RGB o con el nombre.
Para tener una lista de colores y saber cómo se usa, haz click aquí.

Menú con cajas de redes sociales para tu blog

Atención! Como bien indica luego, este truco se aplica en un gadget (sidebar)

Como ya dijimos en posts anteriores, las redes sociales ya son una parte inevitable para incorporar a la actualidad a tu blog.
Entonces qué mejor que incorporarlos a tu blog, haciendo así, que los visitantes puedan acceder a ellas mediante un diseño cómodo, elegante y fácil.
Este truco se puede ver claramente a la derecha de Teoría Blogger:
Botonera de enlaces de redes sociales
Enlaces de redes socialesPara esto vamos a instalar el CSS en la plantilla yendo a Blogger.com → Diseño → Edición de HTML → buscamos la etiqueta </head> y arriba de este pegamos las siguientes fórmulas CSS:
<style>
/* LINKS DE REDES SOCIALES */
#seguir-redes-sociales {width:100%;float:right;}
.redsocialmenu {background:transparent;border:1px solid #898989;padding:10px;margin-bottom:10px;}
.redsocialmenu:hover{background:#CCCCCC;border:1px solid #898989;padding:10px;}
.redsocialmenu a {text-decoration:none;font-weight:bold;color:#555555;}
.redsocialmenu a:hover {text-decoration:none;font-weight:bold; color:#4CA5FF;}
.redsocialmenu img{vertical-align:middle;margin-right:5px}
</style>
Modificar el CSS[+]
Si los colores generales de las cajas no te gustan, puedes optar por cambiarlos de la siguiente forma:
En lo que está escrito en verde se puede poner transparent (está predeterminado) o puedes asignarle un código de color o el nombre. Esto sirve para cambiar el color al fondo de las cajas.
En lo que está escrito en rojo pasa lo mismo que en el anterior, pero en este caso se modifica el fondo de las cajas cuando un pasa el cursor por arriba de este.
En lo que está escrito en violeta vamos a poner una vez más el color que querramos para cambiar el color del link en el que vamos a entrar.
En lo que está escrito en amarillo vamos a poner otra vez el código o nombre del color para modificar el color del link al pasar el cursor sobre este.

Ahora vamos a insertar las cajas de los links de las redes sociales en un gadget, entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript → Ahora copiamos el siguiente código HTML:

<div id="seguir-redes-sociales">
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzoSHZOKTR0_rMZAT1os2R-SkRiOgmoglocLTsuUxWiK8zS9HlUs35duOqdrMzOB8V2CL-dHwOmdGybBeTzIWXC0JBFIxmxJyEi_zC5uEAPWprcdGOKdRgqWAQfZCow537gnxVVqgIdQ/s0/social-connect-facebook.png" title="Hazte Fan!" alt="Facebook" /> <a href="URL de página en Facebook">Facebook</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z5Fz__R2oUuyS_dxTPtImz-1H7G1014MZBDMomG7ZKpfNuioEbMCb_beBwkOUBqzWz8XIdFLXGE7sq2ULHxz47aaKMjdf3d6GRm4OdORm7JgTlqhswTWesDjB0Rir4XFJYvvxsEDljs/s0/social-connect-twitter.png" title="Sígueme!" alt="Twitter" /> <a href="URL de Twitter">Twitter</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IHn0uwL1gwzynncLWa3niJjktf3Jpkrd5ZqcPx0G47aBEIfVaQdx_HCMoM0QuOUvFlrB3iuQQNf1EdNlfw8Hzixk7gtH2j3Z8wnv8LeCMHa6KW-bi454h2-qdLzuJP212U2oijsO3aA/s1600/youtube-logo.png" title="Obsérvanos!" alt="Youtube" /> <a href="URL de usuario en Youtube">You Tube</a>
</div>
</div>

Como es posible deducir, en lo que está marcado en distintos colores va la URL de:
  • La página en Facebook
  • Tu usuario en Twitter
  • Y tu canal en Youtube

domingo, 14 de agosto de 2011

Etiqueta strike o s

La etiqueta strike (<strike>) implica simplemente que un texto sea tachado.
Muchas veces esta etiqueta es usada irónicamente para mostrar que uno se ha equivocado con un texto o palabra.

Sintaxis

La etiqueta strike o s (<s>) se usa con un texto de intermediario. Esto significa que supone de dos etiquetas y en el medio se inserta el texto: una que abre la función (<strike>) y otra que la cierra (</strike>).
Ejemplo:
Venus es <strike>un canal</strike> el segundo planeta que gira en torno al Sol
Venus es un canal el segundo planeta que gira en torno al Sol

Etiquetas o propiedades paralelas

Existen otras alternativas para determinar este efecto de la etiqueta strike. En la siguiente tabla mostramos esas alternativas ya sea usando HTML o CSS:
Strike en HTML
<strike></strike>
<s></s>
<del></del>
Strike en CSS
<span class="tachado">Este texto está tachado gracias al CSS →</span> span .tachado {
text-decoration:line-through;
}

Atributos que se tienden a emplear

Lista de todos los atributos que son más factibles para usar en esta etiqueta (hay más atributos para emplear):
Atributo Muestra de sintaxis
title<strike title="">Tachar</strike>
style<strike style="">Tachar</strike>
id <strike id="">Tachar</strike>
class <strike class="">Tachar</strike>

Actualización: 3 de mayo del 2013.

 Ambas etiquetas <s> y <strike> fueron eliminadas en la nueva versión 5 de HTML.

viernes, 12 de agosto de 2011

Colores Hex, RGB y nombre (lista completa)

Muestra
HexRGBNombre

#000000
rgb(0,0,0)black

#FFFFFF
rgb(255,255,255)white

#0000FF
rgb(0,0,255)
blue

#00FF00
rgb(0,255,0)lime

#FFFF00
rgb(255,255,0)yellow

#00FFFF
rgb(0,255,255)aqua - Cyan

#FF0000
rgb(255,0,0)red

#008000
rgb(0,128,0)green

#2E8B57
rgb(46, 139, 87)
seagreen

#00FF7F
rgb(0, 255, 127)
springgreen

#FFD700
rgb(255,215,0)gold

#DAA520
rgb(218, 165, 32)
goldenrod

#DEB887
rgb(222, 184, 135)
burlywood

#F0E68C
rgb(240, 230, 140)
khaki

#F5F5DC
rgb(245, 245, 220)
beige

#808000
rgb(128, 128, 0)
olive

#FF00FF
rgb(255,0,255)magenta - fuchsia

#FF69B4
rgb(255, 105, 180)
hotpink

#DA70D6
rgb(218, 112, 214)
orchid

#FFC0CB
rgb(255, 192, 203)
pink

#FFA500
rgb(255,165,0)orange

#008080
rgb(0, 128, 128)
teal

#40E0D0
rgb(64, 224, 208)
turquoise

#7FFFD4
rgb(127, 255, 212)
aquamarine

#87CEEB
rgb(135, 206, 235)
skyblue

#800000
rgb(128, 0, 0)
maroon

#A52A2A
rgb(165, 42, 42)
brown

#DC143Crgb(220, 20, 60)crimson

#808080
rgb(128, 128, 128)
gray - grey

#708090
rgb(112, 128, 144)
slategrey - slategray

#E6E6FA
rgb(230, 230, 250)
lavender

#C0C0C0
rgb(192, 192, 192)
silver

#EE82EE
rgb(238, 130, 238)
violet

#800080
rgb(128, 0, 128)
purple

#4B0082
rgb(75, 0, 130)
indigo

#FA8072
rgb(250, 128, 114)
salmon

#F5F5F5
rgb(245, 245, 245)
whitesmoke

#F5DEB3
rgb(245, 222, 179)
wheat

#FF6347
rgb(255, 99, 71)
tomato

#D8BFD8
rgb(216, 191, 216)
thistle

#D2B48C
rgb(210, 180, 140)
tan

#4682B4
rgb(70, 130, 180)
steelblue

#FFFAFA
rgb(255, 250, 250)
snow

#6A5ACD
rgb(106, 90, 205)
slateblue

#9ACD32
rgb(154, 205, 50)
yellowgreen

#A0522D
rgb(160, 82, 45)
sienna

#FFF5EE
rgb(255, 245, 238)
seashell

#F4A460
rgb(244, 164, 96)
sandybrown

#8B4513
rgb(139, 69, 19)
saddlebrown

#4169E1
rgb(65, 105, 225)
royalblue

#BC8F8F
rgb(188, 143, 143)
rosybrown

#B0E0E6
rgb(176, 224, 230)
powderblue

#000080
rgb(0, 0, 128)
navy

#191970
rgb(25, 25, 112)
midnightblue

#C71585
rgb(199, 21, 133)
mediumvioletred

#48D1CC
rgb(72, 209, 204)
mediumturquoise

#00FA9A
rgb(0, 250, 154)
mediumspringgreen

#7B68EE
rgb(123, 104, 238)
mediumslateblue

#9370DB
rgb(147, 112, 219)
mediumpurple

#BA55D3
rgb(186, 85, 211)
mediumorchid

#0000CD
rgb(0, 0, 205)
mediumblue

#778899
rgb(119, 136, 153)
lightslategray

#20B2AA
rgb(32, 178, 170)
lightseagreen

#FFA07A
rgb(255, 160, 122)
lightsalmon

#90EE90
rgb(144, 238, 144)
lightgreen

#FAFAD2
rgb(250, 250, 210)
lightgoldenrodyellow

#E0FFFF
rgb(224, 255, 255)
lightcyan

#ADD8E6
rgb(173, 216, 230)
lightblue

#1E90FF
rgb(30, 144, 255)
dodgerblue

#696969
rgb(105, 105, 105)
dimgray

#00BFFF
rgb(0, 191, 255)
deepskyblue

#9400D3
rgb(148, 0, 211)
darkviolet

#00CED1
rgb(0, 206, 209)
darkturquoise

#2F4F4F
rgb(47, 79, 79)
darkslategray

#483D8B
rgb(72, 61, 139)
darkslateblue

#E9967A
rgb(233, 150, 122)
darksalmon

#8B0000
rgb(139, 0, 0)
darkred

#9932CC
rgb(153, 50, 204)
darkorchid

#FF8C00
rgb(255, 140, 0)
darkorange

#556B2F
rgb(85, 107, 47)
darkolivegreen

#8B008B
rgb(139, 0, 139)
darkmagenta

#BDB76B
rgb(189, 183, 107)
darkkhaki

#006400
rgb(0, 100, 0)
darkgreen

#A9A9A9
rgb(169, 169, 169)
darkgray

#B8860B
rgb(184, 134, 11)
darkgoldenrod

#008B8B
rgb(0, 139, 139)
darkcyan

#00008B
rgb(0, 0, 139)
darkblue

#8FBC8F
rgb(143, 188, 143)
darkseagreen

#FFF8DC
rgb(255, 248, 220)
cornsilk

#6495ED
rgb(100, 149, 237)
cornflowerblue

#FF7F50
rgb(255, 127, 80)
coral

#D2691E
rgb(210, 105, 30)
chocolate

#7FFF00
rgb(127, 255, 0)
chartreuse

#5F9EA0
rgb(95, 158, 160)
cadetblue

#8A2BE2
rgb(138, 43, 226)
blueviolet

#F0FFFF
rgb(240, 255, 255)
azure

#FAEBD7
rgb(250, 235, 215)
antiquewhite

#F0F8FF
rgb(240, 248, 255)
aliceblue

Cómo aplicarlos en los códigosPara empezar, estos colores se usan sólo en propiedades en el que se necesitan colores.
Tales como:
En cualquiera de los casos, debemos copiar el cógido Hex, rgb o el nombre del color como el valor de la propiedad:
<style>
h1
{
color:#0000FF;
}
h1 {
background:rgb(0,0,255);
}
h1 {
border-color:blue;
}
</style>
Todo lo escrito en azul es el valor de la propiedad.
Ahora mostraré los mismos ejemplos que los anteriores, pero aplicado a HTML:
<h1 style="color:#0000FF;">Ejemplo</h1>
<h1 style="background:rgb(0,0,255);">Ejemplo</h1>
<h1 style="border-color:blue;">Ejemplo</h1>

Mejorar blog, según la revista USERS

La revista Users es una revista que personalmete compro mensualmente, para enterarme de la última tecnología, aprender sobre computación, internet, etc.
En cada edición de la revista, siempre hay un tema principal. Un tema en el cual le dedican varias páginas en el medio.
En la edición nº 241, aparece como tema principal y a aprender, sobre cómo mejorar nuestros blogs, con el título de "Blogs Super Poderosos".
Escaneé las 11 páginas que le dieron lugar en esta prestigiosa revista.
Blogs Super Poderosos por User










Descargar todas las imágenes juntas