TweetBoard te permite mostrar todos tus tweets ordenados por fecha, por actividad y como si fuera poco viene consigo el formulario de updates para los visitantes que quieran entablar una conversación desde tu sitio.
El diseño es bastante llamativo y se esconde bajo un simple boton siempre presente al lado izquierdo del blog...puedes ver una vista previa en este blog.
Para añadir este bloque de tweets al blog debes crear una cuenta en esta pagina (no mas de 40 segundos) y debes activarla siguiendo el enlace que te llega al correo.
Seguido vamos a Edicion > elementos de pagina > añadir nuevo elemento (HTML/Javascript) y dentro de el pegamos lo siguiente:
guardamos los cambios y al visitar el blog veremos el botón, que se pone de color rojo cuando hay un nuevo update y verde cuando los hemos leido todos.
Cuando añadimos un nuevo update desde, esta herramienta, aparece una dirección si la visualizamos desde twitter, cuando visitemos ese enlace nos va a llevar al index (pagina principal) del blog y se abrirá automaticamente, en el panel, la actualización determinada.
El 23 de julio se cumplieron dos años desde la creación de agunata.com (originalmente blogger) y para celebrar el aniversario su autor ha decidido regalar un dominio.com gratis por un año. El blog (blogger o wordpress) ganador será elegido mediante Ramdom.org - Puedes ver los requisitos minimos en la entrada original.
No siempre se trata de estudiar o de aprender, aveces hay que sacarle esa chispa a la vida y porque no hacerlo de disparates ajenos. Hace poco visitaba el blog de atajar y me he reido mucho al ver algunas alocadas frases, hasta de shakira!!! (mi compatriota!!!)...
Matthew McConaughey Un hombre debe oler a hombre. Hace 20 años que no uso desodorante
Jessica Simpson 23 años es viejo, es casi tener 25, que es como estar entre 20 y 30
Shakira Voy a viajar a Roma, porque es la tierra donde nació nuestro Señor Jesucristo
Brooke Shields El fumar mata y si te mueres has perdido una parte muy importante de tu vida
Mariah Carey Siempre que veo la televisión y veo a esos pobres niños hambrientos en todo el mundo, no puedo evitar llorar. Quiero decir, me encantaría ser así de flaquita, pero no con todas esas moscas, y muerte, y esas cosas
George Bush La mayoría de nuestras importaciones vienen de fuera del país
Britney Spears Las películas de hoy en día son muy raras, te hacen pensar
Pamela Anderson No es la contaminación la que esta dañando el ambiente. Son las impurezas que hay en nuestro aire y en nuestra agua las que lo están haciendo
Ronaldo Perdimos porque no ganamos
Cristina Aguilera ¿Alguien sabe en donde se hará el festival de Cannes de este año?
Jennifer Lopez No he cometido ningún delito, lo que hice fue no cumplir la ley
Hoy he querido compartir mi segunda plantilla para blogger, despues de Green Place he aprendido un poco mas y creo que se ve reflejado en esta plantilla (me refiero al css). Tomé consideraciones para diferentes resoluciones de pantalla, aunque el color no cambio dado que aproveché para mostrar los resultados del tutorial para photoshop "creando un atractivo header".
Podria hablarles de las dos columnas, de los marcadores, etc...pero visualiza el demo y si tienes alguna pregunta u opinion solo dejame un comentario.
Lo prometido es deuda...hace unas semanas le habia dicho a Graciela que trataría de dibujar algunos iconos de twitter como porrista y aqui estan. No son muchos ni tampoco los mejores pero espero que les gusten :)
Este bonito efecto me lo he encontrado en Theme Forest, y sirve para obtener una vista previa de imagenes cuando pasamos el cursor del mouse sobre una imagen. Mira estos ejemplos:
Si quieres agregar este efecto en tu blog solo sigue los siguientes pasos:
Ve a edición de HTML, busca </head> y justo antes pega el siguiente codigo:
y eso es todo, el efecto ha sido agregado a tu plantilla. Al momento de poner una imagen con vista previa solo debes pegar las imagenes dentro de una capa con el id(nombre unico) "doc_body" con la siguiente estructura:
<div id="doc_body"> <img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" /> </div>
Y si quieres añadir un enlace seria:
<div id="doc_body"> <a href="url-de-destino"> <img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" /> </a> </div>
Como podrás darte cuenta en estos dias he empezado a probar algunas utilidades nuevas en blog, en este caso trataré de explicar como crear, personalizar y publicar un motor de busqueda google en función de nuestro blog o pagina web (puedes probar mi sección de busqueda y observar los resultados).
Lo primero será acceder a nuestra cuenta google e ir a la sección de motores de busqueda, ambas cosas puedes hacerlas desde aqui. Luego presionamos clcik sobre el botón crear de busqueda personalizado (Crear motor búsq. person.) y llenamos los siguientes datos:
Nombre del motor de búsqueda: en este campo de texto vamos a poner el nombre que aparecera en la parte de arriba cuando se realice una busqueda. Por ejemplo Busqueda Z-Graphics.
Descripción del motor de búsqueda: aqui debemos poner una frase que describa con que está relacionada la busqueda. Por ejemplo Ciencia climática de científicos climáticos.
Idioma del motor de búsqueda: Idioma en el que aparecen los resultados.
En la siguiente sección del asistente "¿Qué quiere buscar?" tenemos tres opciones:
1- Sólo los sitios que seleccione: si selecciona esta opción la busqueda arrojará datos obtenidos en sitios que usted especifcique (en el area de texto siguiente:"Seleccione algunos sitios"). 2- En toda la web, pero enfatizar los sitios que selecciono: si se escoge esta opción la busqueda arrojara datos obtenidos de toda la red (paginas inscritas a google) pero hará enfacis en las paginas web que usted elija. 3- Toda la web: Los datos arrojados son obtenidos de toda la red.
En la siguiente parte "Seleccione una edición" marcamos la casilla Edición estándar (si es para uso personal).
Por ultimo aceptamos haber leido las Condiciones del servicio y presionamos click en el botón siguiente. En la segunda parte del asistente presionamos el botón Finalizar y en pocos segundos estaremos en la pagina principal de "mis motores de busqueda", ahi encontraremos los motores creados y las opciones para personalizarlos, configurarlos y añadir a la pagina web o blog (para realizar cualquiera de estas opciones debes presionar click sobre el panel de control que pertenece a tu motor de busqueda).
Accedemos al panel de control y tenemos las siguientes opciones (son muchas mas pero el objetivo de hoy es explicar estas) :
Para modificcar los datos simplemente se siguen los pasos anteriores y se guardan los cambios asi que continuemos con el diseño de la pagina de resultados:
En esta seccion se puede personalizar el cuadro de búsqueda y escoger un modelo de 7 opciones:
Personalizar los colores en los resultados de busqueda, puedes usar este selector de color.
Personalizar los resultados de búsqueda alojados por Google
Para agregar el motor de busqueda hay 3 opciones:
1-: quiere decir que aunque la 'cajita' de busqueda esté en nuestra pagina, los resultados se van a mostrar en una ventana aparte (una oagina almacenada por google). 2- : esta opcion (es la que estoy usando en este blog) permite que la pagina de resultados aparezca en un iframe, es decir que se creará una capa mostrando los resultados de la busqueda. Si escoges esta opcion debes señalar o especificar una pagina web en la que se mostraran los resultados...me explico, cuando realices una busqueda la ventana donde estas te va a redireccionar a esa dirección y va a mostrar los resultados en el lugar donde pegues el codigo de la caja "Código de los resultados de búsqueda". En mi caso esa direccion es la pagina principal del blog. 3- Resultados de host en mi sitio web que utilizan un elemento de búsqueda personalizado: El resultado de esta elecion seria algo muy parecido al buscador ajax de blogger, solo que los datos que arrojará la búsqueda estarán basados en la información que dimos al crear el motor de búsqueda.
Si has elegido la segunda opción puedes:
Añadir los resultados de busqueda a la plantilla: el ancho de la capa que contiene los resultados de busqueda no es menor a 790px por lo que te recomiendo pornerlo en una parte donde disponga de ese espacio para que no afecte la estetica del blog. En mi caso lo he añadido en el top de la pagina (despues de <div id='wrapper'>) pero tambien puedes hacerlo en la parte inferior.
Cerrar la capa que contiene los resultados: La primer vez que probé este motor de busqueda en el blog me di cuenta de lo practico que seria agregar algun metodo para cerrar esa capa y que el visitante siguiera navegando; Probé con este sencillo metodo pero los resultados no fueron tan satisfactorios dado que la capa desaparecia pero el espacio no. Despues de algunos minutos encontré el efecto BlindUp de scriptaculous que me permite cerrar la capa con un efecto de slide hacia arriba. Si usas scriptaculous en tu plantilla lo unico que debes hacer es:
1- en el codigo que nos da google(el de el iframe con los resultados) encontraremos la capa que contiene ese iframe:
<div id="cse-search-results"></div>
Dentro de ella vamos a poner el siguiente link para cerrarla:
Eso es todo, tal vez te preguntes porque optar por un motor de búsqueda como este y no el comodo buscador ajax de blogger...yo lo hice por la eficacia en la busqueda, porque me permite agregar anuncios por medio de adsense en su nuevo sistema de Adsense para busqueda.
Hace poco visité un blog llamado Poca Tinta y me llamó la atención su novedoso reproductor de mp3. Indagando un poco llegué a esta pagina donde Yahoo! explica en tan solo tres pasos como añadir el reproductor y las canciones mp3, y como está en ingles tratare de explicarlo bien:
1- Lo primero será buscar (Ctrl+F) </body> y justo antes añadir el script que nos proporcionan:
Algo que no vi en la pagina de Yahoo!, pero si en Poca tinta, fue como crear una lista de reproducción por medio de un arcchivo xml:
Vamos al block de notas y pegamos el siguienmte codigo:
<?xml version="1.0" encoding="UTF-8" ?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Nombre de Lista</title> <trackList> <track> <location>URL_archivo.mp3</location> <creator>Artista</creator> <title>Titulo</title> <image>Url_Imagen</image> </track> <track>Para poner mas canciones pegamos aqui el texto en azul</track> </trackList> </playlist>
Al momento de guardarlo nos aseguramos de ponerle la extención xml, es decir quedaria algo como nombre.xml y lo subimos al srvidor(por ejemplo FileDen). Luego de tener la url del archivo xml lo incluimos en el blog de la siguiente forma:
Este es el segundo video de photoshop para principiantes, en el explico los diferentes estilos que podemos añadir a las capas(muy utiles para botones y formas utilizadas en paginas web). Si te gusta deja un comentario, de igual forma si quieres ver un tutorial en especial hazmelo saber.
