Por si Scriptaculous te dejó de funcionar

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:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Y cámbialo por este:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

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.

Dos nuevas aplicaciones de Google + en Blogger

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.

Consejos de Top Rank para tener un Blog exitoso

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?
© Web Buttons Inc - Fotolia.comBlog, 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

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!

¿Qué es Mejora Tu Blogger?

Mejora tu Blogger es un espacio donde estan colgados los mejores consejos de la internet sobre el ambiente blogger.
Existen decenas, quizás cientos de aficionados y profesionales en diseño web y diseño gráfico que dejan en sus webs o blogs personales infinidad de información útil para tu blog, negocio o proyecto.

¿Qué es un blog?

Empezó como una botácora personal donde la gente podría decir lo que piensa, pero ahora ha evolucionado hasta ser cualquier cosa: Una colección de imágenes, videos, o ambos, archivos públicos o privados, y páginas web sencillas como profesionales, es decir, la manipulación de la interface en blogger no tiene límites, aunque hace falta algo de conocimiento y mucha dedicación para llegar a una imagen profesional en tu diseño blogger.

¡Mucha Surte en tu Blog!

Crea una página de error 404 a tu gusto


Ya todos saben que Blogger ha incluido nuevas opciones en la nueva interfaz de Blogger. Una de estas opciones es la posibilidad de crear un mensaje personalizado en las páginas de error. Es decir, en las páginas que no existen, de modo que si un usuario ingresa a una entrada eliminada o una dirección mal escrita de nuestro blog, aparecerá un mensaje personalizado.

Pero podemos ir un poco más allá y eliminar las sidebar y otros elementos en esas páginas de error para que sólo se muestre la cabecera y el mensaje personalizado, algo como esto:



O bien, haz click en este enlace que dirige a una página que no existe.

Lo primero, para que este mensaje de error pueda aparecer es necesario que tengamos en la plantilla el INCLUDE status-message, ese es el que se encarga de mostrar el mensaje de error (y otros mensajes).
Así que si anteriormente lo eliminaste para que no aparezca el mensaje "Mostrando entradas con la etiqueta..." tendrás que ponerlo nuevamente, de lo contrario el mensaje de error no se mostrará.
Por lo tanto asegúrate de tener esta línea en tu plantilla (es necesario marcar la casilla Expandir plantillas de artilugios)
<b:include data='top' name='status-message'/>

Si no la tienes agrégala justo arriba de este código:
<data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>

Ya que lo tengas, o si ya lo tienes puesto entra en Configuración | Preferencias de búsqueda (por ahora disponible sólo en la nueva interfaz), y en donde dice Mensaje de página no encontrada personalizado haz click en Editar.

Ahí agrega este código:
<div id="error-404">
<div class="errort1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocLewIynQxSNw5gNnaRpE-M61DDhn7himLVLPjMZb0yoleEvbkk_Idomo0ulEagP80UAtfO4entKbUK7LS_dZ3sWFdPjI4oM5XMWqVEcTo9x4YspzT2TJW1Kj62_fgpLF-A_GgkcoX0M/s100/error.png" style="vertical-align:middle;"/> UPS!</div>
<div class="errort2-404">Página no encontrada</div>
<div class="errort3-404">
Parece que ha habido un error con la página que estabas buscando.<br/>
Es posible que la entrada haya sido eliminada o que la dirección no exista.
</div>
<div class="errort4-404"><a href='http://nombre-de-mi-blog.blogspot.com'>Ir a la página principal</a></div>
</div>
Ese es un código de ejemplo, en realidad tú puedes poner el que quieras y con los estilos deseados.
Ahora antes de ]]></b:skin> pega los estilos:
/* Error 404
----------------------------------------------- */
/* Contenedor general */
#error-404 {
padding:20px;
}
/* Estilos del primer texto */
.errort1-404 {
color: #fff;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del segundo texto */
.errort2-404 {
color: #fff;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del tercer texto */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:center;
font-size:20px;
}
/* Estilos del botón */
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
Con eso ya tienes el mensaje de error personalizado como la imagen de ejemplo. Ahora vamos a eliminar la sidebar y otros elementos, para ello es necesario que conozcas los IDs o clases de todos esos elementos que deseas ocultar, aquí veremos los básicos de las plantillas originales de Blogger.
Así que antes de </head> agrega esto:


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Aquí todos los elementos que queremos ocultar */
display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 960px; /* Aquí va el ancho total del blog */
margin-left: -25px;
}
</style>
</b:if>
Y listo. Ahora unos detalles a tomar en cuenta. En el código que hemos añadido en la configuración verás en color azul la URL de la imagen del ícono de error, puedes cambiarlo por otro, de hecho puedes cambiar toda la estructura de ese código por la que desees. Ahí mismo pon en donde se indica el nombre de tu blog, esto es para el botón que aparecerá sugiriéndole al lector ir a la página principal.

En los estilos están en color verde definidas las áreas de cada elemento del mensaje de error.

En el segundo código verás también dos anotaciones en color verde, estas son muy importantes, en la primera pondremos todos los elementos que queremos ocultar antes de .column-right-outer, por ejemplo, si tuvieras una sidebar que se llama right-sidebar entonces antes de .column-right-outer, agregarías:
#right-sidebar,
Todos los elementos que agregues para ocultar deberán ir separados por una coma.
Después sigue el ancho del área donde se muestra el mensaje de error, ahí debes poner la medida del ancho de tu blog, quizá tengas que poner un valor un poco más bajo, o agregar otro margen después de él para acomodarlo, eso ya dependerá de cada caso y cada quién deberá experimentar con esos valores.

Como puedes ver en cuestión de códigos es poco, casi todo será creatividad de cada uno para que la página de error sea tan simple o tan compleja como cada quien quiera.

-Vía: El Potro, en Ciudad Blogger

Como agregar un panel de acceso rápido en el blog

Algunos usuarios prefieren no ocultar la navbar porque desde ahí les parece más sencillo tener las opciones de "Nueva entrada", "Diseño" y "Salir". Sin embargo podemos tener estas opciones y otras más en alguna otra parte del blog.
En esta entrada veremos cómo poner un panel de acceso rápido a las funciones principales del blog de modo que desde el mismo blog podamos tener acceso a:

  • Crear una nueva entrada
  • Configuración del blog
  • Diseño
  • Plantilla (Edición de HTML en la antigua interfaz)
  • Moderar comentarios del blog
  • Estadísticas de visitas
  • Salir de Blogger

Pondremos todas estas opciones en la sidebar, pero como son opciones que a los lectores no le interesan haremos que sólo sean visibles para el administrador del blog, el resto de los usuarios no las verá.
El resultado será algo así: 


Lo primero que haremos será conseguir el ID de nuestro blog, ese puedes obtenerlo haciendo click en cualquier opción del blog, por ejemplo en Configuración. Una vez que hayas hecho click ahí verás en la barra de direcciones una URL, los números que están al final son el ID de tu blog.

Si usas la nueva interfaz esos números los verás en medio de la URL.
Copia la ID de tu blog, luego entra en la Edición HTML y SIN expandir artilugios busca esta línea:
<div id='sidebar-wrapper'>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea: 
<div class='column-right-outer'>
Debajo de cualquiera de ellas dos agrega el siguiente código, únicamente si usas la interfaz antigua: 
<span class='item-control blog-admin'>
<style>
.panel-de-control {padding:10px 5px;}
.panel-de-control a {color:#0489B1;}
.panel-de-control a:hover {text-decoration:underline; color:#045FB4;}
</style>
<div class='panel-de-control'>
<h2>Panel de Control</h2>
<a href="http://www.blogger.com/post-create.g?blogID=XXXXXXXXXX">Nueva Entrada</a> | 
<a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXX">Configuración</a> | 
<a href="http://www.blogger.com/rearrange?blogID=XXXXXXXXXX">Diseño</a> | 
<a href="http://www.blogger.com/html?blogID=XXXXXXXXXX">Edición HTML</a> | 
<a href="http://www.blogger.com/moderate-comment.g?blogID=XXXXXXXXXX">Moderar Comentarios</a> | 
<a href="http://www.blogger.com/stats2.g?blogID=XXXXXXXXXX">Estadísticas</a> | 
<a href="http://www.blogger.com/logout.g">Salir</a> 
</div> 
</span>
Y si usas la nueva interfaz entonces el código que deberás añadir es este: 
<span class='item-control blog-admin'> 
<style>
.panel-de-control {padding:10px 5px;}
.panel-de-control a {color:#0489B1;}
.panel-de-control a:hover {text-decoration:underline; color:#045FB4;}
</style>
<div class='panel-de-control'>
<h2>Panel de Control</h2>
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#editor">Nueva Entrada</a> | 
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#basicsettings">Configuración</a> | 
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#pageelements">Diseño</a> | 
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#template">Plantilla</a> | 
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#publishedcomments">Moderar Comentarios</a> | 
<a href="http://www.blogger.com/blogger.g?blogID=XXXXXXXXXX#overviewstats">Estadísticas</a> | 
<a href="http://www.blogger.com/logout.g">Salir</a>
</div>
</span>
Ya sólo cambia las XXXXXXXXXX por la ID de tu blog que copiaste previamente, y ten cuidado de no eliminar nada, ni una comilla ni ningún otro caracter. Cuando termines guarda los cambios y listo.
Ojo, en la Vista Previa no lo verás, tendrás que guardar los cambios para poder verlo.

Si usas una plantilla personalizada es posible que no encuentres las líneas donde se tiene que poner, en esos casos y/o en los casos en los que el panel de acceso rápido se quiera poner en otra parte del blog, puedes poner el código dentro de un gadget HTML/Javascript, pero no le pongas título a ese gadget, si lo haces entonces condiciona ese gadget para que sólo sea visible para el administrador.

De esta manera podrás tener un panel de acceso rápido a las funciones del blog y sólo estará visible para el administrador del blog. Así no tendrás que tener siempre abierta la página del blog y la página de Blogger al mismo tiempo.

Vía | BloggingTips | Ciudad Blogger
Related Posts Plugin for WordPress, Blogger...