Blogger y la nueva opción: deshabilitar la navbar

Hace unos días, Felipe Calvo me preguntaba si sabía que ya era posible deshabilitar totalmente la navbar de Blogger desde la misma ventana de diseño y confieso que no lo sabía.

Es que uno es un animal de costumbres y desde hace años, lo primero que se hace en un blog es eliminarla manualmente, agregando el CSS correspondiente aunque ... en realidad nunca se elimina sino que se la mantiene oculta con lo cual, el código, que Blogger agregaba de modo automático, seguía siendo parte del código fuente de la página. Ahora, con esta opción, ese código desaparece casi por completo.

El cambio, no sólo se ve allí, también se ve en la plantilla misma que ahora incluye una nueva sección:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'/>
</b:section>

Y si desplegamos el contenido, veremos todo el código que antes se agregaba de modo directo.

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'>
<b:includable id='main'><script type=&quot;text/javascript&quot;>
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src=&quot;//www.blogger.com/navbar.g?targetBlogID=XXXXXXXXXXXXXXXXX&amp;amp;blogName=NOMBRE&amp;amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;amp;navbarType=BLUE&amp;amp;layoutType=LAYOUTS&amp;amp;searchRoot=http://MIBLOG.blogspot.com/search&amp;amp;blogLocale=XX_XX&amp;amp;v=1&amp;amp;homepageUrl=http://MIBLOG.blogspot.com/&amp;amp;vt=XXXXXXXXXXXXXXXXX&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; height=&quot;30px&quot; width=&quot;100%&quot; id=&quot;navbar-iframe&quot; allowtransparency=&quot;true&quot; title=&quot;Navegación y búsqueda de Blogger&quot;></iframe>
<div></div><script type=&quot;text/javascript&quot;>
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>

Si deshabilitamos la navbar, el código de la plantilla sigue allí pero ya no se ejecuta y, obviamente, lo primero que uno piensa es, genial, la deshabilitamos y listo pero ... Blogger es Blogger y, por lo que he visto, cuando hacemos eso, desaparecen los íconos de edición rápida del blog.

¿Será un error? ¿Será que funciona así? En todo caso, hay que tener cuidado porque Blogger es mudo y jamás informa de estos cambios porque, claro, nosotros somos adivinos

Repost.us es un servicio que permite que los visitantes, incluyan entradas de nuestro blog en otros sitios, de manera sencilla y sin los conflictos que suele traer este tipo de copia porque lo hace generando un iframe [más información].

Algunas de las ventajas que dice ofrecer el sistema:

• es un enlace a la entrada original y evita el contenido duplicado.
• si la entrada se actualiza, el servicio actualizará todos los iframes insertados
• se puede personalizar y definir si se verán completos o no
• es posible excluir sitios o permitir que sólo algunos puedan utilizar el sistema
• permite agregar anuncios publicitarios

Para utilizarlo, se debe crear una cuenta gratuita y luego, ir completando las opciones; básicamente, establecer el sitio web donde queremos aplicar el sistema y luego, copiar y pegar el código que os dan que tiene dos partes; la primer, la pondremos antes de <:/head>

<script src='http://static.1.rp-api.com/rjs/repostus.js' type='text/javascript' />
<meta content='0000000000000000000' name='RepostUsAPIKey' />

y la segunda en donde quisiéramos mostrar alguno de los botones disponibles que, normalmente, sería en alguna parte del footer de las entradas:

<a class='rpuRepostUsButton' expr:href='&quot;https://secure.repost.us/syndicate/create?url=&quot; + data:post.url'>
  <img title='Repost This' alt='Repost This' src='http://secure.repost.us/images/button-hrz-sml.png'/>
</a>

El servicio puede agregarse a Blogger sin problemas y quienes usan Wordpress disponen de un plugin que simplifica la tarea.

En general, es conveniente ingresar a la opción llamada Selectors y allí, agregar las clases donde se encuentran nuestras entradas:

Article Title: .post-title
Article Boded .post-body

la siguiente página, nos permitirá verificar si todo es correcto, probando con cualquier URL de nuestro blog.

REFERENCIAS:labrujulaverde.com

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado

Son muchos los que preguntan algo cuya respuesta parece no satisfacerlos o se niegan a aceptarla, probablemente, porque si uno busca en la web, verá cientos de artículos explicando como hacer lo que yo digo que no puede hacerse o, mejor dicho, lo que digo que NO DEBE hacerse y, en este caso, no es un tema de opiniones personales y discutibles, es algo elemental.

La pregunta repetida es ¿cómo restringir el acceso a determinadas páginas? ¿cómo permitir la descarga de ciertos archivos a determinados usuarios? ¿cómo hago para agregar una contraseña a mi blog de Blogger?

Y la respuesta es sencilla, simplemente NO hay manera de hacer eso porque el único lenguaje que podemos usar es JavaScript y con ese lenguaje no existe ninguna forma segura de establecer una contraseña por una razón básica: el código es visible y por lo tanto, cualquiera puede verlo. Es lo mismo que escribir una pregunta y dejar visible al respuesta.

¿Se puede hacer? Si, claro pero ¿para qué? Es completamente inútil. El manejo de contraseñas requiere de lenguajes que se ejecuten en el servidor y no en el navegador.

¿No están convencidos? Usen CTRL+U para mirar el código fuente de los "ejemplos prácticos" que se ofrecen.

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

jQuery ProQuo es un plugin que permite convertir cualquier parte de una página web en un contenido "compartible" en Twitter.

Obviamente, requiere el uso de la librería jQuery y el script es bastante pequeño. Para usarlo, basta agregarlo antes de </head> y luego, definir la etiqueta y/o clase a la que se aplicará; por ejemplo, si quiisera que el contenido que de una etiqueta cuya clase es compartir fuera "tweeteable", debería llamar a la función de este modo:

<script>
$(document).ready(function(){
  $('.compartir').proQuo();
 });
</script>

Y luego, la podría usar en cualquier etiqueta y se agregaría un enlace con el texto Tweet this al final de ella:

<p class="compartir"> ....... cualquier cosa ....... </p>

Algunas opciones extras nos permiten usar el botón clásico de Twitter en lugar de ese texto:

$('.compartir').proQuo({useTwitterButton: true});

agregarle comillas:

$('.compartir').proQuo({ useTwitterButton: true, addCurlyQuotes: true });

establecer el texto a mostrar:

$('.compartir').proQuo({ tweetLabel: 'mi texto' });

o incluso personalizar algunas de las funciones propias de Twitter, detalles estos que se explican en los ejemplos que hay en al página del desarrollador.

No hay limitaciones en cuanto a la cantidad de tipos definidos así que pueden agregarse varios, cada uno con sus opciones propias:

$('.compartir').proQuo({ useTwitterButton: true });
$('.OTROcompartir').proQuo({ tweetLabel: 'mi texto' });

Y luego, si queremos, bastaría darle algún tipo de formato especial a esas clases para hacerlas evidentes o resaltarlas.