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.
Concurrimos, una vez más, a Btemplates para buscar las mejores plantillas para blogs que se traten de juegos.
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.
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") 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
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
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.
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).
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:
Si por alguna razón no querés que tus lectores puedan copiar un texto o una imagen de tu blog, mirá este post porque es justo lo que estás necesitando y es un truco que podría ser uno de los más buscados.
En este post te vamos a mostrar 3 formas diferentes para proteger los contenidos de tu blog: Una forma es usando atributos HTML y las otras dos formas son códigos Javascript. Usa la que te parezca más eficiente.
Antes de ver este post te recomiendo ver este que se relaciona: Atributo title
Con este truco te vamos a enseñar a crear un tooltip con códigos jquery y al pasar por un enlace o texto, el tooltip se mostrará con un efecto y persiguiendo al cursor, como podemos ver en el laboratorio de T.B..
Hace unos días publiqué un post dedicado sólo a la explicación de qué es, para qué sirve la propiedad color. Para hacer un resúmen, explicamos que servía para imponer color a las letras de un elemento. También explicamos cómo obtener un color e indicamos los nombres de los colores y sus respectivos códigos. Pero no mostramos la forma de cómo obtener un determinado color, un color preciso, el uno quiere. En este post mencionamos las formas de obtener los colores que vos querés, por medio de un complemento de Mozilla Firefox (navegador que recomendamos para los blogueros).
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!
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).
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:
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
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):
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"
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.
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.
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".
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:
En esta ocasión les enseñaremos cómo crear una presentación de diapositivas para mostrar el contenido del blog a sus lectores. Esta presentación de diapositivas es muy fácil de añadir y modificar. El truco consiste en un gadget en el que van pasando imágenes que contiene el blog y a medida que van pasando las imágenes debajo de cada una, tiene una descripción. Además funciona como enlace ya que al hacer click en una imagen, esta te destina a una página. Para ver el demo de este gadget, haz click aquí: LabTB
Este truco jquery, consiste en que al pasar el mouse por encima de una imagen, la misma se pondrá en un estado de semi transparencia.
Pero como el script de tipo jquery siempre nos sorprende, este efecto lo hace como si tuviera una "transición".
Para ver cómo quedan los efectos para las imágenes, Haz click aquí.
Este elemento (no muy sabido por los bloggers) consiste en un gadget que tiene una lista de enlaces y debajo de esta, hay un campo de texto y debajo de este, otro más grande. El primer campo de texto es para el título de los enlaces y el más grande es la descripción del enlace.
El enlace Spoiler, es un enlace que al hacer click en él, sobresale un texto o lo que sea por debajo y al hacer click en el mismo enlace luego, cierra todo el contenido.
