SEO: aplicando el FODA a nuestro blog

Cuando vimos los artículos sobre como estudiar a la competencia decíamos que esto nos permitiría descubrir en gran parte, fortalezas, oportunidades, devilidades, amenazas.

Entrevista a Carlos Arreola

Como no podía ser de otra forma, hemos decidido arrancar a lo grande, y nuestra primera entrevista es a Carlos Arreola.

Banco de Imágenes

Un banco de imágenes publicadas dentro del blog de forma ordenada para que los bloggers y demás personas puedan hacer uso de ellas.

Dibujos para colorar

Una recopilacion de dibujos para colorear en blanco y negro, ideales para imprimir y regalarselos a los mas pequeños.

Cómo cuidarnos del Phishing

Ahora bien nosotros tenemos algunas formas de cuidarnos del phishing, es decir, prevenir que nos roben datos personales, con algunos consejos prácticos

Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





29 dic. 2008

Como crear un gadet que te permita enviar entradas a twitter

Twitter es una de las aplicaciones web mas importantes del mundo.

En este tutorial les explicare paso a paso como crear una herramienta para poder enviar entradas a tu twitter desde tu blogger lo cual lo he llamado twitteador.


Para empezar voy a explicar como funciona el aplicativo, consiste en un simple cuadro de texto que incluye un contador de caracteres lo cual es desarrollado en javascript.



Mira este video como funciona



Despues usando el mismo codigo se clickea en el boton update que abre una ventana a tu cuenta personal de twitter en el caso que estes conectado, si no estas conectado cuando envias la entrada te lleva al login y posteriormente procede a cumplir la publicacion.

Cuando llega a tu panel aparece el texto que escribiste debes oprimir Update y se publica automaticamente,bien ahora empezamos a programar.


Paso 1 : Desarollar el contador

Para armar el contador puedes usar javasript que es facil y simple.

Este es el codigo contador, como vamos a desarrollar para blogger no es necesario pegarlo dentro o fuera de la etiqueta body.
<script>
contenido_textarea = ""
num_caracteres_permitidos = 150
function valida_longitud(){
num_caracteres = document.forms[0].texto.value.length
if (num_caracteres <= num_caracteres_permitidos){
contenido_textarea = document.forms[0].texto.value
}else{
document.forms[0].texto.value = contenido_textarea
}
if (num_caracteres >= num_caracteres_permitidos){
document.forms[0].caracteres.style.color="#ff0000";
}else{
document.forms[0].caracteres.style.color="#000000";
}
cuenta()
}
function cuenta(){
document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>

Paso 2 armar el codigo de envio.Este script es el mas importante ya que procedera a enviar tu entrada a tu cuenta de twitter.

Codigo de envio.

<script>
function goto()
{
window.open('http://twitter.com/home?status='+document.forms[0].texto.value+'','','toolbars=yes,scrollbars=yes,location=yes,statusbars=yes,menubars=yes,');
}
</script>

Paso 3 armar el formulario

Teniendo los scripts armados solo falta armar el formulario en este caso usaremos los campos text,textarea y button, tambien fracionaremos los mismos en bloques <div> de css para poder decorarlo dejandole un aspecto agradable.

<form action="#" method="post">
<div id="car">
<input type="text" class="cnt" name=caracteres size=4>
</div>
<div id="block">
<div id=tex>
<textarea cols="34" rows="4" class="texto" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea><br>
</div>
</div>
<div id="boton">
<input type="button" value="Publicar" onclick="goto()">
</div>
</form>
<p >
Script desarrollado por <a href="http://jadetel.net/ebreyaue">emmanuel breyaue</a> para <a href="http://vidablogger.com.ar">vidablogger</a></p>

Ya armado y estructurado solo falta darle un buen aspecto por lo cual usaremos css, tienes que colocarlo dentro de unas etiquetas llamadas <style></style> de lo contrario no funcionara.


<style>
#car{padding-left:215px}
#block{width:250px;height:100;padding-left:10px;background-color:#A6E8E7;border: #33CCCC; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
#tex{margin-top:5px}
#boton{padding-left:195px;margin-top:10px}
.texto{font-family:arial;font-size:10pt}
.cnt{arial;font-size:14pt;border: #FFFFFF;border-style: solid; border-top-width: 1px; border-right-width:1px
}
</style>

Para cambiar los bordes y fondos del bloque de texto tienes que cambiar la siguiente linea


#block{width:250px;height:100;padding-left:10px;background-color:eaeaea;border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

Por este, un ejemplo color rojo.

#block{width:250px;height:100;padding-left:10px;background-color: #FE7070;border: #FF0000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

o por este color verde.

#block{width:250px;height:100;padding-left:10px;background-color: #E4FE96;border: #99CC00; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

Paso 4
Teniendo el codigo armado ahora podemos colocarlo en blogger para ello tienes que hacer lo siguiente.

  • Entra a diseño en el panel de control de tu cuenta blogger.

  • Cliquea crear nuevo gadet

  • Elige la opcion html/javacript.

  • Pega el codigo completo y guardalo, colocale "que estas haciendo?" como titulo.

  • Arrastra el bloque hasta lo posición que elijas y listo todo usuario que ingrese puede twittear desde tu blog.

Podes mirar mas de estos codigos visitando mi blog fresprog

Todo blogger teniendo un poco de creatividad y imaginación puede crear grandes cosas solo se necesita imaginar aprender y creer que es posible.



Video Tutoriales de Wordpress

Una de las formas mas fáciles de aprender a hacer algo que no conoces, es viendo videotutoriales, por lo que me dì en la tarea de buscar alguna pàgina que los proporcionara, y di con ella. En esta página encontrarás varios videotutoriales de wordpress en español, entre algunos videos interesantes que vi están:

* Como publicar un Post
* Como insertar imágenes
* Creación de enlaces
* El manejo de enlaces y Categorías
* La administración
* Manejo de las “Opciones Generales”
* Como manejar los widgets en WordPress

Para los que no y los que sí son novatos en el manejo de wordpress, esta página les será muy útil, y además ni siquiera hay que descargar los videotutoriales ya que se pueden ver totalmente online.

Enlace a los videos AQUI.

27 dic. 2008

SEO para emprendedores

Interesante video donde se habla de SEO en general, SEO de guerrilla, SEO en el plan de negocio, SEO como fuente de ingresos, etc.


Vía | vimeo

25 dic. 2008

Felices Fiestas

Bueno me he tomado este 24 y 25 de Diciembre para disfrutar en familia, por lo que solo me queda desearles a todos ustedes unas muy Felices Fiestas! se lo desea todo el equipo de VidaBlogger - Ayuda para Blogs.

23 dic. 2008

[VideoTutorial] Como crear un blog en Blogger

Hoy les quiero dejar este VideoTutorial que te enseña como crear un Blog en Blogger desde cero, sin tener conocimientos previos. Es ideal para todo aquel que quiere comenzar en el mundo de los blogs y no sabe como dar los primeros pasos.

El video tiene una duración total de 5 minutos y está explicado en español.



Si bien muchos de ustedes ya tienen un blog y considerarán que está demás que les expliquen esto, les recomiendo ver el video igualmente, ya que pueden sacar algun que otro tip.

21 dic. 2008

El truco de "Expandir/Contraer" o [+/-]

Como dice el título, hoy les voy a enseñar este gran truco que te permite crear un post largo y en algunos lugares añadirle el simbolito de Expandir/Contraer, o el [+/-] que en definitiva lo que hace es esconder una porcion del post, ya sea un video, una imagen o un texto y así el lector puede expandir y ver el contenido.

Lo primero que hacemos es ir a la configuración HTML de nuestra plantilla y buscamos el </head> y justo antes pegamos el siguiente codigo:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>


Luego de esto, cada vez que queremos utilizar el [+/-] en cualquier parte de nuestro blog, ya sea un post o la sidebar, debemos poner el siquiente codigo:

<a onclick="return
verocultar(this);"href="javascript:void(0);">[+/-]</a>
<div style="display: none;">Contenido
oculto
</div>


Y debemos remplazar donde dice Contenido Oculto por la parte del post que queremos esconder. Recuerden que pueden esconder un texto, una imagen o un video.

Otra opción es sustituir el símbolo de Expandir/Recoger por una imagen, lo que haríamos sería añadir <img src="url-de-la-imagen"/> en lugar de [+/-]

Espero que les sea de utilidad.

18 dic. 2008

Analiza los componentes utilizados en tu web

Sitonomy es una herramienta que descubre los diferentes componentes que forman un sitio web y ofrece alternativas a los mismos.

Basta incluir la url para que Sitonomy nos avise sobre el sistema de estadísticas utilizado, el lenguaje de programación, la forma de poner publicidad, datos del servidor

Una forma interesante de cotillear entre los sistemas utilizados por los más famosos para obtener algunos consejos que siempre van bien al empezar un proyecto web.

16 dic. 2008

Averigua cuanto vale tu web


WebValuer es una aplicación que, en función del tráfico de nuestra web, nos muestra el valor estimado en dólares.

Además nos da la posibilidad de añadir un gadget a nuestra sidebar para que nuestros visitantes sepan cuanto vale el blog.

Visita WebValuer y completa con la url de tu blog para saber cuanto vale.

14 dic. 2008

Wallpapers Navideños en HD

Les dejo este link para que descarguen algunos wallpapers navideños para estas fiestas. Aqui tienen unos ejemplos de algunos, recorran la web y van a ver muchos mas.




Link para descargarlos: HDwallpapers.net

12 dic. 2008

Analiza los BackLinks de tu blog

Link Diagnosis es una aplicación web con la que puedes analizar los datos asociados a los backlinks de tu blog.

Ingresamos la URL del blog y listo. En unos instantantes obtenemos un informe con backlinks, la páginas enlazadas y los anchors más utilizados o populares.

No es una aplicación perfecta, pero obtenemos información muy importante, como para conocer más los sitios que nos enlazan, a que páginas apuntan y otros tipos de datos importantes.

8 dic. 2008

Iconos RSS con efecto de cristal

Les dejo este hermoso pack de iconos RSS. Incluye un total de 8 iconos en diferentes colores y en formato PNG.

Para descargar este pack visiten la web del autor AQUI.

6 dic. 2008

Añadir la opción: "Leer mas..." o "Seguir Leyendo..."

Si acostumbramos a hacer entradas un poco largas (más de tres o cuatro párrafos), nuestra pantalla inicial (home) puede llegar a ser un calvario para los lectores que buscan algo concreto. En este caso, podría ser conveniente mostrar un pequeño resumen de cada post y que sea el lector el que elija si ver el resto de la información o no.

El truco que se explica a continuación mostrará las primeras líneas redactadas y a continuación un enlace para ver el post completo. Este esquema se repetirá en todas las entradas donde elijamos.

En primer lugar hacemos un backup de nuestra plantilla. Con artilugios expandidos, buscamos <div class=’post-body’>

El código a insertar se muestra en color rojo. Una vez insertado Guardan los cambios.

<div class="post-body">
<b:if cond="data:blog.pageType == "item"">

<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href=
"data:post.url">Leer más…</a>
</b:if>

<div style="clear: both;"/> <!– clear for photos floats –>
</div>

Ahora vamos al Panel de Control y en Configuración-->Formato, encontraran un recuadro en blanco con el título Plantilla de entrada. Ahí pegan el siguiente código y guardan los cambios:



VISIBLE
<span class="fullpost">

OCULTO
</span>

Evidentemente, las palabras VISIBLE y OCULTO se tendrán que sustituir por los contenidos que queramos mostrar siempre y los que queramos esconder, respectivamente.

4 dic. 2008

Mostrar el total de entradas y comentarios de nuestro blog

Hoy les voy a enseñar un pequeño truco de como añadir un recuadro mostrando el numero total de entradas y comentarios en nuestro blog. El tip es muy útil, sobre todo porque al ver los visitantes que tenemos un blog con muchas entradas y comentarios se darán cuenta de la importancia de nuestro blog, y los animará a visitarnos regularmente.

Para añadir este elemento tenemos que copiar el código que está a continuación:


<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script
src=http://URL_DE_NUESTRO_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount></script>
Entradas y <script src="http://URL_DE_NUESTRO_BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>
Comentarios


Y hacerle las siguientes modificaciones: Donde dice URL_DE_NUESTRO_BLOG tienen que poner el nombre de su blog (fijense que es una url, por lo que deben poner la primera parte de la url de su blog de blogger, ya que el .blogspot.com ya está, y necesitamos esa url como figura alli porque lo que nos interesa es el feed).

ENTRADAS y COMENTARIOS es el rótulo que saldrá para cada uno, podemos cambiarlo a nuestro gusto, por ejemplo en lugar de entradas podemos poner POSTS, etc.

Una vez que tenemos nuestro código modificado a nuestro gusto lo insertamos en un Elemento HTML/JavaScrip y lo colocamos en la sidebar o en el lugar que mas nos guste.

2 dic. 2008

Extraer los colores de las imágenes

Muchas veces encontramos imágenes fabulosas de las cuales nos gustaría sacarle alguno de los colores para aplicarlo a algún proyecto nuestro, algún diseño, como fondo del blog, o para cualqueir cosa que lo necesiten.

Para eso existen muchas aplicaciones, y hoy les presento a WhatsItsColor. Para usarla accedemos a web y allí elegimos entre subir la imagen desde nuestra pc o examinar una directamente de la web. Elegida la imagen le damos a Upload & Process. Una vez que la sube y analiza nos dará cada uno de los colores que conforman la imagen en formato HTML.

Les dejo una imagen a modo de ejemplo de como es el resultado final.


Espero que les sea útil. Saludos.