Mejora Tu Blogger

Estructura de un blog, por Vagabundia

Últimamente han aparecido nuevas plantillas para Blogger y parece que empieza a romperse el hielo. Hasta no hace mucho, estábamos muy limitados pero, por suerte, los usuarios están atreviéndose más y más.

Junto con esto, hay algo que no me gusta demasiado y es que algunas de esas plantillas no respetan ciertas características de las originales. Muchas de ellas son transcripciones "literales" de plantillas de WordPress con secciones enteras de códigos inútiles. Uno de los casos típicos son los menues horizontales donde aparece una solapa destacada, la que está en uso pero nunca cambia porqueBlogger no admite ese tipo de código.

También hay una diferencia en los nombres genéricos de los diferentes bloques y eso hace que mucha gente no pueda aplicar hacks o trucos ya que la mayoría de ellos hacen referencia a sectores específicos. Por supuesto, igual puede hacerse pero, es más engorroso.

A esto, se le suma un problema que, aparentemente tienen algunas plantillas y sobre el que he recibido varias consultas de manera casi simultánea por lo que me pareció razonable dar una orientación más general ya que parece que es algo relativamente común.

La pregunta es más o menos esta: en la ventana Diseño no aparece la opción Agregar un nuevo elemento a la sidebar o al header ¿cómo puedo restaurarlo?

Lo primero que debemos saber es que el cuerpo de la plantilla (todo lo que está entre <body> y</body> está dividido secciones y que cada sección contiene elementos (widgets). Esas secciones son áreas generales del blog (sidebar, footer, header, etc); y los elementos son áreas internas (imagen, links, html, feeds, etc).

Cada sección comienza con la etiqueta <b:section> y termina con la etiqueta </b:section>, por ejemplo, estos son los códigos por defecto:

el header
<b:section  class='header' id='header' maxwidgets="1" showaddelement="no">
   .......
</b:section>

el área de posts
<b:section class='main' id='main' showaddelement='no'>
   .......
</b:section>

la sidebar
<b:section class='sidebar' id='sidebar' preferred='yes'>
   .......
</b:section>

el footer
<b:section class='footer' id='footer'/>
   .......
</b:section>

Esta etiqueta sólo acepta los siguiente parámetros:

id es obligatorio y debe ser un nombre único (letras y/o números)
class es opcional, por defecto, los nombres de las clases son simples y evidentes (navbar, header, main, sidebar, footer).
maxwidgets es opcional e indica el número máximo de elementos que puede contener la sección (si no se especifica, no hay límite)
showaddelement es opcional y puede ser yes o no (por defecto yes) e indica si existirá la opción deAgregar nuevos elementos desde la primera solapa de diseño.
growth es opcional y no es utilizado habitualmente. Puede tener dos valores, horizontal o vertical(el valor por defecto es vertical). Con esto, determinamos si los elementos dentro de una sección se ubicarán uno al lado del otro o uno debajo del otro.

Los problemas al intentar agregar un elemento pueden surgir porque el parámetro maxwidgets esté definido (esto es lo que ocurre por defecto con el header) o showaddelement tenga el valor no.

Cuando el navegador nos muestra el blog, todas las etiquetas b:section son reemplazadas por etiquetas div y los únicos parámetros visibles serán id y class, los otros, son datos internos que utiliza Blogger.

Algo que también consultan con frecuencia es que han intentado poner un código personal dentro de una sección y Blogger ha indicado un error. Esto es así porque dentro de una sección sólo puede haber elementos y no pueden contener otro tipo de código ni otra sección.

Si vamos a la Edición HTML de la plantilla y NO expandimos los elementos, veremos muy claramente la forma en que está dividido el blog:

.......
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>
</b:section>
   .......
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
   .......
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed1' locked='false' title='Últimos posts' type='Feed'/>
<b:widget id='HTML1' locked='false' title='ESTADISTICAS' type='HTML'/>
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVOS' type='BlogArchive'/>
</b:section>
   .......
<b:section class='footer' id='footer'>
</b:section>

Enlace

Creativo Menú Vertical Drag and Drop con JQuery

22:59 DragandDrop, Favoritos, JQuery, Menús No comments

jGlideMenu es un menú vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero además, se puede navegar a través de sus pestañas de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran número de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.

Para que entiendas mejor este menú hay que verlo en acción en este blog de pruebas, ahí puedes arrastrar el menú, navegar en sus pestañas, y cerrarlo.

Para poner en tu blog este menú vertical, primero descarga este archivo, descomprímelo y súbelo a un hosting.

Luego ingresa a la Edición HTML de tu plantilla y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : true
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
]]></b:skin> los estilos:

.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamaño de la descripción */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripción */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPzb9Y6yZds00-Yen-ZQtGFbDbc-x1dy1REhfmGYPh74cFq32q6Mu5fAfcqD-j7pM_P6CMSFtijI0wnTBEx1GSKoKlKJ4LLUDhJyMWgBwW1j_suaQz85-Er-21Dhdsd5Ai1mg5EtlSi0/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atrás" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atrás" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}

Ahora en un elemento HTML/Javascript pega la estructura del menú:

<div class="jGM_box" id="jGlide_001">


<ul id="tile_001" class="jGlide_001_tiles" title="Menú" alt="Descripción del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>


<ul id="tile_002" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>


<ul id="tile_005" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>

</div>

Agrega las URLs de los enlaces y los nombres de las pestañas y listo.
Si quieres agregar más enlaces al primer nivel añade en esa área otra línea como esta:

<li><a href="URL del enlace">Enlace 12</a></li>

Si quisieras que el enlace tenga otro nivel entonces la línea será así:

<li rel="tile_0010">Enlace 5</li>

Luego en el área del segundo o tercer nivel agregarías un fragmento así:

<ul id="tile_0010" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>

Aquí hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre serán únicos.

Sí, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.

En el área de los estilos están las partes que podemos personalizar. Si quisieras que el menú esté estático, es decir, que esté en la sidebar y no se arrastre, entonces elimina del primer código el script que está en cursiva. Y de los estilos elimina esta parte:

position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */

Cuando sean muchos enlaces entonces aparecerán unas flechitas, pasando el cursor sobre ellas se mostrarán el resto de los enlaces ya sea hacia arriba o hacia abajo.

A lo largo de la estructura del menú verás que puedes cambiar el nombre Menú así como las descripciones.

Es un menú con jQuery así que ya saben que hay que tomar en cuenta la versión que sea sólo una, y la compatibilidad con Scriptaculous.

Vía | Sonicradish y Ciudad Blogger

Crear retazos de textos entrecomillados

23:19 Entrecomillados, Texto

Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Ahora no nos limitaremos tanto, y usaremos las pseudoclases :after y :before para que losbloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Además usaremos un poco más de CSS para hacerlos más vistosos.

La pseudoclase :before nos ayudará a poner "algo" antes del bloque entrecomillado, mientras que:after lo pondrá después.

¿Y qué podrá? Aquí entra la propiedad content a echarnos la mano, podremos usar comillas o imágenes para darle estilo a nuestro bloque.

El código base para entender de lo que hablamos es este:

.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

Ahí indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: “
Y al final del bloque usaremos la comilla de cierre \201D que es esta: ”
También podemos usar open-quote y close-quote en su lugar.

.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

O bien, una imagen, en la cual la primera sería la imagen de la comilla de apertura y la segunda sería la imagen de la comilla de cierre:

.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:

.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:

.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:

.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotación */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:

.post-body blockquote {
background:#CEECF5; /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrwe1lAQNiMBoaTTS_jWLQUK1Ue-4kh0XuFSMLU239ivoKFulC5hJrbfcDT9iCZcPAfLBjmcisnFrQj4foA5CxTqjHP9xeXVw1pXFErR-yK1m7zQypvVIavq3UeZdvQD-wHCnqV_an6s/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsv3G9diX0ZmEbtNEY8o0OBGC83BDdQudkxHxbYLnP4kxZL3rEnpjqnlid_QJlUsMi4IVwQC0TCX2MShN_Tqkv4tET0eS5XqzOoCsG3thZuS3d6J0CCFauwuOm0VAXHSCAqd3FuFsgZs/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

Cualquiera de los códigos anteriores los puedes poner en sustitución de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde están las anotaciones del área a la que corresponde cada estilo.
En el caso de las comillas verás esto:

font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;

font-family es el tipo de fuente, font-size el tamaño de la comilla, font-weight lo pone en negrita con la declaración bold, line-height es el espacio entre líneas, vertical-align es para alinearlo verticalmente, ypadding-top el espacio respecto a la línea de arriba.

Ten en cuenta que algunos de estos estilos sólo se verán en navegadores modernos -ya sabes por cuál lo digo- , pero en el resto se ve perfectamente bien.

Por si Scriptaculous te dejó de funcionar

22:58 Scriptacolous, Widgets No comments

Desde hace un par de días a algunos les dejó de funcionar todo lo que requiere de la libreríaScriptaculous y Prototype.

Al parecer ha sido por una actualización de estas librerías que regularmente usamos desde las Librerías API de Google.

Si usas Scriptaculous y te ha dejado de funcionar busca en tu plantilla este código:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Y cámbialo por este:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

Con ese cambio en el script deberá funcionar nuevamente todo lo relacionado con Scriptaculous y Prototype.

Gracias a AdelinaBasquet U.V.V.A. por el aviso.

Fuente: Ciudad Blogger

Dos nuevas aplicaciones de Google + en Blogger

22:47 Google+ No comments

Blogger sigue actualizándose camino a su total integración con Google Plus, esta vez con dos nuevos componentes que pueden ayudar a dar visibilidad a lo que allí escribimos.

Por un lado ofrecen la posibilidad de añadir un botón “+1″ al blog como un todo, independiente del “+1″ de cada artículo, algo que puede ayudar a divulgar el blog entre los contactos y mostrar dicha recomendación en los resultados de la búsqueda de Google, como ya comentamos hace algunas semanas.

Por otro lado existen nuevos componentes que pueden ser integrados para facilitar la inclusión de nuestros blogs en los círculos de los contactos dentro de g+, con varios formatos para adaptarse a la estética de cada bitácora.

Aún falta mucho camino por recorrer para que Blogger sea tan flexible como un WordPress hospedado en un servidor propio, pero hay que reconocer que en los últimos meses se están esforzando para renovar la plataforma (recordad la mejora presentada hace unos días para webmasters) y volver a capturar el interés de los blogs, tanto profesionales como personales.

Vía Blog de Blogger

Consejos de Top Rank para tener un Blog exitoso

21:30 Artículos, SEO No comments

Que duda cabe que cualquier contenido se transforma en calidad al ser promocionado por las comunidades. Seguro que todos hemos vivido la experiencia asombrosa de comprobar cómo, sin razón aparente, un contenido desata la acción social y se transforma en el punto de origen de numerosos hilos de conversación. ¡Lograr esto con un contenido es el punto de partida para el crecimiento! No debemos olvidar que la acción social guarda el secreto del éxito que permite el impacto en las emociones.

Pero… ¿cómo se logra mantener el dinamismo, la interactividad y la utilidad, con el contenido de nuestro blog? ¿Cómo logramos aumentar la conversión, la comunidad y la fidelización de nuestros clientes?

Blog, alimento de las redes ¡hay que aprovecharlo!

Para empezar debemos tener muy en cuenta que el blog es el punto de encuentro de la marca con su comunidad, el contenido de nuestro blog es el alimento de la acción social de nuestra comunidad. La clave es mostrares empático, escuchar activamente, interactuar con nuestros seguidores y analizar las métricas, en todo ello encontraremos las respuestas para mantener una estrategias d marketing de contenidos actual, dinámica y concordante con las necesidades de nuestros clientes.

Identificación de las carencias de nuestros clientes

La clave para lograr un blog dinámico e interactivo, específicamente si estamos comenzando, las encontramos en el estudio previo tanto de nuestros clientes como de nuestra competencia, identificar qué les falta a nuestros clientes potenciales, es indispensable para captura su atención.

De igual forma, la escucha activa nos permite identificar aspectos en los que los clientes no han encontrado respuestas. ¡Y finalmente, no apartarse de la vertiente pedagógica el consumidor hoy está ávido de información!

Las palabras, clave para la construcción de comunidad.

Es bien cierto que el uso eficiente de las palabras que definen el mensaje de nuestra marca, es un gran aliado de nuestro SEO, sin embargo conviene no confundir los conceptos, las redes sociales son plataformas pensadas para consolidar vínculos. ¡La clave está en dar respuestas a las necesidades que nuestros seguidores tienen sin satisfacer, es así como se producirá el impacto que favorece el recuerdo y la conversión!

Ser genuinos, una consigna

Entregar recursos, elaborar guías operativas, entregar en definitiva contenido original y único en el que subyazca la opinión única, respaldada y eficiente, del autor, es el camino más directo para generar acción social y dinamismo en torno a nuestra marca. No nos olvidemos de hablar con nuestros seguidores, a diario ¡es el camino más directo hacia un feedback eficiente!

Acción social, indispensable para innovar

El camino más directo para identificar qué necesidades de contenido tienen nuestros clientes potenciales, lo encontramos en la acción social. Participar en los grupos de Linkedin, los hilos de conversación en torno a los re-tweets o los círculos en Google + es el camino más rápido hacia la identificación de necesidades.

Si buscamos que nuestros seguidores interactúen con nosotros, no debemos alejarnos de las premisas fundamentales que sustentan y definen al nuevo liderazgo, sinónimo indiscutible de marcas referentes, influyentes y en constante proceso de crecimiento. Pregunta, interésate por la opinión y las reacciones de tus seguidores frente a un contenido.

Invitar a tus lectores a ser parte activa de tus procesos creativos es el canal más eficiente para alimentarnos de las necesidades por satisfacer de nuestros seguidores, ellos estarán felices (emocionados) al comprobar que tu marca da respuesta a aquel tema específico que no había sido satisfecho y nunca más se olvidará de visitar nuestro sitio, diariamente. ¡Ya podemos ir pensando en aprovechar la retroalimentación como variable indispensable en la fórmula de construcción de la influencia, visible, cuantificable y explícita a través de nuestro blog!

Es evidente que, ortografía, calidad, capacidad de síntesis, ideas fuerte claras, mensajes concretos y coherencia entre el mensaje y las acciones, son variables indispensables para considerar el contenido de tu blog de alto impacto y susceptible de ser considerado un referente.

Y vosotros, ¿cuáles son las acciones que mejor os han funcionado en la construcción de un blog dinámico e interactivo? Os dejo con un interesante artículo publicado en el blog de Toprank, donde se analizan las claves para lograr el dinamismo de un blog a través de una serie de preguntas y respuestas de interesante análisis.

Agregar un Sidebar doble debajo de la Sidebar en Blogger

13:52 Diseño, Dividir el Sidebar, Plantillas, Sidebar No comments

Artículo sin desperdicio y muy muy claro, más fácil la explicación, imposible. Tomado de TodoBlogger.

Un ejemplo terminado esta aqui

Una cosa que me han preguntado bastante por msn y por email es como dividir la sidebar de nuestro blog en dos. Hoy les voy a enseñar como tener una sidebar doble debajo de la sidebar de nuestro blog. No es muy dificil, pero les recomendaría que presten mucha atención a los siguientes pasos:

4003229623 Sidebar doble debajo de la sidebar en Blogger

[1] Para empezar vamos a Diseño > Edición de html y buscamos #sidebar-wrapper, deberías encontrar algo como esto (lo rojo puede varior según las modificaciones que hayamos hecho antes):

#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[2] Justo debajo del código presentado anteriormente debemos pegar lo siguiente:

#sidebar-wrapper-nueva {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

[3] Modificamos lo que está en rojo por el ancho de nuestra sidebar. Por ejemplo, si nuestra sidebar tiene un ancho de 200 px, cambiamos lo que está en rojo por el número 200.

[4] Ahora busca en tu plantilla <div id='sidebar-wrapper'> y deberás ecnontrar algo como esto:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

[5] Debajo pegamos lo siguiente:

<div id='sidebar-wrapper-nueva'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section><b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>

Con esto ya será suficiente para que tengamos nuestra sidebar doble debajo de la sidebar común de nuestro blog. Un saludo.

Nota: Debemos tener en cuenta que si el espacio de nuestra sidebar es muy pequeño, el diseño de nuestra sidebar dividida en dos será un poco feo.

Y no te desesperes si no observas el cambio a la primera, ve a edición de Diseño y encontrarás las dos nuevas minicolumnas.

Muchas gracias a TodoBlogger!

Mejora Tu Blogger

Estructura de un blog, por Vagabundia

Creativo Menú Vertical Drag and Drop con JQuery

Crear retazos de textos entrecomillados

Por si Scriptaculous te dejó de funcionar

Dos nuevas aplicaciones de Google + en Blogger

Consejos de Top Rank para tener un Blog exitoso

Agregar un Sidebar doble debajo de la Sidebar en Blogger

Sígue las publicaciones en Twitter

Mejores Maestros Blogger

Etiquetas

Archivo del blog