Crear un enlace spoiler en blog

Enlace spoiler en tu blog

El enlace es una puerta a otra página. Pero el enlace spoiler es uno especial: permite mostrar un contenido presionando en ese enlace o botón, pero sin salir de la página donde estamos. Y podemos también ocultar dicho contenido.

Logra que tus lectores anónimos tambiñen puedan comentar

Lograr que comente cualquiera en tu blog

¡Los lectores anónimos también opinan! entra a este post para aprender cómo hacer para que en tu blog escriban los usuarios anónimos, cambiando una configuración que te ofrece Blogger.

Hacer que tu blog aparezca en los buscadores

Incluir tu blog a Google y Yahoo

Entra a este post para añadir la url de tu blog en los buscadores de Google y Yahoo, los dos buscadores que predominan las páginas principales de la mayoría de los usuarios en el mundo de la red.

Atributo alt en imágenes para aparecer en buscadores

Atributo alt

El atributo alt es un atributo que consiste en rellenar su contenido con una pequeña descripción sobre la imagen. Al hacer esto, estamos haciendo que esa imagen aparezca en Google imagenes.

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