Accesos al panel de Blogger desde el blog

Cuando estoy haciendo modificaciones en la plantilla o ajustando algo, me molesta mucho que aparezcan esos iconitos de edición debajo de cada elemento. Tampoco me gusta verlos cuando navego el blog, me distraen.

Y sin embargo, son útiles, son los que nos permiten editar rápidamente la plantilla y Blogger los agrega con una línea de codigo:

<b:include name='quickedit'/>

que luego, al crear la página, se transforma en un enlace con una imagen:

<span class="item-control blog-admin">
  <a class="quickedit" ....... >
    <img src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" />
  </a>
</span>

Muchas veces, lo que hice fue eliminarlos para poder tener una vista más despejada pero no es una buena solución. Otra alternativa que intenté, fue usar el CSS para ocultarlos:

a.quickedit {display: block !important;}

Tampoco es una solución aceptable. Lo ideal, sería poder ocultarlos o mostrarlos con un simple click desde el mismo blog y eso es posible gracias a un script que nos permite cambiar las propiedades de una clase CSS por otra.

Entonces, se me ocurrió que podía agregarse la opción a un widget que explicaba El escaparate de Rosa y que nos permite tener un acceso rápido a nuestro panel de Blogger ¿Para qué serviría este widget?

Cuando eliminamos la Navbar, muchos usuarios se enfrentan con un problema: no saben cómo ingresar a su blog. Obviamente, basta tener la dirección en los marcadores pero, sería bueno tener un acceso directo a las distintas opciones del panel y que esas opciones sólo sean visibles al administrador del blog.

Para esto, lo que necesitamos conocer es el número de identificación del blog y eso podemos averiguarlo en el mismo panel de control, mirando la URL que se muestra en el navegador; por ejemplo, desde Edición de entradas veríamos algo así:

http://www.blogger.com/posts.g?blogID=11223344

Con ese número, podemos contruir los diferentes enlaces que queremos incluir:

Acceso al inicio de Blogger:
<a href='http://blogger.com/home'>Acceder</a>

Acceso al inicio de Blogger Draft:
<a href='http://draft.blogger.com/home'>Blogger Draft</a>

Acceso a Edición de entradas:
<a href='http://www.blogger.com/posts.g?blogID=numeroIDblog'>Edición de Entrada</a>

Crear una nueva entrada:
<a href='http://www.blogger.com/post-create.g?blogID=numeroIDblog'>Nueva Entrada</a>

Acceso al Panel de Configuración:
<a href='http://www.blogger.com/blog-options-basic.g?blogID=numeroIDblog'>Configuración</a>

Acceso al Panel de Diseño:
<a href='http://www.blogger.com/rearrange?blogID=numeroIDblog'>Diseño</a>

Acceso al Panel de Diseño | Edición HTML:
<a href='http://www.blogger.com/html?blogID=numeroIDblog'>Edición HTML</a>

Acceso al Panel de Diseño | Edición HTML con los artilugios expandidos:
<a href='http://www.blogger.com/html?blogID=numeroIDblog&tpl=true'>Edición HTML expandido</a>

Salir de la cuenta:
<a href='http://www.blogger.com/logout.g'>Salir</a>

Y si queremos acceder a las mismas opciones pero en Blogger Draft, las direcciones son similares, sólo debemos cambiar:

http://www.blogger.com/

por:

http://draft.blogger.com/

¿Cómo lo insertamos y dónde? Eso es un problema de gustos personales; lo más sencillo es colocarlo en un elemento HTML en la sidebar, en el header, en el footer o, simplemente, agregar el código directamente en la plantilla donde se nos ocurra, recordando siempre que será invisible para cualquiera excepto para el administrador o los administradores del blog.

El código básico sería este:

<span class='item-control blog-admin'>
  ... y aquí ponemos los enlaces ...
</span>

En lo personal, lo he puesto debajo del header, justo antes de <div id='content-wrapper'> de este modo:

<div class='panelAdministracion'>
  <span class='item-control blog-admin'>
    <a href='http://draft.blogger.com/home'>Blogger Draft</a> | 
    <a href='http://www.blogger.com/posts.g?blogID=numeroIDblog'>Edicion Entradas</a> | 
    <a href='http://www.blogger.com/blog-options-basic.g?blogID=numeroIDblog'>Configuración</a> | 
    <a href='http://www.blogger.com/rearrange?blogID=numeroIDblog'>Diseño</a> | 
    <a href='http://www.blogger.com/html?blogID=numeroIDblog'>Edición HTML</a> | 
    <a href='javascript:void(0);' onclick='loopCSSChange(document,"quickedit","quickeditNO");'>quickEdit OFF</a> | 
    <a href='javascript:void(0);' onclick='loopCSSChange(document,"quickeditNO", "quickedit");'>quickEdit ON</a>
  </span>
</div>

Allí, ya están incorporadas las funciones para el script que debemos agregar antes de </head>:

<script type='text/javascript'>
loopCSSChange = function (el, class, newclass) {
   for (var x=0;x&lt;el.childNodes.length;x++) {
        loopCSSChange(el.childNodes[x], class, newclass);
  }
    if (el.className==class) el.className=newclass;
  }
</script>

La función cambia una clase (claseVIEJA) por otra (claseNUEVA):

loopCSSChange(document,"claseVIEJA","claseNUEVA");

Así que, por último, agregamos las definiciones CSS de esas dos clases, la que muestra el ícono y la que lo oculta:

<style type='text/css'>
  /* las clase a permutar */
  .quickedit {display: block !important;}
  .quickeditNO {display: none !important;}
</style>