Normas básicas del análisis Social Media. Modelo Standards

Venimos viendo como el uso de las redes sociales se ha generalizado ya no solo a nivel personal sino también a nivel empresarial. Hoy en día toda empresa es consciente de que hay que estar presente por una razón muy simple: sus clientes están allí, una oportunidad que no pueden perder. Por ello, la necesidad de medir toda la actividad que se produce en las redes sociales de nuestra empresa se ha convertido en imprescindible y gracias a una colaboración de diferentes empresas involucradas en la materia, hace apenas un mes veíamos que ya salía a relucir la publicación definitiva de las normas básicas del análisis Social Media recomendadas por #SMMStandards.

Dicho esto, digamos que aún nos encontramos en ese momento de aprendizaje en el que empezamos a convivir con estas herramientas que Internet nos deja al alcance de nuestras manos. No podemos tener una actividad Social Media sin plantearnos un análisis de los resultados que se están dando con aquello que publicamos. Y es que otro de los grandes retos en Internet, es recopilar todos los datos que recibimos de manera eficiente y no ahogarnos en el intento. Por ello, las medidas planteadas, intentan simplificar y unificar la medición en las redes sociales, como su propio nombre indica a través de Standards o modelos de referencia.

La publicación divide en cinco grupos las medidas a tener en cuenta que a continuación se presentan:

1.Fuentes y métodos de transparencia

La primera medida es crear una tabla de contenido que recoja la información sobre las fuentes de contenido de Social Media y los métodos que se utilizan para su recogida y análisis, para proporcionar una total transparencia y facilitar la comparación. Su utilidad reside en que existen parámetros que se miden a través de diferentes herramientas que pueden usar metodologías diferentes, por ello, es muy importante utilizar la tabla para identificar nuestras fuentes de información.

2.Alcance e impresiones

El objetivo de este apartado es ofrecer cuatro indicadores específicos para poder medir el alcance y las impresiones de las publicaciones. Actualmente, la medición de la actividad de Social Media de las marcas, depende directamente de las metodologías de las herramientas digitales y, por ello, se toman como indicadores fundamentales a ITEM, MENTION, IMPRESSION y REACH:

• Un ITEM de contenido se refiere a un post, micro-post, artículo que se publica por primera vez en un medio digital, es decir, a la totalidad del elemento que puede ser comentado, recomendado y todos sus derivados de interacción. Los likes, comentarios, RT, no deben ser tomados como ITEM sino como derivados adicionales de éstos
• Una MENCIÓN es aquella que se refiere a la marca que se está analizando, típicamente definidas en Social Media como aquellas veces que aparece el nombre de la marca en las búsquedas.
• Una IMPRESIÓN representa el número de veces que un ítem tiene la oportunidad de ser visto y de llegar a las personas, basado en la audiencia que ha tenido la oportunidad de verlo, independientemente de que lo vieran o no de dispositivos diferentes.
• El ALCANCE o REACH es el número total de individuos únicos que tuvieron la oportunidad de ver un ITEM. REACH es el indicador que está basado en el número de impresiones, redefinida para eliminar la duplicación de individuos que han tenido la oportunidad de verlo varias veces por diferentes canales, es decir, potenciales oportunidades para ser visto.

3.Engagement y Conversación

ENGAGEMENT: Se trata de la acción que existe más allá de la exposición e implica una interacción entre dos o más personas. Es la participación que se produce en respuesta al contenido publicado, es decir, cuando alguien participa CON NOSOTROS.

Se sugiere que el ENGAGEMENT debe medirse como :

• Nº total de interacciones dentro de cada canal
• Porcentaje de participación de su público al día/semana/mes
• Porcentaje de participación por cada ITEM

CONVERSACIÓN: Se define como la discusión que se mantiene tanto online como offline sobre la marca, ya sea en los canales de la marca o en el de terceros. Cuando alguien habla DE NOSOTROS.

Las medidas que se sugieren para la CONVERSACIÓN:

• Nº total de ITEMS que nombran a la marca, empresa o tema en cuestión.
• Nºtotal de MENCIONES sobre cada ITEM
• Nºtotal de oportunidades de que se vea cada ITEM, calculado por el número de lectores que hay en el momento de la publicación.

4.Influencia y Relevancia

En este caso, la influencia no puede ser definida bajo una única puntuación o algoritmo concreto ya que depende de varias variables como el engagement, el alcance o la relevancia de un tema entre otras cosas. Por ello se definen cuatro conceptos:

• INFLUENCE: se trata de la Habilidad de causar o contribuir un cambio en la opinión de un cliente
• KEY INFLUENCER: la persona o grupo de personas que poseen el potencial medio para influir debido a una serie de atributos, como la frecuencia de comunicación que tienen por ejemplo.
• INFLUENCEES(INFLUENCIADOS): Con aquellos que interactúan los key influencer. Se trata de la persona o grupo de personas que cambian su opinión o comportamiento como resultado de estar expuestos a una información.
• INFLUENCER MARKETING: El acto de un vendedor o comunicador que hace participar a los KEY INFLUENCER para que a su vez actúen sobre los influencees.

Cabe destacar que las investigaciones demuestran que un vendedor es más eficaz cuando concentra los recursos a los factores más importantes para influenciar a aquellos que mayor potencial tienen de ser influenciados

5.Sentimiento, Opinión y Defensa

Ser capaz de medir el sentimiento, la opinión y la defensa de los usuarios hacia una marca es verdaderamente un reto, por ello, siempre viene bien definir los conceptos para después identificar el tipo de análisis que podríamos realizar.

• SENTIMENT: Es el componente de opinión y promoción que el autor trata de transmitir sobre la marca o empresa.
• OPINION: es un punto de vista o juicio sobre algo, no necesariamente basado en hechos o conocimientos.
• ADVOCACY o DEFENSA: se refiere al apoyo/recomendación que públicamente recibe la marca en un nivel superior a los likes y follows; es aquella actividad por parte de los usuarios que influencia a otras personas.

6.Impacto y Valor

Representan el último resultado de una acción en las redes sociales, se definen por y dependiendo de los objetivos marcados por la empresa. Muchas veces se confunde con el término ROI, pero está lejos de ser el único impacto o valor atribuible a las redes sociales.

• IMPACTO: Se trata del efecto que provoca una campaña de social media, un plan o esfuerzo en una audiencia determinada.
• VALOR: La importancia, el valor o utilidad de algo. El valor puede ser descrito en términos financieros o no.

Cualquier medida referente al impacto y el valor, deben estar asociadas a los objetivos de negocio de la empresa. Tal y como muestra el informe, evaluar el valor e impacto de una campaña es un proceso complejo y entran en juego numerosas variables. En ningún caso se puede reducir a una fórmula generalizada que se aplique a todas las organizaciones. El valor depende de la estrategia de negocio.

El hecho de que se hayan puesto en común conceptos tan importantes a nivel de analítica en Social Media, es una gran iniciativa para unificar criterios de medición que utilizamos para argumentar la presencia en redes sociales. De esta manera, la base de todo estudio se podrá plantear de manera unitaria y con una base teórica contrastada.

PDF original de Normas básicas del análisis Social Media.

Autora: Naike Calvo. Comunicación y Marketing Digital. Especializada en Big Data. Apasionada de las posibilidades que nos brinda la red.. Puedes encontrarla en Google Plus y Twitter

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger

Tal como lo mencioné en una entrada anterior, he creado un breve vídeotutorial en el que se muestra cómo construir una plantilla HTML5 para Blogger, corresponde al primer artículo de tantos que comenzaré a realizar para el blog.



Pido disculpas si no se entiende o si cometo muchos errores, es mi primer vídeotutorial hablado y soy pésimo explicando a voz. Si tienen algunas dudas pueden preguntar directamente en el vídeo o en esta entrada.

Les agradecería que se suscribieran a mi canal de Youtube, en donde comenzaré a publicar artículos relacionados a Blogger.

Tipos de Widgets:

Esta lista permite tener acceso a los distintos gadgets para así agregarlos a una plantilla, algunos como el gadget HTML o el de encuesta requieren una previa configuración.

Type="Blog"	Permite mostrar las entradas del blog, en el tutorial es el que se trabaja desde cero.
Type="PlusOne"	Nos permite mostrar el botón +1 dentro de alguna sección.
Type="PlusFollowers"	Muestra tus seguidores en Google+.
Type="PlusBadge"	Muestra una insignia de perfil de Google+.
Type="Translate"	El traductor por defecto en Blogger (de Google).
Type="FollowByEmail"	Permite a los usuarios seguirte mediante FeedBurner.
Type="PopularPosts"	Muestra los posts populares del blog.
Type="Stats"	Permite ver las estadísticas (Básicas) de las visitas del blog.
Type="PageList"	Muestra una lista de las páginas estáticas del blog.
Type="AdSense"	Muestra anuncios de Google AdSense.
Type="CustomSearch"	Buscador personalizado de Google.
Type="HTML"	Permite insertar código HTML.
Type="Text"	Permite insertar texto en el blog.
Type="Image"	Muestra una imagen en una sección.
Type="Slideshow"	Muestra un SlideShow de fotografías.
Type="VideoBar"	Muestra una insignia de perfil de Google+.
Type="Poll"	Muestra una insignia de perfil de Google+.
Type="LinkList"	Lista simple de enlaces personalizados.
Type="TextList"	Lista simple de elementos personalizados.
Type="Feed"	Enlaces que direccionan a las feeds.
Type="NewsBar"	Muestra las últimas noticias de Google Noticias.
Type="Label"	Muestra las etiquetas del blog, en lista o nube.
Type="Subscribe"	Enlaces de suscripción al blog.
Type="BloggerButton"	Botón de Blogger para el blog.
Type="Profile"	Información del autor o lista a los perfiles de cada uno.
Type="BlogArchive"	Archivo del Blog.
Type="Header"	Logo/Nombre y descripción del blog.
Type="Wikipedia"	Buscador Wikipedia.
Type="ContactForm"	Formulario de Contacto.
Type="Followers"	Seguidores en Google.

Variables Data:

Las variables data, en Blogger son objetos que almacenan alguna información, nos otorgan con facilidad determinados elementos con la simple acción de mencionarlas.

En Blogger, poseemos una basta cantidad de estos elementos, para evitar la sobrecarga de información utilizaremos los más importantes.

Estos datos se pueden utilizar de la siguiente forma:

De manera inline: Nos permiten utilizar los objetos como atributos, por ejemplo:

<div expr:id='"post"+ data:post.id'>

Lo que resulta en:

<div id='post30422323223'>

Mediante etiquetas: Permiten incluirlas en cualquier parte válida, por ejemplo:

<div class="titulo-entrada"><data:post.title/></div>

Resultando:

<div class="titulo-entrada">Título de la entrada</div>

Locales: 

Requieren alguna ubicación concreta, o ciclo para poder funcionar (Ej: data:post.title requiere estar dentro del ciclo de las entradas), de lo contrario no se encuentran inicializadas y por lo tanto no arrojarán resultados o bien se mostrará una alerta en la plantilla.

Dentro del ciclo de entradas:

<data:post.url/>	Devuelve la URL de la entrada.
<data:post.title/>	Devuelve el título de la entrada.
<data:post.snippet/>	Devuelve un resúmen de la entrada.
<data:post.thumbnailUrl/>	Devuelve la primera imagen del post, cortada a 72px, cuadrada (Requiere imagen subida a Picasa/Blogger).
<data:post.firstImageUrl/>	Devuelve la primera imagen detectada en el post sin alterar.
<data:post.dateHeader/>	Devuelve un rango de fechas para organizar las entradas.
<data:post.timestamp/>	Devuelve la hora de una entrada.
<data:post.author/>	Devuelve el nombre del autor que escribió la entrada.
<data:post.authorProfileUrl/>	Devuelve la URL del perfil del autor de la entrada.
<data:post.id/>	Devuelve el identificador numérico de la entrada.
<data:post.canonicalUrl/>	Devuelve la URL canónica de la entrada.
<data:post.timestampISO8601/>	Devuelve la fecha de la entrada según la ISO8601.
<data:post.emailPostUrl/>	Enlace para enviar entrada por Email.
<data:post.location.mapsUrl/>	Devuelve la URL de la geoubicación de la entrada (Requiere incluir al crear la entrada).
<data:post.location.name/>	Devuelve el nombre de la geoubicación de la entrada (Requiere incluir al crear entrada).
<data:post.editUrl/>	Devuelve la URL para editar rápidamente la entrada.

Dentro del gadget type="Blog":

<data:newerPageUrl/>	Devuelve URL "Entradas recientes" o "Entrada siguiente" dependiendo el caso.
<data:newerPageTitle/>	Devuelve nombre "Entradas recientes" o "Entrada siguiente".
<data:olderPageUrl/>	Devuelve URL "Entradas antiguas" o "Entrada anterior" dependiendo el caso.
<data:olderPageTitle/>	Devuelve nombre "Entradas antiguas" o "Entrada anterior".
<data:homeMsg/>	Devuelve mensaje "Página principal".

Dentro del ciclo de etiquetas (Dentro de entrada):

<data:post.label/>	Devuelve la(s) etiqueta(s) dentro de la entrada, requiere ciclo post.labels.
<data:label.url/>	Devuelve la URl de cada etiqueta, requiere ciclo post.labels.

Globales: 

Pueden ser utilizadas dentro de cualquier elemento y a diferencia de las locales, es que no requieren ninguna dependencia para funcionar:

<data:blog.pageType/>	Devuelve el tipo de página actual (index,static_page,item,error_page,archive).
<data:blog.pageUrl/>	Devuelve la URL actual (Ej: http://wwww.blog.blogspot.com/p/pag-actual.html).
<data:blog.pageTitle/>	Arroja el título de la página actual (Ej: Blog : Título entrada).
<data:blog.blogId/>	Devuelve el ID de tu blog (Ej: 6894142822305456206).
<data:blog.metaDescription/>	Devuelve la meta descripción del blog.
<data:blog.canonicalUrl/>	Devuelve la URL canónica del blog.
<data:blog.homepageUrl/>	Devuelve la página principal del blog.

Ciclos/Iteraciones:

Traemos contenido almacenado dentro de una matriz en Blogger, a diferencia de otros lenguajes sólamente definimos el ciclo, no lo programamos.

Existen varios bucles en Blogger, como por ejemplo en el gadget del tipo BlogList, pero tampoco los mencionaremos para que cada uno se encargue de buscarlos dentro de cada gadget que haya agregado.

Estructura:

<b:loop values="data:elementos" var="elemento">
        <!--Contenido iterado-->
</b:loop>

Ciclo de etiquetas (Para mostrar las etiquetas dentro de una entrada):

<b:loop values='data:post.labels' var='label'>
        <!--Traer las etiquetas de una entrada, requiere estar dentro del ciclo de las entradas y para mostrar cada etiqueta se requiere data:post.label-->
</b:loop>

Ciclo de etiquetas (Todas las etiquetas):

<b:loop values='data:labels' var='label'>
       <!--Permite mostrar todas las etiquetas del blog, requiere estar dentro de un gadget de tipo Label-->
</b:loop>

¿Sencillo no? Puedes de esta forma generar el contenido de tu blog.

Condicionales/Bifurcaciones:

Estructura simple (If):

Esta estructura nos permite condicionar si la condición es true, o false, pero no ambas.

<b:if cond='Si esto es == true'>

       <!--Se mostrará este contenido en el blog--> 

</b:if>

Estructura compuesta (If/Else):

Esta sentencia nos permite condicionar para ambos casos, si se cumple se ejecuta, y si no, se ejecuta lo que se encuentre debajo de <b:else/>.

<b:if cond='Si esto es == true'>
       <!--Se mostrará este contenido si la condición se cumple-->
<b:else/>
       <!--Se mostrará este contenido si la condición NO se cumple.-->
</b:if>

Algunos ejemplos con distintas formas de uso:

<b:if cond='data:blog.pageType == "index"'>

       <!--Mostrar esto en el índice del blog-->

<b:else/>

      <!--Mostrar esto en el resto de elementos, como páginas y entradas-->

</b:if>

<b:if cond='data:post.thumbnailUrl'>
       <!-- Este ejemplo, a diferencia del anterior, bifurca cuando la variable data existe-->
</b:if>

<b:if cond='data:post.thumbnailUrl == "URL_DE_LA_MINIATURA"'>
       <!-- Un ejemplo con la misma variable anterior, que indica que si el texto de la derecha es la URL de la miniatura, se mostrará algún código-->
</b:if>

<b:if cond='data:post.author= "Víctor Calderón"'> 

      <!-- En este ejemplo, preguntamos si el que escribió este artículo es Victor Calderón, se mostrará un fragmento que nosotros escojamos-->

</b:if>

<b:if cond='data:postNum == 2'>

      <!-- El post es el 3ero en la página principal, en él se mostrará algo, requiere que en el ciclo de entradas agreguemos el atributo index='postNum'-->

</b:if>

Includable/Include:

Esta maravillosa función, que muy poco mencioné en el vídeotutorial nos permite crear zonas de código reutilizables, o bien para mantener el código mucho más organizado.

La forma de uso se basa, en construir un elemento <b:includable> y en él añadir el código que queramos, debe llevar un identificador y la variable en donde se aplica.

Un ejemplo para el gadget de entradas:

<b:includable id="estructuraentradasindice" var="post">
      <div class="post_indice"> 

          <div class="titulo_entrada"><a expr:href="data:post.url"><data:post.title/></a></div>
          <div class="resumen_entrada"><data:post.snippet/></div>
          <div class="miniatura"><data:post.thumbnailUrl/></div> 
      </div> 
</b:includable>

Y para utilizarlo dentro de un ciclo:

<b:loop values="data:posts" var="post">
      <b:include name="estructuraentradasindice"/>
</b:loop> 

Nota: Existe en el widget de entradas, el <b:includable> que tiene como valor var="top", quiere decir que dentro de este se encuentran todos los demás.

Enlace del vídeo:

http://youtu.be/6xcPf0YEi4g

Información: Esta entrada se irá actualizando debido a que faltan una inmensidad de códigos, pero estos son los que más necesitan.

Actualización: Código fuente del vídeotutorial:

Código fuente del primer vídeotutorial para crear plantillas para Blogger. GitHub Gist

5 Elementos Clave que pueden Ayudarte a Ganar Enlaces a tu Blog de Forma Natural

Si has considerando lanzar una convocatoria para solicitar que enlacen tu blog para luego hacer lo mismo, pensando en obtener más visitas, ¡reconsidéralo!. Eso ya es cosa del pasado y carece de toda efectividad. Pocas veces esos enlaces generarán clics, ya que no están haciendo referencia a nada que pueda interesar a un usuario. Además, a Google no le gusta nada ese tipo de prácticas. Imagina llegar a una página y ver ahí decenas de enlaces todos desorganizados y sin ninguna relación entre sí, ¿te generaría esto confianza? A mi no y probablemente a tus usuarios tampoco.



Existen formas más efectivas de construir enlaces de forma natural, o los llamados enlaces orgánicos que pueden ayudarte a generar tráfico a tu sitio.



La clave está en conseguir que otros te enlacen porque consideran que ofreces algo valioso, o porque al difundir cierto contenido y que abajo describo, es necesario enlazarte. En otras palabras generar contenido útil y que "despierte interés", es la clave.



Si ya cuentas con algunas visitas, es hora de crear contenido viral, entendiéndose por éste, aquel que genere gran ánimo para la difusión. Vemos de qué se trata ;)



✔ 1. Crea una infografía. Una infografa es una representación gráfica de información o datos donde de forma breve y concisa y utilizando en su mayoría imágenes, se expone algún tema en especial. Son muy bien acogidas por los usuarios y actualmente se ha vuelto una estrategia de marketing muy efectiva. Si sabes manejar un programa como Photoshop, o Paint.Net, esta es tu gran oportunidad. ¡Tienes que crear una!.



Consejo: Como consejo puedo decirte que no crees una infografía de cualquier cosa, crea una sobre un tema que pueda resultar útil, interesante o que tenga mucho auge en ese momento. Que sea concisa, y esté bien estructurada. Que el usuario pueda entender en un vistazo el orden que tiene, e ir comprendiendo fácilmente su composición, y por supuesto, que sea atractiva visualmente. Una vez creada, publícala en tu blog y si les gusta a los usuarios, ya verás que recibirás enlaces porque fue compartida ;)



Hace tiempo creé mi primer infografía donde hablaba sobre los límites de la cuenta de Blogger y recibí mucho apoyo. Aprovecho para dar las gracias :)



¿Tienes en mente un tema interesante, y no tienes idea de cómo empezar a crear una? Puedes explorar ejemplos de infografías en Visual.ly, para inspirarte.



Si no sabes nada de diseño, tampoco te desanimes, existen herramientas online que te ayuda a crear una infografía usando como base plantillas prediseñadas ¿Quieres ver más información sobre las infografías y cómo crear una a partir de plantillas online?, entonces échale un vistazo a este video: http://www.youtube.com/watch?v=LGE6X6CW820.





✔ 2. Haz una Guía online. Una Guía, es un material de información que explica detalladamente cómo hacer uso de algo o bien, cómo hacer algo. En estos tiempos, donde lo que más abunda en Internet es la información, tener en un solo lugar de forma detallada instrucciones sobre algo, es sumamente agradecido.



Consejo: Pueden ser las instrucciones por ejemplo para usar un programa como Word, o instrucciones que indiquen detalladamente como utilizar una herramienta como Google analitycs, o AdSense, entre otros temas que estén orientados a despertar el interés de tu audiencia.



Puedes utilizar una página estática de tu blog para poner ahí la guía, de tal modo que, pueda ser compartida por otros fácilmente, y además, puedas agregar el enlace a tu menú de navegación, para que tus visitantes puedan acceder a ella.





✔ 3. Ofrece Algún Recurso gratuito utilizable en la Web. Me refiero a aquel recurso que puede ser descargado para su futura utilización. Si bien las guías pueden descargarse si así lo dispones, no permiten por ejemplo ser exhibidos en sitios webs.



Consejo: Con el gran auge que existe en la actualizad de las redes sociales, una buena idea podría ser crear un buen set de iconos para ofrecerlos en tu página. Si careces de las herramientas o conocimientos para hacerlo, ¡pídele a un diseñador que lo haga por ti!. De preferencia ofrécelo de forma exclusiva, es decir, que no pueda ser redistribuido en otros sitios. Pero que si pueda ser referido para descargarlo desde tu sitio. Otra idea seria crear una plantilla para un currículum vitae, o un diseño exclusivo de tarjetas de presentación. Al ofrecer un recurso útil en tu blog, otros webmasters querrán recomendarlo en tu sitio.



✔ 4. Haz una tutorial en comic. Si eres bueno para dibujar, ingéniatelas para hacer un tutorial en comic. Usa el buen humor. A la mayoría de personas nos gustan las cosas cómicas y que nos puedan sacar la sonrisa o una carcajada. También, ver conceptos o ideas explicados con dibujos o animaciones.



Consejo: Puedes elegir un tema de gran auge, o que creas que puede despertar interés por verse comprometidas las emociones de los usuarios. Puedes ver un ejemplo en esta entrada donde compartía un tutorial en comic:

http://www.compartidisimo.com/2012/01/la-ausencia-de-comentariosun-indicativo.html



✔ 5. Haz un videotutorial explicando el procedimiento para hacer algo. Enfócate en buscar alguna necesidad especial que puedan tener tus usuarios para crear el video. La solución de problemas es muy bien recibida, agradecida y con gran posibilidad de ser promovida.



Consejo: Por mencionar un ejemplo ahora con el "cierre de Google reader", ¿qué tal un video donde expliques cómo empezar a usar alguna alternativa?. Por cierto, dejo el enlace de las alternativas que sugiere Google, desde la página de Google Reader.

http://alternativeto.net/software/google-reader/





Consejos finales



Creo que está de más decirlo pero, todo el contenido listado anteriormente tiene que ser gratuito. Si crees que has creado material que merece ser visto por otros, no dudes en mostrarlo a otros webmasters que tengan blogs afines o con temáticas relacionadas. Esto puede hacer que se ofrezcan a colaborar en la difusión de tal contenido. Lo peor que te puede pasar es que no te digan nada :) y en tal caso, no perderás nada.



Asegúrate de agregar una licencia de Creative Commons al contenido creado o ser explícito sobre los términos de uso, por ejemplo, permitir su distribución siempre y cuando se haga mención de la fuente y se de el crédito debido. A continuación te anexo un enlace de la página de Creative Commons.



Potencia el contenido que crees usando fuentes fiables y verificables, eso hará que el contenido gane credibilidad y sea compartido.





Conclusiones

Si bien el crear artículos de gran calidad, puede generar enlaces a tu sitio, pues tus usuarios lo compartirán en sus redes sociales, o en su propio blog, el tipo de contenido que menciono tendrá más posibilidades de recibir enlaces simplemente porque ¡es muy buscado y querido!. Así que no dudes en crearlo. Requiere mucho tiempo, lo sé, pero las cosas fáciles no necesariamente son las mejores ¿verdad?



Información recomendada

El enlace abajo y al que hago referencia, habla sobre lo que en un principio puedes hacer para dar a conocer tu blog.

Enlaces de Calidad hacia tu sitio Web (del blog de Google para Webmasters)

5 Grandes Razones que como Bloguero, podrías considerar para usar Google+

Hace poco más de dos años desde que fue lanzado Google+, la red social de Google, y como usuarios de Blogger, hemos visto como se ha venido integrando al servicio, permitiéndonos así difundir nuestro contenido, y a su vez, facilitándonos otra vía de comunicación con nuestros lectores.



Aún así, todavía hay usuarios de Blogger que no usan Google+, dejando pasar la oportunidad de mejorar la visibilidad de su blog en la enorme y expansiva red de Internet.



Veamos cuáles son algunas de las cosas que ofrece el servicio, y que resultan muy provechosas para ti como bloguero:

1. + Difusión de tu contenido. Gracias a la integración de Google+ con Blogger, compartir contenido con tus seguidores de Google+ es muy sencillo y prácticamente automático cada vez que publicas una nueva entrada. Una vez que compartes tus entradas en Google+, tus seguidores pueden dar un voto de aceptación o agrado a la publicación (+1), comentar, y compartirlo con sus círculos, permitiendo así su difusión.



Desde la pestaña "Google+" puedes asociar tu perfil al blog, y así enviar el contenido fácilmente, cada vez que publiques algo nuevo.  También, desde ahí  puedes crear una página en Google+ para tu blog, asociarlo a tu blog, y enviar las publicaciones a la página.

2. + Interacción con tus lectores y mayor control de las respuestas. Al usar el servicio, podrás estar en contacto directo con tus lectores/seguidores del blog, y será sencillo interactuar con ellos. Recibirás notificaciones de la actividad que se genere en cada publicación o contenido que compartas a la página de tu perfil, y por supuesto tendrás control sobre dichas notificaciones.



Además, seguramente habrá muchos blogueros que tengan presencia en Google+ con los que podrás compartir intereses comunes ;)

3. + Control del contenido que compartes con las personas. Google+ te permite agrupar a las personas en círculos, para que, de ese modo, puedas compartir con éstos el contenido que desees. De ese modo, puedes determinar cuáles círculos ven el contenido que publicas y cuáles no. Esto puede ser útil para compartir contenido exclusivo con los seguidores del blog, por ejemplo.

4. + Privacidad. La privacidad, es un aspecto que valoramos mucho

la mayoría de blogueros, así como los usuarios de las redes sociales en general. En Google+ se han establecido parámetros de configuración que te permiten definir aspectos tan importantes como determinar quién puede ver tus datos, y establecer quién puede ponerse en contacto contigo. Es posible definir si las publicaciones serán públicas o no, cada vez que publiques algo nuevo, y también, como lo mencionaba en el punto anterior podrás determinar quien(es) pueden ver el contenido que publicas.

5.Visibilidad en la red del contenido que publicas. Las publicaciones en Google+ también aparecen en los resultados de búsqueda de Google, por lo que habrá más exposición del contenido que compartas o haya sido compartido, mejorando así la visibilidad de tu sitio en la Web. El motor de búsqueda de Google permite mostrar contenido relevante en base a las recomendaciones que hayan hecho las personas que están en tus círculos, de ese modo los amigos de tus círculos verán contenido recomendado por ellos.







Así que no lo pienses más y considera usar el servicio a beneficio de tu blog y de tus lectores. Da a conocer entre los usuarios de tu blog que ya estás usando el servicio usando el gadget de seguidores de Google+ para así hacer crecer tu audiencia. Será sencillo y rápido para tus visitas o usuarios volverse seguidor de tu blog, y podrás compartir tu contenido e interactuar con ellos.



Y tú como bloguero y usuario de Google+, ¿tienes alguna otra razón por la que usas Google+?

4 Estilos Diferentes para el Gadget de Entradas Populares

Blogger nos permite agregar fácilmente un widget de "Entradas populares" y que seleccionamos desde su lista de gadgets, al querer agregar uno desde el "Diseño" de nuestro Blog.



Este gadget, como su nombre lo indica, muestra cuáles son las entradas más visitadas del blog, y puedes configurarlo para mostrar los datos que quieras en cuatro combinaciones posibles:  (1) solo el titulo de la entrada, (2) imágenes miniaturas con el título, (3) el título de la entrada con un resumen, y (4) El título de la entrada, con una imagen miniatura y un resumen de la entrada.



Este es un elemento que no puede faltar en tu blog, ya que incita a tus usuarios a que naveguen en tu contenido, lo cual puede traducirse en mayores ganancias si es que estás monetizando tu blog, pues se generaría un aumento en el número de páginas visitas, y a su vez, puede despertar el interés para que un usuario se suscriba al blog, al ver contenido interesante, por mencionar algunos beneficios.



Ya antes había compartido contigo algunos estilos para este widget, pero, había publicado aquellos con los que era posible crear galerías horizontales con las imágenes. Pues hoy compartiré contigo 4 estilos personalizados para que puedas agregarlos al blog en unos sencillísimos pasos, y en este caso, los estilos están pensados para mostrar solo los títulos de las entradas y numerando cada entrada ;)

Pasos previos: Agregar el gadget, si no lo has hecho

1. Selecciona la pestaña "Diseño" y agrega el gadget de "Entradas populares", en la sección de tu blog que deseas que aparezca, como por ejemplo en la columna lateral, haciendo click en "Añadir un gadget". 


2. Configura el widget para que muestre solo el título de la entrada. Esto lo haces evitando activar las casillas: "Imagen en miniatura" y "fragmento", tal y como se muestra en la siguiente imagen. Por tu parte, configura el resto de las opciones.
   
   
   
   


3. Una vez configurado el widget, guarda los cambios, haciendo click en Guardar, y después en guardar disposición.

Cómo agregar el CSS para crear el estilo en el widget de Entradas populares

1. Elige el estilo de los cuatro que he preparado para ti, y copia el CSS que te facilito, y que aparece debajo de la imagen que muestra el estilo.


2. Selecciona la pestaña "Plantilla" luego haces clik en Personalizar > Avanzado > Añadir CSS y ahí pegas el CSS del estilo que más te guste.
   
   
   
   
   
   
   
   


3. Una vez que agregues el CSS, guarda los cambios en "Aplicar al blog".

Y listo! ya habrás personalizado el widget de entradas populares, cuando éste solo muestra los títulos de las entradas.

Los estilos

A continuación, te facilito el CSS de cada estilo, solo elige el que más te guste y ponlo en tu blog.  Puedes ver cada uno de los estilos en acción en el siguiente blog de pruebas: http://nuevo-com.blogspot.com/

Estilo 1. Blue Ribbon

CSS

#PopularPosts1 h2{

position:relative;

right:-2px;

padding:8px 63px 6px 17px; /*Ajusta el valor coloreado de azul para extender el listón a la derecha*/

width:100%;

margin:0;

font-size:16px;

background:#3366FF;

color:#f2f2f2;

text-align:left;

text-indent:18px;

}

#PopularPosts1 h2:before{

position:absolute;

content:"";

top:33px;

right:0px;

width: 0px;

height: 0px;

border-bottom:12px outset transparent;

border-left:12px solid #003df5;

}

#PopularPosts1 h2:after{

position:absolute;

content:"";

top:-6px;

left:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-left:24px solid #fff;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:7px 0 16px 12px;

padding:10px  4px 0 5px;

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:-2px;

left:-20px;

font-size:35px;

width:20px;

color:#777; /*Color de texto*/

}



#PopularPosts3 ul li a{

display:block;

font-size:14px;

color:#333;

text-decoration:none;

transition: all .2s ease-in-out;

}

#PopularPosts3 ul li a:hover{

color:#3366FF;

margin-left:3px;

}





Nota: En este caso tendrás que ajustar el valor del padding que he resaltado de azul para que el listón llegue hasta el extremo derecho tal y como la demo.



Estilo 2. Black Ribbon

CSS

#PopularPosts2 h2{

position:relative;

padding:8px 10px 6px 10px;

width:100%;

margin:0;

font-size:16px;

background:black;

color:#f2f2f2; /* Color del titulo widget */

text-align:center;

}

#PopularPosts2 h2:before{

position:absolute;

content:"";

top:-6px;

right:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-right:24px solid #fff; /*Color del triángulo igual que el fondo*/

}



#PopularPosts1 h2:after{

position:absolute;

content:"";

top:-7px;

left:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-left:24px solid #fff; /*Color del triángulo igual que el fondo*/

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:0 0 1px 12px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:2px;

left:-23px;

font-size:35px; /* Tamaño número */

width:20px;

color:#333; /*Color de texto*/

}

#PopularPosts1 ul li a{

display:block;

position:relative;

left:-30px;

width:100%;

margin:0;

padding: 9px 3px 10px 29px;

font-size:14px;

color:#333;

text-decoration:none;

transition: all .2s ease-in-out;

}

#PopularPosts1 ul li a:hover{

color:#3366ff;

margin-left:3px;

}





Estilo 3. Metro

CSS



#PopularPosts4 h2{

padding:8px 10px 3px 0;

width:100%;

margin:0;

font-size:16px;

position:relative;

left:-20px;

display:block;

border-bottom:2px solid #ddd;

}

#PopularPosts4 ul{

list-style:none;

counter-reset:li;

padding:10px;

width:100%;

}

#PopularPosts4 li{ /*Estilos de cada elemento*/

width:100%;

position:relative;

left:0;

margin:0 0 6px 10px;

padding:4px 5px;

}

#PopularPosts4 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

top:3px;

left:-39px;

font-size:21px;

width:28px;

height:28px;

border-radius: 50%;

color:#777; /* Color de texto */

border: 2px solid #ddd; /* Color de borde círculo */

padding:0;

text-indent:9px;

}

#PopularPosts4 ul li a{

display:block;

position:relative;

left:-45px;

width:100%;

margin:0;

min-height:28px;

padding: 5px 3px 3px 39px;

color:#333;

text-decoration:none;

font-size:14px; /* Tamaño fuente de enlace */

}

#PopularPosts4 ul li a:hover{

color:#3366ff;

margin-left:3px;

}







Estilo 4.  Boxy

CSS

#PopularPosts1 h2{

padding:7px 0 3px 0;

width:100%;

margin:0;

font-size:1.3em;

text-indent:-12px;

font-size:19px;

text-align:center; /* Alineación texto título */

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-8px;

width:290px;

}

#PopularPosts1 li{ /*Estilos de cada elemento*/

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 7px;

left:-5px;

width:285px;

border:1px solid #ddd; /*Color de borde*/

}

#PopularPosts1 ul li:before{ /*Los estilos del Número*/

content:counter(li);

counter-increment:li;

position:absolute;

display:block;

top:-5px;

left:-5px;

font-size:18px;

width:14px;

margin:0 0 10px 0;

padding:4px 4px 4px 3px;

color:#333; /*Color de texto*/

text-align:left;

background:#e2e2e2; /*Color de fondo*/

text-indent:2px;

}

#PopularPosts1 ul li:after{

content:"";

position:absolute;

top:-5px;

left:15px;

width: 0px;

height: 0px;

border-top:5px outset transparent;

border-left:5px solid #aeaeae; /* color triangulo del número*/

}



#PopularPosts1 ul li a{

font-size:16px;

color:#777;

margin-left:17px;

display:block;

min-height:25px;

text-decoration:none;

padding:0 4px 3px 0;

}

#PopularPosts1 ul li:hover{

background:#f9f9f9;

border:1px solid #aaa;

}

#PopularPosts1 ul li a:hover{

color:#0174DF;



}







Notas Finales

• Todo el CSS es válido. Solo hay que mencionar que, la numeración no es visible en Internet Explorer 7, ya que esa versión del navegador no soporta propiedades que hacen que la numeración aparezca. En el caso del estilo Metro (el 3), los círculos se ven cuadrados en IE8 y versiones anteriores ya que, dichas versiones no soporta una propiedad que hace que se creen los círculos.


• Las fuentes se heredarán de la plantilla, ya que no han sido declaradas en el CSS.

Hasta la próxima ;)

Bottle Social Icon Set

Bottle Social Icons es un set gratuito de íconos de redes sociales en forma de botellas.

CARACTERÍSTICAS

Pack de 42 íconos en forma de botellas de las principales redes sociales.
Autor : Apricum
Formato: PNG.
Tamaños: 126x256 px.

Descargar

Marcado de autor de Google para SlideShare

El marcado de autor creado por Google, que nos permite mostrar la foto del autor junto a sus resultados de búsqueda y que consideramos un factor de posicionamiento, puede ser utilizado para marcar nuestros contenidos en SlideShare. De tal forma que nuestra imagen aparecerá en los resultados orgánicos de Google.

Para lograrlo debemos ir a nuestra página de SlideShare, editar nuestra cuenta y pulsar sobre Sharing o Compartir

Conectamos nuestra cuenta con la de Google Plus autorizando su acceso (esta opción solo esta disponible si tienes un mínimo de cinco seguidores)

Una vez conectada debemos ir a nuestro perfil de Google Plus, editar la sección Contribuye en

Y añadir un enlace a SlideShare como muestra la imagen

En este paso recomiendo añadir un segundo enlace como http://es.slideshare.net, por que en el caso de que tengas predeterminado el idioma como español, SlideShare redirecciona a este subdominio y de no hacerlo así, no saldrá tu foto junto a tus publicaciones.

Para verificar que hemos realizado bien los pasos, solo debemos ir a la herramienta de testeo de fragmentos enriquecidos de Google, insertar la url de cualquiera de nuestra publicaciones en SlideShare y deberemos ver que el marcado de autor esta correctamente realizado.

Un paso mas hacia el marcado de autor de nuestros contenidos...

El Camino del Éxito

¿Cuántas veces nos hemos preguntado qué deberíamos hacer para lograr el éxito en algo?, por ejemplo, lograr que nuestro blog sea exitoso...La respuesta es simple: "El trabajo duro".



Quiero recalcar algo que se menciona en el video que puedes ver al final y que definitivamente no te puedes perder:



El talento no es suficiente para lograr el éxito, ya que el trabajo duro vence al talento, cuando el talento no se está esforzando.



Esto me hizo recordar un suceso que data desde mi infancia, y que a continuación comparto contigo:



Hace años, cierto día descubrí que se me iba a dar un diploma por mérito académico. Claramente y de forma accidental, vi entre las cosas de mi maestro, el diploma con mi nombre impreso.



Cuando llego el día de la ceremonia de terminación de clases, estaba nerviosa, pues según me había enterado, recibiría tal reconocimiento. Para sorpresa mía, cuando llego el momento de entregar el susodicho diploma, éste, fue entregado a un compañero de clase. Como seguramente estarás imaginando, me desconcerté, aunque, siendo tan niña, no le di demasiada importancia al asunto y seguí con mi vida.



Al cabo de unos años, el destino puso a ese mismo maestro en mi aula de clases, ahora impartiendo clases de biología. Recordando lo sucedido, una noche después de terminar la clase, me armé de valor, y lo afronté para preguntarle sobre lo que había pasado. Quería saber qué le hizo cambiar de opinión, y porqué no me había dado el diploma a mi, si ya lo había decidido así...



Me dijo muchas cosas, pero, para ser breve, lo más relevante y que me hizo entender es que, "no había trabajado lo suficiente", que si bien era buena estudiante, pude haber hecho mejor las cosas porque tenía talento y no me esforcé lo suficiente...



Así que, nunca te confíes, y siempre da lo mejor de ti en cada cosa que hagas.



Si quieres puedes ;D



Tienes que ver este video  ¡ahora mismo! :)

Editado: decidí desde aquí contarte mi anécdota ;)

Gadget de "Perfil" Integrado con Botón de Google+

Según he comprobado, Blogger ha implementado una nueva característica al gadget de Perfil que facilita en su lista de gadgets. Se trata de un botón que permitirá que los usuarios de tu blog con cuenta en Google+ ¡puedan agregarte a un círculo fácilmente, sin tener que visitar tu página en Google+!. Viene integrado también un contador que muestra el número de personas que te han agregado a un círculo, como lo puedes apreciar en la imagen de abajo con mi perfil.

No es algo que se ha mencionado oficialmente, por lo menos no encontré nada que hiciera mención a ésto, simplemente lo vi en una de las plantillas en la que tengo agregado este gadget, ¡integrado y funcionando!. Ya me contarás si ya aparece en tu blog al usar el gadget del perfil ;)



Si eres usuario nuevo de Blogger y nunca has usado en tu blog el gadget de perfil en tu blog, permíteme decirte que este gadget muestra información sobre ti, y que tu mismo completas desde Blogger. Puedes editar los datos que deseas que aparezcan, y que están limitados a 1200 caracteres, si haces click en la sección del perfil que se encuentra ubicada en la barra superior gris, una vez que has accedido a tu cuenta de Blogger y que reconoces porque aparece tu nombre de usuario.





Para añadir el gadget de "Perfil" a tu blog, como con el resto de gadgets, vas a la pestaña "Diseño", seleccionas el lugar donde lo quieres mostrar, por ejemplo en la columna lateral, haces click en "Agregar gadget" y lo seleccionas de la lista haciendo click en el botoncito que dice "+" para que sea añadido. Después guardas los cambios haciendo click en el botón que dice: "Guardar disposición".

Una vez agregado el gadget de perfil a tu blog, éste mostrará la foto que tengas en tu perfil, los datos que hayas añadido sobre ti, y un enlace que envía a la página del perfil de Blogger.



Si actualizas tu perfil de Blogger, al de Google+, los datos que se muestran en el perfil son los que has configurado desde la página de tu perfil en Google+ y el enlace que dice "Ver todo mi perfil", te envía a la página de tu perfil en Google+, en lugar de la de Blogger y ahora, como te menciono, también aparece un botón con contador para que los usuarios te puedan agregar a un círculo.

Cómo usar esta nueva característica

Para que esta característica funcione, necesitas tener actualizado tu perfil de Blogger al de Google+. Esto lo haces seleccionando la pestaña "Google+" del panel de Blogger. Para saber cómo actualizar tu perfil de Blogger al de Google+, échale un vistazo a esta entrada donde menciono cómo hacerlo.



Una vez actualizado, simplemente agregas el gadget de perfil en la columna lateral de tu blog, en el fondo de la página o el lugar donde quieres que aparezca y ¡listo!, cualquier visita con cuenta activa en Google+ podrá agregarte a un círculo desde ahí.

Cómo hacer para que el enlace de "Ver todo mi perfil" no quede tan separado del texto

Como puedes apreciar en la primera imagen de arriba, el texto del enlace que dice "Ver todo mi perfil"  se ve muy separado del texto de la información del perfil. Si te ocurre lo mismo, una forma de solucionar ésto es poniendo un margen negativo a la sección del texto y lo harías asando este CSS:



.profile-textblock{

margin-bottom:-30px;

}





Solo editas el valor de -30 según necesites, deja "px", que significa pixeles, tal y como aparece en el código anterior. Tiene que quedar todo junto como se puede apreciar.



El CSS anterior lo pones seleccionando la pestaña "Plantilla", luego vas a Personalizar > Avanzado  > Añadir CSS y ahí lo pegas y editas. Después guardas el cambio haciendo click en "Aplicar al blog".



¿Ya usas este gadget en tu blog?, ¿el que tenga el botón de Google+ te anima a usarlo?

El mejor marketing de contenidos es la diferenciación

En Internet si hay una cosa clara es que todo es contenido, sea texto, imágenes, videos, al fin al cabo es contenido y todos hablamos sobre ello. Se habla de marketing de contenidos, contenidos relevante, de contenidos de calidad, único y siempre me pregunto lo mismo ¿eso que es?

Si unimos que se ha producido un nuevo nicho de mercado, el digital, el incremento de la demanda, miles de artículos sobre como crearlo y todo esto mezclado con los mensajes de Google, ha generado un batiburrillo sobre los contenidos que lo único que esta logrando es la degradación de los mismos.

¿no tenéis la sensación de que todo lo que leéis en la red es igual? ¿que no os aporta nada?

Esa sensación la tuve yo algún tiempo con este sitio, algo que siempre me ha apasionado, ser bloguero, se había convertido en una obligación y el resultado es que mis contenidos eran mas de lo mismo que otros muchos sitios. El motivo principal por el que había iniciado este sitio lo había perdido, la diferenciación, recordad el lema "intentamos traerte cosas que tal vez no encuentres en otros sitios"

Decidí darme un descanso, que se prolongo bastante más de lo que pensaba y hoy en día solo publico si realmente tengo algo que decir.

Me pongo como ejemplo pero lo que hice yo lo hacen actualmente la mayoría de los sitios que frecuento, apenas se diferencian sus contenidos del resto, sale un tema y todos a escribir lo mismo sobre el, cada uno con su estilo pero al final, todo es lo mismo, normalmente una traducción libre de un texto en ingles.

¿Y esto por que ha pasado?

Tanto mensajes y contenidos sobre como crearlos, enfocados casi todos a generación de marcas, visibilidad, viralidad y posicionamiento ha generado la idea de que si no lo haces así, no llegas a ninguna parte.

"Tu texto debe de tener x palabras, debes tener x% de palabras claves, usa negrita, usa imágenes, vídeos, debes compartirlo, escoger temas populares, etc."

Con tantos escribiendo sobre el marketing de contenidos al final solo se consigue contenidos calcados unos de otros.

Pero además se toman como ejemplos sitios con gran volumen de visitas, que generan contenidos de esa forma sin tener en cuenta que lo hacen desde siempre por que su objetivo es otro muy distinto, su sitio es el negocio.

Todo esto queda muy bonito sobre el papel pero ¿cual es el resultado? Pues la degradación de contenidos de las que os hablaba antes y la no consecución de los objetivos. Si estas generando contenidos donde solo plasmas el asunto, donde no opinas ni aportas nada, igual que miles de otros sitios ¿crees que conseguirás visibilidad, viralidad y posicionar?

No quiero decir con esto que no se traten los temas, claro que pueden y deben tratarse, claro que debemos pensar en posicionarlos y compartirlos, pero intentemos diferenciarnos, a esos contenidos si se les puede llamar relevantes, únicos y de calidad, al resto no.

La diferenciación también trae visibilidad y viralidad...

Sidebar deslizante (scroll) con jQuery

Hoy agregaremos un "efecto" a nuestra sidebar que servirá para que la barra lateral (sidebar) acompañe al contenido de nuestro blog mientras bajamos o subimos la página. Y con jQuery le agregaremos un toque especial a ese desplazamiento de la sidebar.

La vista previa la pueden ver en el blog de pruebas. Ahí puedes probar a subir y bajar por la página para ver el efecto.

( ↪ Ver DEMO)

Les enseñaré a implementarlo, tanto en las plantillas antiguas (clásicas) así como en las plantillas nuevas del Diseñador de plantillas.

PLANTILLAS CLÁSICAS

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

6.§ Ahora agregaremos los estilos. Para ello buscamos, siguiendo las indicaciones del paso 3.§, ]]></b:skin> y encima de éste, agregaremos lo siguiente:

#page-wrap {
width: 660px;
margin: 15px auto;
position: relative;
}

#sidebar {
width: 220px;
}

7.§ Vamos a modificar los valores de ancho (width) con los valores de nuestro blog. En primer lugar buscaremos #outer-wrapper. Debajo veremos el ancho de nuestro blog, algo así: width: 660px; Copiaremos el número (en este caso 660) y lo pegaremos en el width de #page-wrap

En segundo lugar buscaremos #sidebar-wrapper. Veremos el ancho de la sidebar de nuestro blog algo así: width: 220px; Igual que en el caso anterior, copiaremos el número (en este caso 220) y lo pegaremos en el width de #sidebar de los estilos que agregamos en el paso 6.§.

8.§ Vemos que todo esté bien y damos clic en Guardar plantilla.

PLANTILLAS DEL DISEÑADOR DE PLANTILLAS

1.§ Hacemos los pasos del 1.§ al 4.§ del apartado anterior.

2.§ Ahora agregaremos el script debajo de la librería jQuery, pero debemos de tener en cuenta los siguiente: si nuestra sidebar está en el lado izquierdo cambiaremos #sidebar-right por #sidebar-left. Si nuestra sidebar está en el lado derecho, dejaremos el código tal como está.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar-right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

3.§ Ahora agregaremos algunos estilos CSS. Buscamos ]]></b:skin> y encima de éste, agregaremos el código de abajo.

Aquí también tenemos que tener en cuenta que, si la sidebar está en el lado izquierdo, cambiamos right por left:

#page-wrap {
width: 960px;
margin: 15px auto;
position: relative;
}

#sidebar-right {
width: 310px;
}

4.§ Ahora vamos a modificar los valores width con los de nuestro blog. En primer lugar buscaremos la siguiente línea, que nos indica el ancho total de nuestro blog (en cada blog los valores pueden ser diferentes):

<b:variable default='960px' name='content.width' type='length' value='960px'/>

Compiamos el último número de la línea, no el primero y lo pegamos en el width de #page-wrap

5.§ En segundo lugar, buscaremos la siguiente línea, que nos indica el ancho de nuestra sidebar:

<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

Como en el paso anterior, copiamos el último número de la línea y lo pegamos en el width de #sidebar-right

* Para los que tienen la sidebar en el lado izquierdo, buscan la línea: <b:variable default='310px' name='main.column.left.width' type='length' value='310px'/> y copian el último valor en #sidebar-left

6.§ Finalmente, buscaremos esta línea:

<div class='column-right-outer'>

Y la cambiaremos por esta:

<div class='column-right-outer' id='sidebar-right'>

* En el caso que nuestra sidebar esté en el lado izquierdo, buscaremos esta línea:

<div class='column-left-outer'>

Y la cambiaremos por esta:

<div class='column-left-outer' id='sidebar-left'>

7.§ Damos clic en Guardar plantilla.