lunes, 4 de octubre de 2010

Inserta ustream a una pagina de Facebook

Articulo Principal: Insert Ustream with static FBML

Hace unos días teníamos que hacer una transmisión de video en vivo para un cliente vía su Like/Fan Page.


Decidimos utilizar el servicio de USTREAM para el streaming de video porque es uno de los mejores.

Para insertar cualquier elemento (en este caso el video en vivo) dentro de una pestaña de Facebook necesitamos utilizar código FBML.


Empecé el google search con ustream fbml static y no encontré nada que resuelva mi problema exactamente así que modifiqué la búsqueda a youtube fbml static y encontré esto:



<fb:swf

swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”

swfsrc=’http://www.youtube.com/v/JOt2Qp0H9G8

imgsrc=’http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg’ width=’340′ height=’270′ />


Luego un par de neuronas hicieron conexión y recordé que USTREAM da servicio de embeder por HTML con un código como este:


<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”400″ height=”251″ id=”utv658922″><param name=”flashvars” value=”autoplay=false&amp;brand=embed&amp;cid=637790&amp;locale=en_US”/><param name=”allowfullscreen” value=”true”/><param name=”allowscriptaccess” value=”always”/><param name=”movie” value=”http://www.ustream.tv/flash/live/1/637790?v3=1″/><embed flashvars=”autoplay=false&amp;brand=embed&amp;cid=637790&amp;locale=en_US” width=”400″ height=”251″ allowfullscreen=”true” allowscriptaccess=”always” id=”utv658922″ name=”utv_n_816458″ src=”http://www.ustream.tv/flash/live/1/637790?v3=1” type=”application/x-shockwave-flash” /></object>



Lo que sigue es intercambiar las partes que he señalado con negrita


<fb:swf

swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”

swfsrc=’http://www.ustream.tv/flash/live/1/637790?v3=1OJO

imgsrc=’http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg’ width=’340′ height=’270′ />


Sólo faltaría modificar la url de la imagen previa antes de cargar el video


imgsrc=’http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg’


Parece algo elemental pero no encontré nada en google =)



PD: USTREAM ofrece un servicio de hacer la conexión con facebook pero no es automatizado debes completar un formulario y esperar por la respuesta 2 semanas por lo menos.

Como añadir YouTube Videos o Flash a Paginas Facebook con Static FBML Pages

Articulo Original: How to Add YouTube Videos or Flash to Facebook Static FBML Pages

As detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by using Facebook's proprietary FBML (Facebook Markup Language).


Recently, someone asked us how to embed video in a Static FBML page. Well, you can actually embed any Flash object using FBML, and it's pretty easy. Here's how it's done if you want to embed a YouTube video (Note: you can use this technique to embed any Flash object with the .swf extension).




PLEASE NOTE:



  1. Static FBML can only be used on Fan Pages, not Personal Profiles or Group pages.

  2. You can only use CSS and HTML in these pages, and FBML.

  3. Your video cannot start playing when the page loads. Facebook requires a user action (usually a click) to load Flash or run JavaScript.

  4. To position your video on your page, put the fb:swf code in a containing DIV, set to the width of the video, and position the DIV using CSS.





If you can't get this working::



  • Check your URLs: Make sure the URLs to both the activation image (imgsrc) and the video or Flash object are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.

  • URLs are case sensitive: All directory and file names after the domain name are case sensitive. One misplaced capital and it won't work!
  • Close the fb:swf tag Make sure you have closed the <fb:swf> tag, with "/>" (without the quotes). If the tag isn’t closed, it won’t work.


  • Make sure quotes match and are closed: It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width="xxx' ).



Embed a YouTube video using FBML


Here's the code you put on your Static FBML page:


<fb:swf

swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"

swfsrc='http://www.youtube.com/v/xxxxxxxxxx'

imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />



Replace "xxxxxxxxxx" with the YouTube video ID, which is the string of characters after the "v=" in the URL in your browser's address bar (up to the "&" or anything following it, if you see that after the string of letters and numbers). For example:


http://www.youtube.com/watch?v=JOt2Qp0H9G8&feature=related


You would replace "xxxxxxxxxx" with "JOt2Qp0H9G8" in both places, resulting in:


<fb:swf

swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"

swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'

imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' width='340' height='270' />



You can also change the values for "swfbgcolor" and "imgstyle" to your preferences.


The value "swfsrc" is the absolute URL to the Flash file you want to embed (YouTube videos are in Flash format).


The Preview / Activation Image — imgsrc


Facebook requires a user action (usually a click) to trigger Flash or JavaScript to run. There is no way around this requirement. The "imgsrc" image is the image the user will see in place of your video. When s/he clicks the image, your video loads.


To eliminate a second click to start the video after it loads, try setting your video to autoplay so that it plays immediately when the user clicks the activation image. You do this by appending "&autoplay=1" to the swfsrc URL:


swfsrc = 'http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1'



The value "imgsrc" is the preview/activation image. The YouTube thumbnails are small( usually 120x90 pixels), so you don't really want to use those for your activation image.


You can change the "imgsrc" URL to point to any image online, so you should probably create your own image at the 340x270 dimensions (or whatever dimensions you wish — the 340x270 is just an example), upload it to your server (or use an image hosting service like Photobucket to host your images).


On your Fan Page, an image appears first (the value of "imgsrc"). When the user clicks the image, it turns into the Flash object.


Positioning / Aligning your Video on the Page


If, for example, you want to center your video/Flash on the page, you need to put it inside a containing DIV and position the DIV using CSS, as in this example using the width of 492 pixels:


<div style="margin:0 auto; width:492px;">

<fb:swf


swfbgcolor="000000"

imgstyle="border-width:3px; border-color:white;"

swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI='

imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='492' height='391'/>

</div>


The "margin:0 auto" centers the containing DIV on the page. You can set the top and bottom margins to whatever values you wish, but the left and right values have to be set to "auto" to center the DIV.


The above is ONLY an example; set the values appropriate to your video/Flash.


Feel free to ask questions via comments, and I'll try to help.

domingo, 26 de septiembre de 2010

Importar y exportar marcadores de Firefox a otra Computadora

Nota Original: Importar y exportar marcadores de Firefox
* Desde el menú Marcadores – Administar marcadores accedemos al gestor de marcadores de Firefox.
* Desde Ahí, vamos al Menú Archivo – Exportar… y saldrá la ventana de windows preguntando la carpeta destino del archivo “bookmarks.html”. Se generará un archvo html con todos los enlaces.
* Para Importar seguiremos el mismo camino y desde el gestor de marcadores iremos al Menú Archivo – Importar

viernes, 24 de septiembre de 2010

Como agregar meta Tags y Meta Descripcion a blogger

Agregar etiquetas META en Blogger

Como ya hemos comentado en Como utilizar los Metatags los metatags son muy importantes para indicar a los buscadores el contenido de nuestra web. Veamos como agregar metatags en blogger de manera sencilla.


Normalmente se deberían agregar un description y keywords por cada página de nuestro blog, pero solo agregaremos los metatags a la página principal de nuestro blog. En las páginas que no tengan metatags los buscadores generarán automáticamente el description basado en el texto de la página.



Código para los Metatags en Blogger

Entonces utilizando la sintaxis condicional en Blogger, tendríamos el siguiente código para mostrar los metatags en el home de nuestro blog. Este código debe ser colocado justo antes del tag </head>.



1
2
3
4
<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='keywords, separados, por, comas' />

<meta name='description' content='Descripcion del sitio web' />
</b:if>


Ejemplo Practico


Entonces para nuestro blog de ejemplo creado en Blogger tendríamos nuestros metatags personalizados con el siguiente código:



1
2
3
4
<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='tips, wordpress, blogger, twitter, html, css' />

<meta name='description' content='Tips, tutoriales, ejemplos y descargas para personalizar tu web.' />
</b:if>


Sencillo pero les ayudará mucho a posicionar su blog en los buscadores.





Tambien ver: Como agregar Meta keywords & meta description

Como sabrán hay varias meta tags que puedes añadir a tu blog, y estas son de alguna manera importante para el posicionamiento en los buscadores esta vez solo hablaremos de como agregar las meta tags: <keywords> y <description>


Lo se tendría que hacer es añadir meta keywords y meta description sólo para la página de inicio, con condicionales. De esta forma, Google no detecta meta keywords y description duplicados.

Para ello, buscar (también al inicio de la plantilla):

<b:skin><![CDATA[/*

Y añadir el siguiente código antes:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="La descripción de tu blog" />
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5" />
</b:if>


Solo falta editar ese codigo, poniendo la descripción del blog y donde dice: keyword1, keyword2, keyword3, keyword4, keyword5 escribirás logicamente las palabras claves que quieras y de lo que trate tu blog.

Como ves es muy facil, aplicalo a tu blog y obtendrás beneficios a largo plazo. Espero que se haya entendido todo.

martes, 14 de septiembre de 2010

Como Descargar audio de YouTube

Fuente SpamLoco

Generalmente cuando quiero obtener el audio de un video de YouTube utilizo a Freecorder, un programa que permite capturar cualquier sonido que pasa por el navegador. Pero para los que no desean instalar programas y quieren una solución más sencilla, existen servicios online que permiten descargar el audio de los videos de YouTube en formato mp3.

Descargar Musica YouTube .com y Dirpy, son sitios que te permitirán lograrlo, con el primero además de descargar el sonido se pueden convertir los videos a otros formatos, algo que también podemos hacer con Ace Downloader; con el segundo sitio es posible descargar el audio y editarlo online.

El primero es el más sencillo de utilizar, aunque el funcionamiento de todos es similar, simplemente debemos ingresar la url del video y descargar el mp3.

sábado, 4 de septiembre de 2010

Como añadir el boton oficial de Twitter en tu Wordpress

Mas informacion: Agrega TweetButton en WordPress y Blogger
Para ponerlo mejor en WordPress hay que poner dos funciones PHP de WordPress tanto como URL personalizada, como también como título personalizado en la configuración de Tweetbutton tal y como vemos en las capturas que van a continuación:

En lugar de lo que os sugeríamos, sugerimos poner la función para el texto del tweet y para el enlace que debe figurar en el tweet.

Después, hay que buscar el lugar adecuado para ubicarlo en los archivos index.php y single.php (como mínimo, se puede también integrar en resultados de búsqueda, etc.) de nuestro theme.

Como añadir los Botones de "like" de Facebook a Wordpress

Mas detallado en: Botón “Me Gusta” de Facebook en tu WordPress

El boom de las redes sociales debe ser aprovechado. Y una de las cosas mas geniales que se popularizaron gracias a Facebook es el botón Like it (“Me gusta”), por su sencillez y su capacidad de elevar la cantidad de visitas a un contenido en particular.


Cada vez que un usuario presiona el botón “Me Gusta”, los amigos del mismo pueden observar la acción y, si son lo suficientemente curiosos, visitar nuestro contenido potencialmente multiplicando las visitas.


Para colocar el boton en tu theme WordPress, debes abrir el archivo single.php y debajo de <?php the_content(); ?> colocar:



<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>


Listo! Sus usuarios ya tienen una herramienta mas para compartir todas las notas.

Mas detallado en: Tip: Agregar el botón Like / Me Gusta de Facebook a Wordpress

Lo único que necesitan hacer, es dirigirse al directorio del tema que estén usando en Wordpress y editar el single.php (usualmente ubicado en /wp-content/themes/nombredetema/single.php) con el siguiente código:




<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>



(cambiando width y height de acuerdo al ancho / alto que quieran.)


Este código lo pegan exactamente donde quieren que aparezca el boton en sus temas, y listo! Si quieren agregarlo también a la página principal, no se olviden de pegar el código en “index.php”.


Si quieren generarlo manualmente ustedes, pueden hacerlo desde aquí Like Plugin (facebook).


Lo que estamos haciendo aqui es reemplazar el código original, por


<?php echo urlencode(get_permalink($post->ID)); ?>



Lo cual hará que funcione con páginas dinámicas / individuales!

lunes, 30 de agosto de 2010

Posicionamiento en Bing

Fuente: Dcorbaxeo

A pesar de que en España la inmensa mayoría de los usuarios emplean Google como motor de búsqueda no podemos olvidar a sus dos grandes competidores, Yahoo y Bing.

Hoy vamos a centrarnos (si podemos) en las acciones SEO para Bing:

  • Bing prioriza la antigüedad del dominio, lo cual favorece el posicionamiento, (SEO). Esto es fácil de comprobar al realizar cualquier búsqueda.
  • Incluir palabras claves en el dominio, también mejora la indexación.
  • Títulos únicos y descripciones de Meta a cada página Al añadir los títulos y las descripciones útiles vas a proporcionar a Bing información orientada, palabras clave, así que representará tu sitio web de este modo, en el mejor rango de Bing.
  • Caracteres que leen los buscadores del Título, URL y Descripción:
    Una diferencia importante es que Bing admite más caracteres en las descripciones y en los title. Así lo ilustra este gráfico de Seomoz con una comparativa sobre los caracteres que lee cada navegador.
    (Gracias a @RBZSevilla):

caracteres en Bing y navegadores

  • Conviene recordar que un título corto y preciso, (dirigido sobre todo al usuario), vale mucho más que uno largo y confuso.
    Estas cifras son sólo orientativas.
  • Microsoft Advertising Intelligence: Implementación de palabras clave con la Herramienta de Optimización específica para la creación de anuncios, similar a AdWords.
  • Estructura sistemática de la página, código html verificado e Imágenes etiquetadas. A Bing le gusta una estructura de datos consistente entre las páginas (como la colocación de datos similares entre las páginas utilizando una estructura de árbol similar, los nombres de clase similar, el apoyo a las tecnologías de marcado estándar, como los formatos de las micro, etc sobre todo para los blogs) para añadir más del contenido del sitio en SERP´s de Bing.
  • Calidad de contenido. Dado que Bing ofrece una vista previa, quiere del webmaster contenidos indexables, de calidad, de cada página.
  • Da de alta tu sitio en Bing.
  • Dar de alta tu URL en las Herramientas para Webmaster de Bing. Algunos aseguran que esto aumenta bastante las visitas desde este buscador. Yo no he visto cambios significativos.
  • Enviar Sitemap a Site List
    Como a todos los motores de búsqueda a Bing le encanta que le facilites el trabajo. Sin embargo, no hay necesidad de volver a enviar el sitemap a Bing cuando Live Search previamente ha indexado el sitio web y no ha habido cambios recientes. Se utiliza el mismo Sitemap que para Google.
  • Incluir robots.txt y validarlo con la Herramienta específica de Bing.
  • Los enlaces entrantes son fundamentales. Hay que preocuparse por el anchor text que recibirán nuestras páginas. El mismo Bing ha reconocido la importancia del Link Building y nos enseña cómo conseguir enlaces.
  • Se necesitan más de 200 palabras por página para mejorar el posicionamiento. A mayor contenido por página, mejores resultados.
  • Bing le da mucha relevancia a los mensajes publicados en Twitter. Por lo cual, el factor social es muy importante para el posicionamiento en Bing. La Social Media tiene peso a la hora de mejorar nuestros resultados.
    posicionamiento SEO para Bing

Como ves la similitud es enorme entre el SEO para Bing y SEO para Google. Lo único que creo que en Bing no se menciona la importancia de vínculo de retroceso.

En última instancia, el SEO es siempre SEO. Bing no cambia eso.

miércoles, 18 de agosto de 2010

Como Instalar el botón oficial de Twitter en Blogger

La nota completa esta en el Blog: Vida MRR


Lo mas importante para instalarlo en tu blog e Blogger es



Lo podemos pegar expandiendo primero nuestra plantilla de artilugios. Después de eso vamos a bucar el siguiente texto <div class='post-body entry-content'> y justo debajo de ese texto vamos a añadir el otro que sigue:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='display: inline; float: right; margin-left: 5px;'>
AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON
</div>
</b:if>

Esto hará que el botón se coloque en el texto del post, pero aún hay que hacer otra cosa, tenemos que agregar un expr: antes de data-text y dara-url, como en la imagen.


lunes, 14 de junio de 2010

Colocar un botón para Tweetmeme

Consultar para mas informacion El Escaparate de Rosa




Tweetmeme es una especie de agregador de noticias de Twitter.

Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde aparecen los tweets más destacados.



En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.





Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.




[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:



<b:if cond='data:post.title'>

<div id="tweetmeme" style="float: right;"> <script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>


<h3 class='post-title entry-title'>


[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:



Botón grande Tweetmeme


[3] Guardamos cambios.



Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:




<div id="tweetmeme" style="float: right;">

<script type="text/javascript">

tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = 'compact';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

</div>
Botón pequeño Tweetmeme





Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada concreta.

Para hacer esto tendríamos que incluir el código así:



<b:includable id='comments' var='post'>

<script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


<div class='comments' id='comments'>



domingo, 13 de junio de 2010

Coloca el botón Me gusta en Blogger (el contador)

Con los recientes cambios que ha hecho Facebook sobre la invasión del llamado Me gusta ha salido la posibilidad de incluir este botoncito en nuestro sitio web o blog para que la gente vote si le gusta el post o quieres que compartan un enlace determinado. En el siguiente tutorial les voy a enseñar a insertar este código para poder tener un toque más social en su blog.

El botón es más bien un iframe al que se le pasan por parámetros las características del elemento. El código es más o menos como sigue:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogandweb.com%2F&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>


Los parámetros son:




  • href – Con la URL a compartir.


  • layout – Estilo del botón. Valores: standard o button_count


  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.


  • width – Ancho del iframe.


  • action – Texto del botón. Valores like o recommend.


  • font – Fuente a utilizar.


  • colorscheme – Esquema de colores. Valores: light, dark o evil.



Estos valores se pueden cambiar directo en el código o usar el formulario de personalización de Facebook, el resultado es el mismo.



Agregar botón "me gusta" a Blogger



1. Ir al código de la plantilla y expandir artilugios.



Home → Diseño → Edición de HTML → Expandir plantillas de artilugios



2. Elegir el lugar a agregar el código. El lugar tradicional para hacerlo en el post-footer, es decir, al pie de cada entrada, entonces, se busca el código:



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


Y abajo se agrega el siguiente código:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

</b:if>


Mas info en Vida MMR

Como añadir el botón “I like” de facebook en tu página web

Uno de los últimos cambios de Facebook es permitir a los creadores web insertar un botón de “i like” en su página web.


Vamos a ver cómo hacerlo y qué implica.


Insertar el botón es muy sencillo. Vamos a explciarlo paso a paso:


Primero hay que ir a esta URL de facebook y rellenar el campo “URL to Like” (es decir, la URL de tu sitio web).


Este simple formulario genera un código HTML


<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.top-rankin.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>



que insertaremos en nuestra página web. Por ejemplo, en este blog de WordPress está insertado como widget tipo “texto” en la barra lateral. Si os fijais el height del iframe está en blanco. Es recomendable darle un valor, en mi caso, de 24px.


¿Qué genera esto?


Una vez insertado, veremos el botón de “I Like” en la web.



Via: Añadir el botón “I like” de facebook en tu página web

lunes, 10 de mayo de 2010

Como colocar el Google Analytics en una web de DotNetNuke

La forma tradicional es esta:



Y la forma simplificada para el DotNetNuke 5 website

domingo, 2 de mayo de 2010

Como Agregar el Like de Facebook en tu post de Blogger

Para revisar mejor visita el link http://www.allblogtools.com/tricks-and-hacks/add-facebook-like-button-for-blogger-blogspot-and-customize-it/

few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,

In this tutorial you’ll learn how to add it to your blogger blog.

and you’ll learn how to customize




  • change the verb, like or recommend.

  • change it’s color.

  • change it’s font.



Step 1. adding it to your template.

The button code,


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:100px;'/>
</b:if>


where to add it ?


Log into your blogger account, then go to Layout >> Edit Html.

Before doing any thing you must check Expand Widget Templates box.

And find the next Code


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

And after it, paste your button code



What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.


click Save Template and you are done.




Step 2. Customize your button & Demo.

in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,


in the above code change the following parts,



  • like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.

  • arial this part controls the font type, keep it or change it to one of the following,

    lucida+grande

    segoe+ui

    tahoma

    trebuchet+ms

    verdana

  • light this part controls your button color theme, and you have three options, light, evil, or dark


  • Update, How to make it appear on your home page.


in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,


<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

I wish you all like it and please leave your comments if you need any help, to see demo for it please click here.

viernes, 30 de abril de 2010

Como Agregar el Like Box a tu Blog de Blogger


SE habran dado cuenta que el metodo de ingresar el Like Box de tu pagina en Facebook a variado un poco, y que el codigo que te da no resulta tan efectivo, asi que te recomendamos hacer el siguiente cambio en el codigo

El Problema es en "profile_id=YOUR_FACEBOOK_PAGE_ID"

Reemplazalo con "profile=1&id=YOUR_FACEBOOK_PAGE_ID"

jueves, 11 de marzo de 2010

Blogger estrena un Diseñador de Plantillas Propio

Ya era hora lo que muchos de nosotros estabamos esperando, ahora podremos diseñar o tener blogs mas profesionales diseñandolos nosotros mismos.

Para hacer la prueba de esta nueva funcion puedes hacerlo entrando por Blogger in Draft.

sábado, 27 de febrero de 2010

Como poner el Boton de Dacebook en tu blog de Blogger

Es facilisimo solo busca y configura tu codigo en:

http://www.facebook.com/facebook-widgets/share.php

miércoles, 3 de febrero de 2010

LOS DNS DE GOOGLE


ARTICULO DE

Google te ayuda a navegar con sus DNS

Google estrena servidores DNS públicos. Te estarás preguntando cómo puede ayudar eso a que navegues más rápido. Cada vez que escribes una dirección en la barra del navegador -por ejemplo, Google.com- y pulsas Intro, el navegador contacta con los servidores DNS para traducir la URL a una dirección IP (en el caso de Google, 74.125.67.100).

Pues bien, sin servidores DNS rápidos y fiables, traducir las direcciones a números IP es un proceso más lento, y, por ende, navegar también lo es. En el pasado recomendamos el servicio OpenDNS, pero la entrada de Google supone una revolución: con sus conexiones, las mejores del planeta, difícilmente podría haber servicio mejor. Al menos sobre el papel. Veamos cómo configurar Windows para usar las DNS del Gran Buscador.

¿Quieres cambiarte a Google DNS? Las direcciones de los servidores DNS públicos de Google son las siguientes:

· 8.8.8.8
· 8.8.4.4

Sin duda muy fáciles de recordar. Ahora bien, ¿cómo puedes usarlas en tu equipo? Depende del sistema operativo. En la página oficial hay instrucciones para todos ellos, pero aquí te explicaremos cómo configurar las DNS de Google en Windows XP, Vista y 7.

En Windows XP

En XP, ve a Inicio > Panel de control y abre Conexiones de red: verás todas tus conexiones. Un clic derecho sobre la que uses para conectarte a Internet, uno izquierdo sobre Propiedades y se abrirá una ventana con las Propiedades de red de la conexión.




Propiedades de TCP/IP


Haz doble clic sobre Protocolo Internet (TCP/IP), elige el último botón radial (Usar las siguientes direcciones de servidor DNS) e introduce 8.8.8.8 en el primer campo y 8.8.4.4 en el segundo. Pulsa Aceptar, otra vez Aceptar y… ¡ya está!











En Vista / 7

martes, 26 de enero de 2010

Otro metodo mas Poner barra de menú en blogger

Gracias a


Este tutorialito, es para hacer una barra de menú en blogger como la mía, ya van varias veces que me preguntan cómo hacerlo, y pues aquí les va mi guía. Antes de empezar guarda un backup de tu plantilla por si algo sale mal la puedas recuperar sin problemas.


El objetivo es lograr algo como esto para tu blog:



Barra de menú

Para empezar, tienes que tener la opción de añadir más elementos de página en la sección del header, así:


Añadir elemento header

Blogger no nos lo permite por default, pero eso se resuelve fácil, vas a editar HTML de tu plantilla y buscas lo siguiente:



<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Donde cambiarás maxwidgets a 2 y showaddelement a yes. Quedando así:



<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>


Eso va a permitirnos añadir otro elemento arriba o bajo el header.



Lo que sigue es pegar un código en la plantilla para el menú. Esto lo vas a pegar antes de <head>



<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 4px 15px;
text-decoration: none;
color: white;
border-right: 2px solid black;
outline: none;
}
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
</style>


En ese código se incluye el estilo que va a tener el menú, puedes alterarle los colores si quieres que son los numeros de 6 dígitos (#000000, ver links al final del post), o usando nombres comunes de colores en inglés (white, blue, pink). Con el código así como está obtienes un menú igual al mio. Trata de jugar con los colores para crear uno que vaya con tu diseño.



Ya que pegaste el código, guardas los cambios y vas a agregar elementos de página, agregas un nuevo gadget tipo HTML/Javascript y en el vas a pegar lo siguiente:



<ul class="barrademenu">
<li><a title="Kozmica.com" href="http://www.kozmica.com">Inicio</a></li>
<li><a title="Informacion" href="http://www.kozmica.com">Acerca
de</a></li>

<li><a title="Contáctame" href="http://www.kozmica.com">Contacto</a></li>
</ul>


Claro que cambias la dirección a la de tu blog. Con eso te saldrán 3 “pestañas” o espacios en el menú, para agregar una más sólo es necesario agregar otro de estos:



 <li><a title="Contáctame" href="http://www.kozmica.com">Otro menu</a></li>


¡Genial!


Si has hecho todo correctamente hasta ahora tendrás una barra de menú que se ve muy bien, sólo hay un último detalle, todos los enlaces dirigen a el inicio del blog, ¿cómo agregar las secciones?


En blogger no se puede hacer una página estática, pero podemos simular una con una entrada vieja en nuestro blog. ¿Cómo?, puedes editar entradas viejas transformándolas en el Acerca de, Contacto y demás o puedes crear una nueva entrada para cada sección y cambiarle la fecha hacia atrás para que no aparezca en la portada cuando la publiques.


La fecha la cambias clickeando en Opciones de entrada e introduces la fecha y hora que desees.


Cambiar fecha

Es buena idea guardar los posts de las secciones antes de tus primeras entradas (puedes revisar la fecha que esas tienen) así cuando alguien esté navegando por tu blog no se topará con los post del menú entre el contenido. También puedes elegir entre permitir o no comentarios.



Ya que hayas creado tus entradas puedes empezar a añadir el acceso a ellas desde el recién agregado menú. Lo que tienes que hacer es colocar la dirección de cada post que hiciste de secciones en el código del menú. Por ejemplo, mi sección de Sobre mí así se ve el código en mi menú:



 <li><a title="Conóceme" href="http://www.kozmica.com/2008/04/sobre-m.html">Sobre mí</a></li>


Creas tantas entradas y espacios de menú como necesites.


NOTAS:


Para buscar y encontrar algo fácilmente en la plantilla usa Control+F.

Cualquier duda, cosita en la que no me haya explicado bien o no funcione me comentas aquí mismo.


Te puede servir:

Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.

HTML color codes / Otra web con códigos de color

jueves, 7 de enero de 2010

Lista de Proxys

Si por ahi cambiaste tu dominio o estas estrenando uno nuevo y estas desesperado por saber si funciona bien pues usa esta direccion y la lsita de Proxys

http://www.tech-faq.com/proxy.shtml

miércoles, 6 de enero de 2010

Monitoreo WEB

El post original esta en Spam Loco:

Herramientas de monitoreo web


La primera de ellas es HostTracker, un servicio completo y gratuito que permite verificar instantáneamente por medio de varios servidores si nuestro sitio se encuentra activo para diferentes localidades y zonas. Además, también monitorea la web automáticamente y envía alertas por e-mail.


La segunda herramienta la ofrece OpenDNS y con ella se puede monitorear la propagación de las DNS por Estados Unidos y Europa. La web también ofrece otros servicios, además de la administración de nuestros DNS, bloquea automáticamente los sitios fraudulentos e incluye un chequeador de sitios para adultos.