Ayuda Para Blogger

noreply@blogger.com (Anthony Medina) — Sun, 22 Aug 2010 04:24:00 +0000

Lobster

Cantarell

Cardo

Crimson Text

Droid Sans

Droid Sans Mono

Droid Serif

IM Fell DW Pica

Inconsolata

Josefin

Molengo

Neuton

Nobile

OFL Sorts Mills Goudy TT

Old Standard TT

Reenie Beanie

Tangerine

Vollkorn

Yanone Kaffeesatz

Findicons: Una búsqueda de iconos mas precisa

noreply@blogger.com (Anthony Medina) — Sat, 14 Aug 2010 22:22:00 +0000

Findicons es un buscador de iconos en la web, tal y como también lo es Iconfinder. No hace mucho me llego un correo electrónico de alguien que aun no se si es el verdadero administrador de la pagina pero que realmente vale la pena haberme enviado ese mensaje.

Finidcons nos ofrece mas de 250.000 ejemplares gratuitos en su base de datos, lo maravilloso de este es que a diferencia de iconfinder, este nos ofrece un filtro un poco mas facil para una busqueda mas precisa, en cuanto a tamaño, color, transparencia, la verdad es que a mi personalmente a mi me parece una pagina web muy positiva, de manera que gracias a su filtro muy avanzado nos permite encontrar lo que realmente queremos, Iconfinder para mi tambien es muy bueno, pero lo malo de este, es que luego de un tiempo de usarlos con la URL propia con la que Iconfinder subio el icono desde su base de datos, luego coloca una publicidad hacia su pagina, asi que tendriamos que descargarlos y subirlos a nuestro propio servidor.

La verdad, es que he visto Findicons, pero no lo he usado aun, no sabría decirles si presentra el mismo caso, y me ha gustado mucho, pues la verdad es casi un sitio espejo de Iconfinder pero con el maravilloso filtro que de verdad se los recomiendo.

Siempre he buscado mis iconos en Iconfinder, y la verdad es que no me quejo por que es una pagina maravillosa, pero Findicons al parecer, tiene mejor servicio.

Si deseas saber mas de Iconfinder, pues clikea aqui, mientras te dejo una muestras de busqueda de findicons...

Cambiar el formulario de comentarios de Blogger

noreply@blogger.com (Anthony Medina) — Sat, 14 Aug 2010 22:22:00 +0000

La verdad es que Blogger tiene muchos aspectos positivos y gracias a el es que puedes leer en estos momentos esta entrada, pero a mi parecer, Blogger podría mejorar el aspecto del formulario de comentarios. Hay algunos trucos para mejorarlo solo con HTML pero la verdad es que no cambia mucho, en mi opinión, seria mejor poder comentar con un formulario del tipo de Wordpress, es decir,nombre / Email - URL / tu mensaje, que solo comentar con un simple perfil, no digo que en Blogger no se pueda comentar así, pero la forma de comentar con perfil es la que viene predeterminada, y eso hace que muchos elijan esta opción que igual no tiene nada de malo, pero tan solo por elegancia y hacer mostrar un formulario de comentarios mas atractivo para tu blog es que te traigo las siguientes herramientas.

Ante que todo, te voy a mostrar como es el formulario de Blogger.

¿Que ofrece? El formulario de comentarios de Blogger nos ofrece poder escribir nuestro mensaje comentando como usuario de Blogger o de Google si en tal caso no posees blog, con nuestra cuentas de otras plataformas, con nuestra pagina web y como anónimo, obtener una vista previa de nuestro mensaje, y suscribirnos a nuevos comentarios por medio de nuestro correo electrónico.

Otras opciones son:

[1] Disqus Comments

¿Que ofrece? Disqus es una herramienta de comentarios que remplaza el formulario de Blogger.

Lo que puede ofrecer es la oportunidad de escribir tu mensaje comentando con tu perfil de Facebook, Twitter, Yahoo!, tu cuenta en Disqus, como anónimo con Nombre/correo/URL al mejor estilo de Wordpress, suscribirte a los nuevos comentarios por E-mail, puntuar comentarios, ordenar según su antigüedad o su popularidad y también, una URL directa de la conversación ya que es como estilo de un Foro, puedes responder mensajes y colocar Enlaces. Ademas, una gama de widgets para tu blog como comentarios recientes, entradas populares, top comentaristas, entre otros. Este es el que yo uso y es que el de verdad te recomiendo. Puedes ver una prueba mirando debajo de este post, de verdad te gustara mucho.

[2] IntenseDebate

La verdad es que no hay mucha diferencia entre Disqus e IntenseDebate, pero las son distintas las formas en la que puedes comentar, el caso de IntenseDebate puedes comentar con tu cuenta de esta misma, tu cuenta Wordpress u OpenID, puedes comentar como anonimo y usando tu Nombre/URL/Correo, puedes suscribirte a nuevos comentarios por E-mail, responder mensaje tal cual un foro, ves que no hay mucha diferencia.

Espero te guste este también.

[3] JS-Kit

¿Que ofrece? Este quizas es el mas sencillo, pero te aseguro que es el mas servicial e interactivo. Ofrece poder comentar logeandote a travez de tu cuenta en Facebook, Google, twitter, Yahoo!, Blogger, JS-kit, OpenID, entre otras. El usa es estilo de un servicio de correo electronico, permitiendonos introducir palabras en negrita, Cursiva, Subrayadas, insertar videos de Youtube, emoticones, subir imagenes y seguir los nuevos comentarios mediante tu direccion de correo electronico. Puedes responder mensaje como los dos anteriores.

Algunos datos que debes conocer es que Disqus e IntenseDebate se ajustan a estilo de fuente y colores de tu blog automaticamente, los tres vienen en idioma español, aunque con algunas excepciones en algunas palabras, los cuales puedes configurarlo en la pagian oficial de cada uno, y un dato que no te gustara tanto es que JS-kit es pago, pero vale la pena.

Entonces pues, tu que dices, ¿El de Blogger, Disqus, IntenseDebate o JS-Kit?

6 maneras de aumentar el trafico del blog en menos de una semana

noreply@blogger.com (Anthony Medina) — Sat, 14 Aug 2010 22:21:00 +0000

Todos los Bloggers queremos aumentar el trafico de nuestro blog, y es todos queremos lo mismo, tener mayor numero de visitantes en la pagina, pero si eres nuevo Blogger no te desesperes, cuando somos novatos, por lo general, queremos que todo nos llegue rápido, y si no lo logramos, somos capaces de decepcionarnos y abandonar el blog, lo digo por que hasta a mi me ha pasado, y no es así. Para que un blog sea muy visitado, se debe tener mucha dedicación, paciencia y tiempo, lo demás llegara solo, esta garantizado.

Para aumentar el trafico al doble de lo que tenias en menos de una semana, por favor, sigue los próximos pasos:

[1] Registrar tu URL en los motores de búsqueda:

Millones de personas, siempre han recurrido a los motores de búsqueda para encontrar lo que buscan, y es algo obvio, por que para hallar una dirección web, al menos que se haya visto en cualquier otro lugar, el usuario no coloca la dirección directamente en la barra de direcciones, por que seria adivinar una pagina para encontrar lo que busca, tiene mucha mas facilidad al usar estos servicios, algunos de los motores de búsqueda mas importante son Google, Yahoo!, MSN, altavista, etc. Principalmente en Google debes registrarlo, ya que es el mas usado por todos. Solo debes agregar tu URL a google y esperar aparecer en el Indice, también, es importante enviar sitemaps a estos servicio para un mejor indexamiento.

[2] Subir tus blogs a directorios:

Una de las mas grandes cosas que puede existir para los Bloggers son los directorios, ya que es una buena forma de dar a conocer nuestra pagina, y generan muy buen trafico a tu blog. Unos de los mas importantes directorios es el DMOZ, es muy importante estar registrado allí, ya que google toma en cuenta mucho mas las webs registradas allí, por ser consideradas de calidad y paginas serias, así que si logras ser aceptado allí, muy bien por ti, google te amara.

[3] Participar en Foros o grupos:

Busca foros o grupos que posean alguna relación con el contenido de tu blog, registrare, deja mensajes, enlaces hacia tu pagina, o algunos enlaces hacia entradas de forma de que algún usuario se interese por tu pagina, es una muy buena forma de ganar trafico.

[4] Añade marcadores sociales a tu blog:

Ya he publicado aquí varias entradas sobre esto, se trata de añadir enlaces en tu blog hacia redes sociales que te permitirán compartir el contenido de tu blog en paginas como Facebook, Tecnhorati, Yahoo!, entre otras. Entre las entradas que puedes ver aquí sobre esto puedo ofrecerte Redes Sociales (Social Bookmarking) para tu blog, Set de iconos sociales con animación en la esquina, y marcadores sociales con efecto onMouseOver, entre las paginas que ofrecen este servicio, podrías usar el addthis.

[5] Subir tus entradas a directorios de articulos:

Esto se trata de ir subiendo las actualizaciones de tu blog en los directorios que publican enlaces hacia artículos de blogs, esto se le conoce como Pings, entre las paginas que te permiten enviar pings están Mi arroba, Feedburner, tus noticias de actualidad, entre otros.

[6] Dejar comentarios en otros blogs:

Dejar comentarios con enlaces útiles en blogs de contenido relacionados, siempre comentarios buenos, no spam, cuando me refiero a spam, hablo de escribir frases incitantes como clic aquí, o algo similar. Solo anuncia tu blog, y hazlo dar a conocer, esto también aumentara tu pagerank.

Entradas Recientes con Imagen miniatura

noreply@blogger.com (Anthony Medina) — Sun, 28 Mar 2010 17:49:00 +0000

Como se que quedaron complacidos con el Gadget de Posts recientes con imagen, hoy traigo uno diferente pero muy parecido. En esta entrada, explicare como agregar un widget de posts recientes con imágenes miniaturas.

Estos gadgets son uno de los que mas los bloggeros buscamos e utilizamos, junto con el gadget de comentarios recientes y las entradas populares, son aquellos que nunca pueden faltar en el blog de alguno, ya que son de vital importancia para ganar mas visitas a las paginas directamente que blogger ofrece a cada post que publicas, y ademas, incitar a los lectores a que comenten en cada entrada.

Las características de este gadget son:

♦ Imagen miniatura de la entrada

♦ Titulo de la entrada con el enlace

♦ Numero de comentarios

Asi que, vamos a explicarte como hacer para instalarlo.

[1] Entra al panel de Blogger

[2] Ve a Diseño > Añadir un gadget > HTML/Javascript

[3] Copia y pega el siguiente código

[4] Explicacion:

boxwidth: Ancho del cuadro

cellspacing: Espacio entre las entradas

borderColor: Color del borde (añadir color de fondo de la plantilla)

thumbwidth &

thumbheight: Ancho y alto de las imágenes miniaturas

fntsize: Tamaño de la letra

acolor: Color del titulo

aBold: Titulos en negrita (True para Si, false para no)

numposts: Numero de entradas para mostrar

http://www.frikibloggeo.com.ar/: Sustitúyela por la URL de tu pagina.

[5] Por ultimo pero no menos importante, guarda los cambios.

Eso es todo! Disfruta tu gadget...

Facebook para Desarrolladores: Herramientas para tu blog

noreply@blogger.com (Anthony Medina) — Sat, 27 Mar 2010 12:44:00 +0000

Facebook es la mas grande red social en el mundo, con mas de 400 millones de usuarios activos y crece cada día mas. Por eso, asegúrate de usar estos widget de Facebook para que la gente interactue entre tu pagina y la red social. No hace mucho publique como aumentar el trafico a tu blog desde Facebook, que de algun modo podria tener relacion con esta entrada, quizas tambien te interese.

Puedes utilizar estas herramientas para compartir fácilmente información de perfil de ciertos sitios web, blogs y negocios con la comunidad de Facebook.

Widget Personales

Widget de Perfil

Crear una insignia de perfil de Facebook para compartir información sobre ti en tu blog, así los usuarios de tu sitio te conocerán un poco mas, y les permitirá tener mas conexión con el webmaster del sitio el cual están visitando.

Widget de Fotos

Este widget permite crear una insignia de fotos para compartirlas en tu sitio web o blog. Debes elegir entre vertical, horizontal, o diseño de dos columnas, así como elegir el numero de fotografías que deseas mostrar.

Widget de Fan Page

Muestra las actividades en tu blog de las paginas en la cual tu eres fan o miembro.

Widget para Compartir tu blog

Botón de compartir en Facebook

Este es un widget ofrecido por Facebook que les permitirá a tus lectores compartir el contenido de tu blog en la red social. No hace mucho publique un post sobre esto, pero no ofrecido por Facebook, si no por FBshare, un widget para compartir contenido en Facebook

Cuadro de Fans

Permite ver a los usuario las personas que son fans de tus paginas en Facebook, así como también, mostrar la opción de hacerse fan para nuevos usuarios interesados.

Insignia de Paginas

Te permitirá crear una insignia de tu pagina en Facebook, para anunciar a tus lectores que ya pueden hacerse fan cuando quieras, este es el objetivo del widget.

Enlace a Twitter

Conecta tus paginas de Facebook con la de Twitter, cada vez que se actualice su pagina de Facebook, también lo hará tu pagina de Twitter, así no tendrás que estar actualizando las dos simultáneamente.

Widget de uso personal para el usuario

Publicar en Facebook

Esto permite a los usuarios publicar tus contenidos y actividades en Facebook

Cuadro de comentarios

Permite a los usuarios dejar un comentario en tu blog sobre cualquier articulo, con la sesión de Facebook iniciada, mucho mas rápido y vistoso, conecta tu pagina con la red social.

Espacio para comentarios directos

Permite a los usuarios de Facebook publicar contenido en tiempo real desde tu blog.

Eso es todo. Espero te haya gustado.

La hora del Planeta: Colabora

noreply@blogger.com (Anthony Medina) — Fri, 26 Mar 2010 17:28:00 +0000

Muy importante:
La Hora del Planeta, evento mundial de conciencia ecológica, es una iniciativa del Fondo Mundial para la Naturaleza (WWF), y tiene por fin tanto el ahorro energético como la reducción de las emisiones de carbono y de la contaminación lumínica.

La convocatoria consiste en apagar todas las luces durante una hora, y la cita es el sábado 27 de marzo de 20:30 a 21: 30. Con esta medida, se pretende despertar el compromiso que cada uno de nosotros debe tener con el planeta, haciendo lo que esté a nuestro alcance para evitar el agravamiento de los problemas ecologicos de la Tierra.

Se espera la adhesión de más de un billón de personas durante la Hora del Planeta, a lo largo y ancho del globo. Todos debemos participar: individuos, empresas, comunidades y gobiernos, porque sólo mediante una acción conjunta nuestra exigencia podrá tener una respuesta satisfactoria de los dirigentes de todo el mundo.

Para que tengas una idea, durante el tiempo que duró una edición anterior del evento hubo una reducción de 10,2% de gasto energético. Si este mismo ahorro se repitiera todos los días, al finalizar el año la disminución del calentamiento global sería la misma que si dejaran de transitar 48.616 coches, durante el mismo período.

Bajo el slogan “Apaga la luz, enciende el planeta”, esta iniciativa de WWF va mucho más allá del mensaje simbólico: es una acción colectiva que nos convierte en responsables por nuestro futuro. Todo juntos contra el cambio climatico. UNETE!!

Creditos: Cocina Solares

Set de iconos marcadores sociales con animación en el esquinal

noreply@blogger.com (Anthony Medina) — Thu, 25 Mar 2010 11:57:00 +0000

Para seguir con la onda de los marcadores sociales, los cuales son muy importantes, y creo que ya lo he dicho en post como la de Marcadores sociales para Blogger con efecto onMouseOver y la de Social Bookmarking (Marcadores Sociales) para blogger con efecto opacidad, y hoy, quiero reiterarlo aquí, mientras mas enlaces a estas redes tengas, sera mucho mejor, colocar imágenes con efectos atractivos que llamen la atención. Para ver una demostración del maravilloso efecto de estos botones, solo pasa el puntero del ratón por encima de las siguientes imágenes a continuación:

El archivo de descargar contiene un conjunto de iconos. Todos ellos disponibles en formato PNG y en tamaños de 32px, 48px, 64px y 128px.

Para agregar estos iconos en tu web, blog, foros, etc. Es necesario usar los siguientes códigos:

<!-- DELICIOUS CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGDqvOi6_I/AAAAAAAABwU/V1wp5He0Va8/s400/DELICIOUS1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png'"/> <!-- DELICIOUS CODE ENDS --> <!-- RSS CODE STARTS --> <img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGvLkLbZI/AAAAAAAAByU/UAY0e3H8skU/s400/RSS1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png'"/> <!-- RSS CODE ENDS --> <!-- YOUTUBE CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGuULHk1I/AAAAAAAAByE/FbPpFQBC6nA/s400/YOUTUBE1.png'" src="http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png" onmouseout="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png'"/> <!-- YOUTUBE CODE ENDS --> <!-- YAHOO CODE STARTS --> <img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGttGnNZI/AAAAAAAABx0/q5eZRUfgfNc/s400/YAHOO1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png'"/> <!-- YAHOO CODE ENDS --> <!-- TWITTER CODE STARTS --> <img width="" height="" onmouseover="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png'"/> <!-- TWITTER CODE ENDS --> <!-- TECHNORATI CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png'"/> <!-- TECHNORATI CODE ENDS --> <!-- REDDIT CODE STARTS --> <img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png'"/> <!-- REDDIT CODE ENDS --> <!-- FACEBOOK CODE STARTS --> <img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png'"/> <!-- FACEBOOK CODE ENDS --> <!-- DIGG CODE STARTS --> <img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png'"/> <!-- DIGG CODE ENDS -->

Puedes colocar estos iconos en donde quieras que aparezca en tu blog un enlace a la red social que quieras, es decir, estos no son para ponerlos especialmente debajo de cada entrada, ya que como habras notado son demasiado grandes, aunque no se quita la oportunidad de hacerlo alterando el tamaño de la imagen con el width y el height de esta forma, width='64px' height='64px', puedes editar lo que esta en rojo y colocale el numero que desees.

Como ya te dije, estos iconos vienen en distintos tamaños, te sugiero descargues el archivo y subas todos los iconos de 16px a tu propio servidor. Me parece que se te hara un poco dificil, ya que tendras que subir dos imagenes por cada icono, para realizar el efecto, pero com un poco de empeño lo lograras. Luego de eso, coloca la url en el siguiente codigo para realizar la animación.

<img width="" height="" onmouseover="this.src='URL DEL LA IMEGEN1.png'" src="URL DE LA IMAGEN2.png" onmouseout="this.src='URL DE LA IMAGEN2.png'"/>

Asi haras con todos, hasta llegar al ultimo, ahora para agregarlo a tu plantilla debajo de cada post, sigue estos pasos:

♦ Entra en Blogger > Diseño > Edicion HTML

♦ Marca la casilla expandir plantillas de artilugios

♦ Busca el siguiente código:

<div class='post-footer-line post-footer-line-3'>

♦ Ahora, justo debajo de ese código que acabas de buscar, pega los códigos que creaste con la imagen, si no, también, como te dije, puedes cambiarle el tamaño a el código anterior, solo deberás colocar un tamaño de 16px por 16px, el width y el height ya lo tiene incorporado el código, solo queda que tu lo edites, la única desventaja de esto, es que mientras mas pequeñas las hagas, la imagen ira perdiendo resolución, por eso es importante que subas tus propias imágenes, luego solo queda guardar los cambios y ver como quedo.

Eso es todo...

Agrega tu Blog a la Faviconera

noreply@blogger.com (Anthony Medina) — Wed, 24 Mar 2010 20:06:00 +0000

Como no podia quedarme atras, hoy te traigo una muy buena noticia, al menos para mi lo es, espero que para ti tambien, creé una nueva seccion en mi sidebar para que agregues tu favicon a la faviconera de Friki Bloggeo.

¿Como me agrego?

Aqui, debajo dejame un comentario con los siguientes datos.

Nombre de tu blog

URL de tu blog

URL del Favicon .PNG o .ICO

Por tu parte, agradecemos que agregues un enlace en tu blog hacia este blog, ya sea a travez de un enlace de texto, o en la faviconera de tu blog, con los datos que a continuación te mostrare.

Si no posees aun faviconera puedes ver las formas de enlazarme haciendo clic aqui

Mis datos para la faviconera

Titulo: Friki Bloggeo

URL : www.frikibloggeo.com.ar

Favicon : -

♦ Te dejo saber que no aceptamos blogs que contengan contenido no serio (Es decir, que tenga poca entradas, diseño no muy agradable y que no se actualiza frecuentemente, se podrían hacer algunas excepciones si el contenido es de buena calidad)

♦ También, ignorare blogs que contengan contenido adulto o ilegal, con insultos y/o malas palabras, amenazas, de mala ortografía, etc.

♦ También, me reservo el derecho a eliminar algún favicon que infrinja contra las normas dispuestas anteriormente a esta.

Nota: El favicon debe tener unas medidas de 16 de ancho por 16 de alto...

Que esperas, no cuesta nada y solo debes cumplir la norma, no me importa la cantidad de visitas, solo un buen contenido y buen diseño.

Como aumentar el trafico a tu Blog desde Facebook

noreply@blogger.com (Anthony Medina) — Wed, 24 Mar 2010 03:04:00 +0000

Como ya conocemos, Facebook se ha convertido en la red social mas utilizada de forma mundial en estos días, el ranking de Alexa es de 2, lo que significa que es la segunda pagina web mas popular después del maravilloso Google. Tantos Bloggers están buscando la manera de aumentar cada vez el trafico de su blog mas y mas, y seguimos en la lucha. Yo para ayudarte un poquito mas te traigo lo que debes hacer para ir aumentando mas a travez de tu pagina en Facebook, lo cual no es indispensable para tener un blog, pero si importante para aumentar el numero de visitas.

A continuación, presentare unos pasos muy importantes que debes tomar en cuenta para aumentar el trafico de tu blog desde Facebook.

[1] Añadir un montón de amigos

Trata de buscar blogs que se relacionen o posean la misma temática que el tuyo, visita paginas de fans de cuyo blog, agrégalos como amigos, trata de conocerlo, charlar un poco sobre lo que quizás les gusta a los dos, háblale de tu blog, di cuan interesante es el contenido que allí publicas. Si el usuario es fan de todo esto, y le gusta tu contenido, de seguro también sera fan de tu blog y tu pagina. Lo mas importante es que no decaigas y sigas en la lucha, no te des por vencido, la primera vez siempre es difícil.

[2] Conectar a Facebook con Twitter

Como todos sabemos, twitter es el favorito del micro-blogging. Puedes unir twitter con Facebook para mejorar la productividad, ahora, cada vez que tu estado en twitter se actualize tambien pasara en Facebook y viceversa, por lo tanto no hay ninguna necesidad de actualizar individualmente cada estado de estas dos redes.

Para realizar esto, seguir el siguiente orden

♦ Entra en tu cuenta Facebook

♦ Ahora, Sigue esta dirección haciendo clic aquí

♦ Inicia sesion en tu cuenta Twitter desde Facebook

♦ Elija su configuracion preferida y Haga clic en Añadir Twitter

♦ No acceda a su cuenta Twitter

♦ Autorizar el acesso de Twitter para Facebook

Eso es todo, ahora, cada vez que se actulize cada una de las dos redes, tambien se actulizara la contraria!.

[3] Importar con notas de aplicacion el contenido de tu blog

La aplicacion de las notas es muy util en Blogger, las entradas y noticias que publicas en tu blog, se enviara automaticamente a cada uno de sus amigos en Facebook mediante el RSS de tu blog, para usar esto, sigue los siguiente pasos:

♦ Haz clic aqui para entrar

♦ Introduce la URL de tu blog o de tu Feed

♦ Marca la casilla para estar de acuerdo

♦ Iniciar importacion.

NOTA: Para realizar esto, debes seguir el paso 4

[4] Crea tu propia pagina en Facebook

Esto es lo que mas recomiendo, y creo que si es indispensable para cada Blogger, es muy importante crear tu propia pagina de fans en Facebook, esto es lo que mas ayudara al aumento del trafico web de tu blog, para hacer una sigue los pasos a continuacion:

♦ Haz clic aqui para seguir la direccion deseada

♦ Escriba su categoria y el nombre de su pagina el cual deberia ser el mismo de tu blog

♦ Haz clic en crear y vea su nueva pagina

♦ Solo debes añadir el panel de fans a tu sitio e invitar amigos a que te sigan.

[5] Usar el Boton de compartir en Facebook.

No hace mucho, posteé una entrada de como colocar el Boton de FBShare en tu blog para compartir contenido en facebook, pero no ofrecido por facebook, tambien te mostrare uno que si es ofrecido por el Facebook mismo, y que sirve para hacer especie de Tweets, tal y como funcion el boton de Retweet de Twitter. Espero te guste.

Para agregar el boton, sigue los pasos a continuacion:

♦ Accede a Blogger > Diseño > Edicion HTML

♦ Haz clic en Expandir plantillas de artilugios

♦ Busca el siguiente codigo

<div class='post-header-line-1'/>

♦ Ahora, justo debajo de ese codigo, pega el siguiente

<b:if cond='data:blog.pageType == &quot;item&quot;'><span style="text-align: right;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</span></b:if>

♦ Guarda la plantilla, y mira el hermoso boton flotando en la parte superior-derecha de tus entradas.

Espero que les haya gustado la entrada...

Marcadores Sociales para Blogger con efecto onMouseOver

noreply@blogger.com (Anthony Medina) — Mon, 22 Mar 2010 02:50:00 +0000

Unas de la mas importantes cosas para cada blog seria tener enlaces hacia marcadores sociales para tu usuarios, y ¿Para que tenerlo?, los marcadores sociales o social bookmarking sirven para que tus lectores compartan el contenido de tu blog en diferentes paginas de gran importancia y que sin duda debes tener en cuenta, ya que te ayuda a atraer mucho mas usuario de estas redes interesados en el contenido que se publica en tu blog.

Así como hace algunos meses ya publique Redes Sociales (Social Bookmarking) en Blogger, que justamente, cumplen la misma función que este nuevo, pero aquella entrada se puede apreciar un efecto opacidad e iconos mas pequeños, a diferencia de esta, se muestra mas atractiva, con iconos grandes redondo y con un efecto estilo "Abajo-Arriba" o "onMouseOver" que hace llamar mas la atención, solo se hace con CSS, sin ningún Script y de seguro, por que yo también lo hice, mejoraras el tiempo en el que los usuarios se quedan en tu blog, ya que de seguro se quedaran jugando con el maravilloso efecto, un rato de diversión no le cae mal a nadie, Jeje. Si deseas ver una demostración puedes verlo en este blog de pruebas.

Ahora, sin mas charlar, para realizar esto, sigue los pasos a continuación:

[1] Ve a Blogger > Diseño y entra a Edición HTML y pega el siguiente codigo justo antes de ]]</b:skin>

div.marcadores {
height:65px;
position:relative;
width:480px;
}
div.marcadores ul.cat {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:50px;
}
div.marcadores ul.cat li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:60px !important;
width:60px !important;
cursor:pointer !important;
padding: 0 !important;
}
div.marcadores ul.cat a {
display:block !important;
width:60px !important;
height:60px !important;
font-size:0 !important;
color:transparent !important;
}

.cat-bitacoras, .cat-bitacoras:hover,.cat-delicious, .cat-delicious:hover,.cat-facebook, .cat-facebook:hover, .cat-meneame ,.cat-meneame:hover, .cat-technorati, .cat-technorati:hover, .cat-twitter, .cat-twitter:hover, .cat-wikio, .cat-wikio:hover {
background:url(http://dl.dropbox.com/u/3301800/tutomax/marcadores%20sociales.png) no-repeat !important;
}
.cat-bitacoras { background-position: left top !important; }
.cat-bitacoras:hover { background-position: left bottom !important;}
.cat-delicious { background-position: -70px top !important; }
.cat-delicious:hover { background-position: -70px bottom !important; }
.cat-facebook { background-position: -140px top !important; }
.cat-facebook:hover { background-position: -140px bottom !important; }
.cat-meneame { background-position: -210px top !important; }
.cat-meneame:hover { background-position: -210px bottom !important; }
.cat-technorati { background-position: -280px top !important; }
.cat-technorati:hover { background-position: -280px bottom !important; }
.cat-twitter { background-position: -350px top !important; }
.cat-twitter:hover { background-position: -350px bottom !important; }
.cat-wikio { background-position: -420px top !important; }
.cat-wikio:hover { background-position: -420px bottom !important; }

[2] Guarda los cambios, ahora cuando estos ya esten guardados, marcas la casilla expandir plantilla de artilugios y busca <div class='post-footer-line post-footer-line-3'> y justo despues de ese codigo, pega el siguiente.

<div class='marcadores'>
<ul class='cat'>
<li class='cat-bitacoras'><a alt='Bitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bitacoras'/></li>

<li class='cat-delicious'><a alt='Delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'/></li>

<li class='cat-facebook'><a alt='Facebook' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'/></li>

<li class='cat-meneame'><a alt='Meneame' expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Meneame'/></li>

<li class='cat-technorati'><a alt='Technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'/></li>

<li class='cat-twitter'><a alt='Twitter' expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'/></li>

<li class='cat-wikio'><a alt='Wikio' expr:href='&quot; http://www.wikio.es/vote?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Wikio'/></li>
</ul>
</div>

[3] Guarda los cambios y disfruta tus nuevos botones debajo de cada entrada.

Formulario de Suscripción por correo electrónico equipado con enlace RSS feed

noreply@blogger.com (Anthony Medina) — Sun, 21 Mar 2010 13:40:00 +0000

Desde hace mucho que queria hacer una publicacion sobre esto, por que todo Blogger que quiera tener mas visitas, y por supuesto ir ganando pocisionamiento mediante el numero de suscriptores, deberia tener un enlace a las Fuentes RSS, por eso es tan importante.

Ahora, sin perder mas el tiempo, permitame dar un paso adelante a explicar que debes hacer para añadir un hermoso formulario a la barra lateral del blog, así como el que se puede ver en la imagen, recuerda que nadie se niega a la personalización, así que te daré aquí algunas de las formas en la que podrías editar el CSS y HTML.

Antes de continuar, asegúrate de tener tu Feed quemado en FeedBurner.

Ahora, lo siguiente:

[1] Ir a Blogger > Diseño

[2] Haga clic en añadir un gadget

[3] Elija el tipo HTML/Javascript

[4] Dentro de este widget pega el siguiente código

<a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Suscribete a mi feed" type="application/rss+xml">Recibe nuevas noticias! </a><span style="color: 5C6AA4 #; font-weight: bold;">Introduce tu correo electronico para recibir nuevas entradas cada dia a tu e-mail:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FrikiBloggeo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:5C6AA4 #; background: #fff; border:1px solid 5C6AA4 #; width: 90px;" name="email" type="text"/><input value="Frikibloggeo" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="Suscribeme" class="mbt1" type="submit"/></form><br/>

Ahora, te muestro que cambios realizar para personalizar el widget.

Remplazar FrikiBloggeo por el nombre de tu Feed, ejemplo:

http://feeds.feedburner.com/nombre-de-tu-feed

Si no te gusta la imagen y deseas cambiarla, solo sustituye la siguiente direccion por la URL de la que te guste

http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif

El código de color 5C6AA4 # se refiere al color de la letra y los bordes. Puede colocarle el color que quieras dependiendo de los colores de tema de tu blog.

Eso es todo, guárdalo y mira como quedo!.

Comentarios Recientes para Blogger y Typad ofrecido por Feedburner

noreply@blogger.com (Anthony Medina) — Fri, 19 Mar 2010 21:54:00 +0000

Apenas, unos cuantos días publique un post de como agregar las entradas recientes en tu blog pero la única diferencia es que ese no usa Feedburner para dicha acción. Pues, hoy vamos a aprender como hacer lo mismo pero con los comentarios y con Feedburner de modo fácil y rápido. Entonces continuo dándote mas información.

Para agregar el gadget o widget de los comentarios mas recientes en tu blog, debes estar registrado en Feedburner, si ya lo estas perfecto, si no te explico lo siguiente:

[1] Entra en Feedburner, te registras y luego inicias sesión, si tu plataforma es Blogger y usas cuenta Gmail para ingresar a tu blog, no tendrás que registrarte, ya que Feedburner es un servicio asociado a Google o mejor dicho, un servicio de Google.

[2] Inserta la URL del Feed de los comentarios de tu blog. Un ejemplo

http://NOMBRE-DE-TU-BLOG.blogspot.com/feeds/comments/default

Eso lo harás, en el siguiente recuadro que te muestra en la pagina.

[3] Presione el Botón Next para ir a la siguiente pagina que te muestra en la imagen, simplemente escoja un titulo y dirección fácil de recordar.

[4] Presiona Next y luego, rellena las casillas marcadas con la flecha en la próxima pagina que abrirá, esas dos casillas son importantes, así que no omitas el paso.

[5] Por ultimo, haz clic en el botón Next, si no presenta ningún error es por que el Feed se ha quemado completamente con éxito.

Ahora, sigue estos pasos marcados con viñetas.

Miraras a la parte superior de la pagina, hay una pestaña en la cual dice la palabra Publicize, haz clic allí como muestra en la imagen.

En la barra lateral izquierda veras las opciones de servicios que Feedburner te ofrece, harás clic justo en el enlace llamado BuzzBoots como lo muestra en la imagen.

Pulsa el Botón Activate en el panel derecho de la pagina próxima.

Luego rellena las opciones que se muestran a continuación como tu prefieras.

Mi consejo es que dejes todas las casillas sin marcas, si alguna ya esta marcada es por que la pagina lo hace automáticamente, y es porque es lo mismo que te recomienda.

Por ultimo, haz clic en el Botón Save para obtener el código HTML que estará justo en la parte superior de la pagina que se mostrara a continuación.

Hecho

Este procedimiento es el mismo que debes usar con Typad

Como agregar el gadget de comentarios recientes a Blogger

Ahora, una vez que ya alla copiado el código del widget de los comentarios, siga los siguientes paso para agregarlo en tu blog de Blogger.

Acceda a Blogger
Ir a el Diseño de tu blog
Haga clic en añadir un nuevo gadget
Elija el tipo HTML/Javascript
Ahora, pega el código de Feedbuner
Guardas los Cambios
Hecho!

Por ultimo, échale un vistazo a ver que tal quedo el widget, gracias por leer.

Colocar opacidad a tus imágenes con CSS

noreply@blogger.com (Anthony Medina) — Thu, 18 Mar 2010 14:56:00 +0000

El efecto opacidad es uno de los efectos mas importante y populares que se pueden usar en los blog, por que es mucho mejor usar una imagen con link que al pasar el puntero sobre ella de un poco de luz que tener una simple imagen que no atrae a nada con ningun efecto en tu blog. Aqui te dejo estas muestras para que sepas de que te hablo.

Lo mejor de todo, es que no utilizaras ningún Script para realizar este efecto, solo basta con agregar algún estilo CSS en tu blog, y un pequeño fragmento de código que deberás colocar al empezar a realizar los enlaces con las imágenes. Te muestro que hacer.

[1] En el código HTML de tu blog, busca la etiqueta </head> y pega el siguiente código justo antes de lo que acabas de buscar.

<!--LINK-OPACITY-STARTS-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
<!--LINK-OPACITY-STOPS-http://frikibloggeo.com.ar-->

[2] Guarda la plantilla. Para empezar a usar el codigo, solo debes agregar el fragmento class='linkopacity' para hacer funcionar el efecto. Te muestro un ejemplo.

<a class='linkopacity' href='URL del enlace'><img src='URL de la imagen'></a>

Eso es todo lo que debes hacer... Verdad que no es nada difícil.

Encontrar y eliminar los enlaces rotos de tu blog

noreply@blogger.com (Anthony Medina) — Wed, 17 Mar 2010 14:44:00 +0000

Puede que nunca quieras ver en un blog signos como que todo el camino termina aquí gracias a un enlace roto que algun usuario de tu blog encontro, y directamente eso perjudicara tu blog. Google enlaza tanto enlaces rotos como lo no rotos, pero supongamos que el usuario usando Google o cualquier otro motor de busqueda encuentre con sus palabras claves un enlace hacia tu blog desde Google y el enlace no sirva. Es una perdida de tiempo para el usuario, ya que generalmente los usuarios de Internet al tan solo ver que una pagina no le funciono, cierran tu pagina y van a los resultados del motor de búsqueda tan solo para ver si hay otro sitio que les pueda ayudar con la búsqueda deseada y la perdida para ti de una visita mas para tu blog.

No es fácil encontrar cada uno de los enlaces rotos en tu blog, haciéndolo de una manera manual, pero hoy traigo una herramienta que puedes usar para encontrarlos de forma automática y eliminarlo por tu propia cuenta. Broken-link-Checker es la herramienta que te permitirá buscarlos.

También, si usas las Herramientas para webmaster de Google, con tu blog, obtienes un recuadro de los errores que han sido rastreados por los robots de Google en tu blog. Este se usa de una manera mas facil, y puede que sea mas segura. Pero si no cuentas con este servicio, no esperes mas para usarlo. Toma esto en cuenta, porque de verdad, no querrás perder una visita por un enlace roto en tu pagina.

Gadget de Posts recientes con imagen.

noreply@blogger.com (Anthony Medina) — Mon, 15 Mar 2010 12:00:00 +0000

BloggerPlugins es una pagina web que ofrece distintos gadget especialmente para la plataforma Blogger y que puedes colocar cuando quieras. Hoy, te traigo unos gadget de post recientes muy atractivos, uno con imágenes, un fragmento de texto, muestra el numero de comentarios y ademas la fecha del post y otro sin imágenes pero con un pedazo de texto del post, fecha y numero de comentarios. La verdad es que este gadget queda muy lindo en el blog, lo acabo de colocar, y puedes verlo funcionando en mi sidebar. Te aseguro que si colocas esto en tu blog atraerás mucho mas clic en las post recientes, ya que seria mas colorido, llamaría la atención y por supuesto, el lector podría ver con mucha mas facilidad de que trata cada post.

Para hacer esto, lo primero que debes hacer es quitar el feo gadget de entradas recientes en la sidebar de tu blog, es lo principal, si lo tienes, si no, ahora lo agregaras. A continuación, te presento dos Gadget mas no, los códigos HTML de ellos. Estos son en formato XML, si sabes editar, pues adelante, te daré aquí los links para que los descargues, recuerda que nadie se cierra a la personalización. Correcto, te muestro las dos imágenes.

----------Descargar XML ------------Descargar XML-------


ADD TO BLOGGER	ADD TO BLOGGER

solo debes hacer clic en el botón ADD TO BLOGGER para añadir el gadget automáticamente en tu blog.

SonoWebs: Lector de noticias para los posts de tu blog

noreply@blogger.com (Anthony Medina) — Sun, 14 Mar 2010 03:23:00 +0000

SonoWebs en como VozMe una herramienta que permite a los usuarios que entran cada día a tu blog escuchar las noticias por alguna discapacidad o simplemente por que es un olgazan, por medio de una voz que va leyendo palabra por palabra las post de tu blog, por eso es importante que si vas a agregar esta herramienta, escribas tus post muy bien, ya que, alguna palabra mal escrita, el reproductor así la presentara e interpretara.

Esta herramientas es tanto para Blogger como para Wordpress, asi como dije, al igual que la herramienta VozMe para agregarle voz a tus entradas, la diferencia y la ventaja, es que SonoWebs te permite escuchar la voz en tu misma pagina, dependiendo del widget que uses, pero VozMe sea cual sea el widget siempre te redirige a su pagina oficial.

A continuación, te presentare algunos de los widget que puedes usar, y que puedes configurar en SonoWebs: Plugin para Blogger, si eres usuarios de Wordpress, también hay una pagina especifica para esta plataforma, SonoWebs: Plugin para Wordpress. Aquí no llega todo, afortunadamente, si eres cliente de alguna empresa que te ofrezca direcciones de formato .php tambien hay oportunidad para ti en SonoWebs: Codigos php. Ahora si, dado todos los links, te invito a disfrutar de los tipos de widget que ofrece para la plataforma Blogger.

1er widget : De una manera muy elegante, SonoWebs te ofrece un modo de insertar su herramienta en su web, con unos pequeños reproductores, el cual recomiendo, por que me parece el mejor y mas adecuado, viene en varios colores, para que lo combines con los temas de tu blog, estos widget son la única forma de hacer que los post se escuchen en la misma pagina, sin redirigirte a otra, he aquí la imagen de muestra.

2do Widget : El segundo no tiene nada en común con el primero, a mi parecer. El segundo se trata como unos especies de botones, los cuales añadirás a cada post de tu blog, y que te redirigirá a la pagina oficial de sonowebs. Aquí te dejo la imagen.

3er Widget: Este tercer widget y como tal vez, ya te lo esperabas, trata solo de un enlace de texto, el cual sonowebs te permitirá acomodar y personalizar a tu antojo, y al hacer clic sobre el, como los botones, te redirigirá a la pagina oficial para escuchar la noticia.

Ya escogí mi widget, ahora que: ya después de haber escogido tu widget vendrá la configuración de este para personalizarlo un poquito mas, aquí podrás editar su alineación, yo te recomendaría que lo alinearas hacia la derecha, pienso que se vería mucho mas elegante, luego, editaras donde quieres que el widget aparezca, o debajo del titulo, o al final del post, mi recomendación seria al final del post, debajo del titulo también se vería muy lindo pero es mi recomendación, recuerda que es tu blog, no el mio, así que son decisiones tuyas. El lector de noticias de donde leerá los post de tu blog, si prefieres que las lea del mismo Blogger con la noticia ya publicada o si posees cuenta en FeedBurner, tomar la noticia directamente de allí. Cual elijas, me parece lo mismo. Luego de terminar con el proceso, haz clic en Generar código, donde te explicaran como introducir el widget y la configuración que elegiste en la plantilla HTML de tu blog

Haciendo una comparación con cada uno de los widgets que ofrece, ¿estas conmigo o te parece mejor otro?

Evita que usuarios roben tus imagenes

noreply@blogger.com (Anthony Medina) — Sat, 13 Mar 2010 12:24:00 +0000

Hoy visitando la pagina de Bloggerstop.net (En ingles) me encontre una maravillosa herramienta en la que puedes evitar que un visitante de tu blog copie una imagen tu creas que es muy importante, para hacer esto lo unico que debes hacer es, cuando nosotros queremos mostrar una imagen en el blog, acudimos a realizar el siguiente código.

<img src='URL de la imagen'/>

ahora, en vez de ese codigo, introduciras la imagen de esta manera.

<img src="URL de la imagen" oncontextmenu="alert('texto de aviso');return false" oncopy="alert('Texto de aviso');return false"/>

El texto de aviso es aquel que saldrá en un pequeño recuadro el cual aparecerá cuando el usuario internte darle clic izquierdo para copiarla. aqui te dejo una pequeña muestra.

Nota: No se puede garantizar que el usuario no podrá copiar la imagen, por supuesto puede haber algún modo de hacerlo, pero es una forma mas de integrarle seguridad a tu blog...

Diseñador de plantillas en Blogger in Draft

noreply@blogger.com (Anthony Medina) — Thu, 11 Mar 2010 22:36:00 +0000

Hoy visitando Blogger in Draft, me tope con una herramienta muy preciada para nosotros los webmasters, por que nos gusta que nuestra plantilla luzca bien a la vista de nuestros lectores, yo se que a ti como a mi te gustara, y es el que quiero presentarte el diseñador de plantillas propios de Blogger in Draft, no se cuanto tiempo ya tendrá funcionando en la pagina en borrador de esta plataforma, tal vez algún día la incluyan al blogger.com... Lo cierto es que, Blogger ha venido dando mejoras muy elegantes y buenas que si atienden a la necesidad y al gusto de los que usan esta plataforma para darle vida a sus weblogs.

Ojalá sigan así, llenándose de puras herramientas necesarias, y que algún dia por aquellos habrías pensado en eso, y de seguro que fue así, ya que yo también lo pensé alguna vez, y hoy lo veo hecho una realidad. Es hora de comenzar a explicar el tutorial.

[1] Entra en Blogger in Draft, haz clic en la pestaña Diseño y veras una imagen como la de al lado, harás clic en la parte onde dice diseñador de plantillas, tal y como lo muestra el recuadro rojo que encierra el link en la imagen.

[2] Lo primero que te mostrara al abrir el link, será la sección de plantillas, en la cual deberás elegir la plantillas que desearas modificar, te ofrece cuatro modelos principales, dividas a su vez en modelos secundarios para cada una de las cuatros plantillas, ya sea cambiando su color, textura, fondo, fuente, entre otras.

[3] Luego, en la sección fondos, que obviamente la palabra lo dice, te mostrara los distintos backgroundsque puedes colocarle al diseño de tu blog, viene clasificados por categorías, elije la que mejor va con el estilo de tu blog, y luego ponle el fondo que mas te guste.

[4] En la penúltima sección, diseño te mostrara los distintas formas en la que puedes aplicar donde ubicaras la sidebar, columnas o cabecera, esto sera en la Sub-categoría diseño del cuerpo del blog.

También, un poco mas abajo en la Sub-categoría Diseño del pie de paginas te mostrara las distintas formas para colocar el Footer, puedes dejarlo con una columna, dos o tres, si quieres mas, puedes editar el código HTML si tienes aprendizajes sobre eso.

Luego, en la Sub-categoría Aplicar ancho,te dará las herramientas para darle el anchor al blog, o a la sidebar de una manera visual con una vista previa mas abajo de la zona de herramientas.

[5] Y por ultimo, pero no menos importante, no queda la sección Avanzado, en la cual podrás editar losCSS de tu blog, como la fuentes y colores que quieres que tu blog tenga, también te permite añadirle códigos CSS al final de donde se muestras las Sub-categorías.

[6] Ya si haz finalizado, haz clic en el pequeño recuadro naranja que se muestra en la parte superior-derecha de la ventana el cual dice APLICAR AL BLOG Para guardas todos los cambios hechos durante todo este proceso. Esto es una sorpresa total y un regalo de tanta espera que no hace los desarrollares de Blogger, espero que si. Gracias por leer.

Colocar FBshare en tu blog para compartir contenido en Facebook

noreply@blogger.com (Anthony Medina) — Tue, 09 Mar 2010 12:43:00 +0000

Así como publique mucho antes el como añadir el botón de Buzz it de Google Buzz en tu blog, tambien publicare el como añadirlo pero con la red social facebook, algo que en realidad deberias tomar en cuenta, ya que facebook como tu y yo sabemos en una pagina muy visitada, y para nosotros, una oportunidad de recibir mas visitas diarias. La imagen que por defecto se verá, es igual a la que puedes observar de color azul al lado de este texto. Este botón no es ofrecido por Facebook, y me parece mucho mejor y mas atractivo que el botón de compartir ofrecido por Facebook, que tal vez, te guste mucho mas que esto, por que la idea no es que me guste a mi, si no a ti, o a los dos juntos.

Este servicio es provisto por FBshare.me, este es un sitio totalmente independiente, no posee ninguna relación con la red social, el cual creo el botón inspirado en el Botón Twitteame de Twitter.

Para wordpress, puedes instalarlo usando el Plugin, y para instalarlo en Blogger, debemos hacerlo manualmente.

[1] Ve hasta la Edición HTML del blog que deseas añadirle el botón, y busca el siguiente codigo.

<data:post.body/>

[2] Ahora, encima de ese código que acabas de buscar, pega el siguiente

<div style='float:right; margin-left:10px;'>
<script>var fbShare = {
url: '<data:post.url/>',
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'></script>
</div>

Este boton, como ya dije, muestra la version grande del boton, y genera URL's cortas con API de FBshare.me, puedes ver mas opciones en el sitio oficial del boton.

Como añadir tu buscador personalizado de Google en tu blog

noreply@blogger.com (Anthony Medina) — Mon, 08 Mar 2010 22:38:00 +0000

Como yo, tú también habrás podido darte de cuenta de que el buscador interno de tu blog no funciona como nos gusta, ya que al escribir el texto deseado a buscar, este en vez de buscar por títulos, busca la palabra en la post completa, haciendo que la post completa se muestre también, a veces, ni busca bien, y también a veces, no encuentra los resultados deseados o simplemente no los encuentra. Hay un gadget original de Blogger para añadir el buscador de Google a tu blog, pero de este modo puedes personalizarlo, el diseño y colocar las paginas que deseas donde se realiza la búsqueda.

Lo primero que debes hacer es entrar a Motor de Búsquedas personalizado de Google, si ya has iniciado sesión, esta muy bien, pero si no lo has hecho, es mejor hacerlo ahora, luego que la pagina cargue completamente, veras una zona igual o similar a esta imagen.

"Clickearas" en Crear. motor. búsq. person para comenzar a crear nuestro propio buscador. La ventaja de el, es que al buscar, no te llevara a otra pagina, solo realiza las búsquedas en la misma pagina que estas, de manera rápida y breve. Ademas, puedes personalizar la pagina de google con tu propio logo...

Luego rellena el formulario que abrirá en la próxima pagina, esta muy atento a las opciones, no cometer ningún error para luego arrepentirnos de haberlo hecho mal... La verdad es que no es nada difícil de rellenar, pero en la opción donde colocaras la lista de URL, y donde ves la URL de Friki Bloggeo en un recuadro azul, deberás colocar la URL usando el prefijo http://URL.com/*, el asterisco (*), es muy importante, es lo que define que el buscador, no solo buscara en la pagina principal de tu blog, si no que realizara la búsqueda en todas las subpaginas de tu blog ofrecidas por Blogger, así que, muy atento a eso por favor. Puedes colocar varias URL's separadas por saltos de lineas.

Luego, te abrirá la Vista previa del buscador, pruebalo, si realiza todas las búsqueda como debería ser, continua marcando la casilla que esta un poco mas abajo de la vista previa, luego haz clic en finalizar para terminar este proceso y acceder hasta la próxima pagina.

Ahora, todo queda en manos tuyas, al acceder a la pagina siguiente, veras todos los buscadores que haz creado, solo haz clic en Panel de control, para abrir las opciones de ese buscador, editar el diseño, y todo lo que se te permita hacer allí, de igual manera, si no te gusto como quedo, puedes eliminarlo, haciendo clic en la palabra suprimir al lado de la palabra estadísticas, creando este post, he notado que el buscador se puede editar los CSS y HTML por si es de tu interés.

Luego de que hayas hecho todo lo que tenia que hacer, solo debes hacer clic en la barra de opciones sobre las palabras "obtener código", creas un nuevo gadget HTML/Javascript, pegas el código allí, guardas los cambios y listo... Gracias por leer

Efecto "Strike" para tachar imagenes con CSS

noreply@blogger.com (Anthony Medina) — Thu, 04 Mar 2010 18:00:00 +0000

La verdad, es que no suelo tachar imágenes en este blog, pero visitando blogs, vi que algunos si tachaban palabras y hasta grandes oraciones con las etiquetas <strike></strike>, logre notar algo que en verdad me parece muy aburrido, y es la forma en la que Blogger tiene predefinida para tachar las imágenes, algo muy común y poco atractivo. ~~Esta es la forma predefinida~~, aburrida, ¿Cierto?, pero esto puede cambiar.

El tag <strike> sirve para tachar objetos de un documento que se han corregido, pero la verdad, es que hoy en día se utiliza mas con fines fonéticos. Ahora, si eres de los que suele utilizar este truco, solo sigue las instrucciones.

[1] CSS para tachar el texto.

Ve hasta la edición HTML de tu blog, y antes de ]]></b:skin>, añade el siguiente código.

strike {text-decoration:none;
background:transparent url(strike.png) repeat-x
left 55%}

Debes sustituir la linea roja en el codigo por la imagen de tachado, aqui te dejo algunas.

[2] Implementacion del truco en los post.

Simplemente encierra el texto que deseas tachar entre la etiquetas <strike></strike>

Ejemplo

<strike>AQUI VA EL TEXTO QUE DESEAS TACHAR</strike>

[3] Explicacion del codigo CSS, para su entendimiento y personalizacion.

strike {...} define que se aplicará a todas las palabras que estén entre las etiquetas y los estilos definidos entre las llaves ( { y } ).

text-decoration:none; quita la línea predefinida que cruza el texto.

background:transparent url(strike.png) agrega una imagen de fondo.

repeat-x hace que la imagen se repita horizontalmente, para que no tengamos que usar una imagen muy larga. Lógicamente, es necesario que las puntas coincidan para lograr un efecto de continuidad.

left 55% posiciona la imagen con respecto a la palabra: "left" la alinea a la izquierda, que es donde comienza la palabra, y "55%" la sitúa un poco por debajo de la mitad. Usé 55% en lugar de 50% porque la mitad se toma desde la altura de las mayúsculas y no quedaría en el centro de las palabras escritas en minúsculas

NOTA: Aun despues de haber implementado ya el código en tu plantilla, puedes seguir usando la linea predefinida mediante las etiquetas <s></s> o <span style="text-decoration:line-through"> y </span>

Agregar emoticones de Yahoo! Smiley encima del formulario de comentarios

noreply@blogger.com (Anthony Medina) — Wed, 03 Mar 2010 13:48:00 +0000

TUTORIAL INACTIVO POR LOS MOMENTOS

Si tienes activado el formulario de comentarios debajo de cada post, entonces seria bueno que le dieras oportunidad a tus lectores al comentar de agregar una lista de emoticones o smilies para que aquellos que deseen comentar en vez de colocar un texto para demostrar agrado como el común"Jajaja" coloquen una carita feliz con los distintos codigos que salen al lado de cada imagen y que al publicar el comentario o post, ya que también sirve para tus entradas, el Script lo sustituya por cada imagen correspondiente.

El formulario de los comentarios se vera igual o similar al que puedes observar en la imagen, al lado derecho de este texto.

Para agregar estos emoticones, debes seguir los siguientes pasos.

[1] Inicia sesion en Blogger, luego ve a la pestaña Diseño>Edicion HTML y expandiendo los artilugios, busca el siguiente codigo.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

[2] Ahora, entre estas dos lineas, pega el siguiente codigo.

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

[3] Ahora, busca la etiqueta </body> y justo antes de ella, pega el siguiente codigo.

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/smiley.js' type='text/javascript'/><noscript><a href="http://www.frikibloggeo.com.ar" target="_blank"><span style="font-size: x-small;">Agregar Emoticones</span></a></noscript>

[4] Finalmente, guardas la plantilla.

La linea roja es el script que hace que se remplace el texto por la imagen, pero el archivo .js esta cargado en la pagina de Google Sites de Friki Bloggeo, si deseas subir el script a tu propio servidor puedes decargarte el ZIP de archivo, subirlo y sustituir esa dirección por la tuya.

Galería de imagen en ventanas modales con SlimBox

noreply@blogger.com (Anthony Medina) — Sat, 27 Feb 2010 15:05:00 +0000

SlimBox es un Script que utiliza las ventanas modales de LightBox, pero a diferencia de este, SlimBox solo sirve para mostrar galería de imágenes o imágenes solas. La ventaja es que tu blog carga mas rápido a diferencia de que coloques todas las imágenes en el blog directamente, y ademas, se vera mucho mas atractivo para los visitantes a la hora de ver las fotos en el blog.

Esta aplicación utiliza para su funcionamiento a Mootools, el cual les explicare aqui como colocarlo en tu blog, pero si ya lo tienes incluido no es necesario hacerlo de nuevo. Entonces, empiezo a explicar.

[1] Ve a la Edicion HTML de tu blog y pega el siguiente codigo justo antes de </head> y guarda los cambios.

<script src='http://sites.google.com/site/frikibloggeo/archivos/mootools.js' type='text/javascript'/>

[2] Ahora, de nuevo, justo antes de </head> pega esto codigos y guarda los cambios.

<!-- SlimBox -->

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/images/slimboxjs.js' type='text/javascript'/>
<link href='http://sites.google.com/site/frikibloggeo/archivos/slimboxcss.css' media='screen' rel='stylesheet' type='text/css'/>

<!-- /SlimBox -->

[3] Ahora, para aplicar el uso de una sola imagen, solo necesitas incluir el atributo rel="lightbox" en el link.

<a href="URL DE LA IMAGEN AQUI" rel="lightbox" title="TITULO DE LA IMAGEN">NOMBRE DE LA IMAGEN</a>

[4] Ahora, para mostrar galería de imágenes solo debes añadir el atributo rel="lightbox[nombredegrupo]"

<a href="URL DE IMAGEN" rel="lightbox[nombredegrupo]" title="TITULO DE LA IMAGEN">NOMBRE DE LA IMAGEN</a>

Para ver unas muestra haz click aqui

VozMe: Añade un lector de texto online en wordpress y blogger

noreply@blogger.com (Anthony Medina) — Sat, 27 Feb 2010 00:15:00 +0000

La verdad es que ya habia pensado en esto desde hace mucho tiempo y desde hace mucho tiempo ando buscando la forma de de añadir un lector de entradas en cada pagina individual, hasta que me tope con VozMe, una maravillosa herramientas que permite colocar tanto una voz femenina o masculina que lea las entradas de tu blog, obviamente para que los lectores tengan mas comodidad, y tambien te permite escucharlo online o descargarlo en formato MP3.

Primero, comenzare con el plugin para instalarlo en Wordpress

[1] Descargar VozMe.zip o VozMe.tar.gz

[2] Extrae el archivo comprimido hasta obtener una carpeta llamada VozMe.

[3] Sube la carpeta VozMe a /wp-content/plugins/.

[4] Entra a la seccion plugins de la herramientas de administracion de wordpress y haz click en activar en el plugin de VozMe

[5] Ve hasta "Opciones > VozMe" y selecciona las opciones de tu preferencia.

Ahora si, seguimos con las distintas formas de usos para Blogger

Mediante un enlace de Texto.

[1] Accede a la Edicion HTML del blog al que deseas agregar la aplicacion.

[2] Marca la casilla "Expandir plantillas de artilugios".

[3] Usando Ctrl F busca el siguiente codigo: <span class='post-icons'>

[4] Justo antes de ese codigo pega el siguiente y guarda los cambios.

<script src='http://vozme.com/get_text.js' type='text/javascript'/><a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"es\",\"ml\");"' href='javascript:void(0);' style='margin-left:1.5em;'>((&#8226;)) Escucha este post</a>

De seguro te habras dado cuenta de lo marcado en rojo del codigo: m1, eso quiere decir que la voz que se usara es masculina, para sustituirla por la femenina quita lo rojo y coloca fm. Asi haras con todos los demas codigos que me faltan por mostrarte.

Ahora, para colocar una imagen debajo del pie de pagina de cada pagina.

[1] Accede a la Edicion HTML del blog al que deseas agregar la aplicacion.

[2] Marca la casilla "Expandir plantillas de artilugios".

[3] Usando Ctrl F busca el siguiente codigo: <div class='post-footer'>.

[4] Justo antes de ese codigo pega el siguiente y guarda los cambios.

<div id='voice'> <script src='http://vozme.com/get_text.js' type='text/javascript'/> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"es\",\"ml\");"' href='javascript:void(0);'><img src='http://vozme.com/img/paper_sound32x32.gif' align='left' alt='' border='0' style='margin-right:0.4em;'/></a> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"es\",\"ml\");"' href='javascript:void(0);' style='font-size:10px;'>Escucha<br/>este post</a> </div>

Para ver mas formas de como colocar esto en tu blog haz click aqui.