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=11223344Con 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<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>
FireScope es una extensión para Firefox que se integra con Firebug y que amplia las posibilidad de esa extensión imprescindible, agregándole referencias HTML y CSS.
