JMiur [E]

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>

56 comentarios:

Anónimo  

Inteligente, muy inteligente.

Responder
Shark_Bloody  

Mas que util JMiur! :D

Ya que esta te queria preguntar algo, hace un rato estuve midiendo el tiempo de carga de mi blog con Pingdom Tools y descubri que blogger carga un script para los widgets ? :O

es este: http://www.blogger.com/widgets/3280415284-widgets.js

¿Sabes para que sirve? ¿Si no es indispensable, como lo saco?

Responder
PedroX  

Hola JMiur, esta vez escribo para preguntarte si te habias dado cuenta de esto:

Resulta que inserte un video a uno de mis blogs y de pronto se me ocurrio darle a el boton para ver el codigo de Insertar y me salio ESTO. No se si ya tiene tiempo ahi o es nuevo.. ¿Que sabes tu de eso?.. Ah y creia que solo salia si habia iniciado sesion en YouTube pero no es asi.. Tambien sale si no estas "logeado"..!!

Responder
Gem@  

Ya estás más satisfecho sin las herramientas :)
Muy buena tu investigación.

Responder
JMiur  

Sharck_Bloody: Ese es uno de varios scripts que agrega Blogger y que hacen quefuncione el sistema. No pueden eliminarse.

Pedro X: Algo leí de que YouTube había agregado una posibilidad de ver los videos en alta resolucion (HD), imagino que es ese botón.

Así, estoy feliz de haberme deshecho de ese COSO :D

Responder
kenneth978  

EXCELENTE E MUY INGENIOSO:D...yo USABA el logotipo de blogger para acceder al escritorio y de ahi brincaba a las demas funciones(diseño,crear,editar entradas, etc, hasta accedia a mi cuenta y de ahi al gmail o al reader...pero con este truco lo elimine por completo...ahora solo pincho a donde quiero ir en un solo paso, ademas hasta le coloque un enlace hacia el reader y lo bueno que solo lo vemos los administradores...lo de incrustarlo a la plantilla sera para despues con mas calma...Saludos y gracias por este truco...

Responder
Antonio Martín Bardán  

Hola JMiur.
Soy muy ignorante en estos temas y necesito su inestimable ayuda. Tengo un blog en Blogger y la URL que se generó fue en base a mi nombre de usuario. He observado que la mayoría tiene su URL con el nombre de su blog, y quisiera yo hacer lo mismo. Actualmente la dirección de mi blog es: http://dunsany8.blogspot.com y quiero convertirla en: http://cuaderno-nocturno.blogspot.com que es el nombre de mi blog. ¿Es esto posible?
En mi cuenta de Google/Blogger no encuentro esa opción; puedo cambiar ciertos datos, como la contraseña, y poco más.
Le agradecería mucho que me indicara si se puede hacer y cómo.
Un saludo de Antonio.

Responder
Anónimo  

:P ohhh yo le llamo huesitos:P, ingenioso...JM no se me ocurre nada de esto!!!...mis besos!!!

Responder
Deybi  

Hola JMiur.

Al fin una manera más comoda y elegante, porque ya lo tenía en el footer y era medio pesado tirarse hasta el fondo del blog :D.

Responder
Antonieta H.  

ya lo habia visto donde rosa y lo tengo pero en la parte de abajo... un día de estos pruebo poniendolo debajo de la cabecera aunque a mi el destornillador no me molesta :P

Responder
JMiur  

Antonio: la URL del blog no puede cambiarse. Una vez creado, no hay solución. Sólo podría exportarse el blog, crear otro y allí, al crearlo, colocar otra URL pero, eso significaría perder la indexación, visitas, etc.

Me resultó cómodo eso de eliminar el iconito, realmente, me molestaba verlo. Manías que tiene uno :D

Responder
Anónimo  

ante todo Disculpas.!!.soy nuevo en esto. Instalé barra menú en pagina principal.por ejemplo: Inicio / Peliculas / Musica, etc.como hago para que por ejemplo al oprimir botón "Música", me derive a una página nueva dentro del blog, sin tener que crear un nuevo blog para ese rubro música. y quiero enviar todas las entradas de página principal a otra página (Open 24hs) Mi URL es www.capitanphantom.blogspot.com. Muchas gracias por la paciencia.!!

Responder
JMiur  

Colocando en ese enlace la URL de la dirección a donde quieres ir.

Puede ser un post:
http://capitanphantom.blogspot.com/2008/08/recordando-quien-soy-mambo-matinal.html

O una etiqueta en cuyo caso, le muestran las entradas que tengan esa etiqueta. Para eso, debes colocarle la etiqueta música a esos posts.

Responder
Antonio Martín Bardán  

Gracias, JMiur, por su respuesta.
Me quedaré con la URL, ya que no hay remedio. Por lo menos, gracias a su explicación, no seguiré intentándolo y eso ya es un alivio.
Saludos, y enhorabuena por su estupendo y generoso blog de Vagabundia.

Responder
JMiur  

Antonio: es la decisión más lógica :)

Responder
Anónimo  

Perfectooooooooooooooo, se fueron esos "cosos" del blog.;-)
Ahora sí, muchas gracias JMiur.

Que tengas un buen día

Responder
Unknown  

No había medido hasta ahora lo que me molestaban esos "cosos"
^_^ que útil, gracias!

besos ronroneados

Responder
Unknown  

Estupendo, yo usaba mis truquillos truquillos para acceder pero tengo que probar esto, lo dificil? el tiempo para hacerlo, jeje

Un abrazo!

Responder
JMiur  

Me alegro que se resolviera, Mar. Lamento el error de ayer :$

Pau: Odiamos esos COSOS :D

Malina: No es tan complicado de poner, inténtalo :D

Responder
Unknown  

si, ja! lo haré
de momento ha ido al sidebar de conectablog que es donde pongo los enlaces a articulos que considero utiles y que no debo perder de vista.

Un abrazo!

Responder
xhabyra  

Excelente opcion, me gusto mucho, espero pronto darme tiempo y poder tenerla en mi blog.

Responder
Anónimo  

Ésta es la mejor página que he visto con información de blogs.

Responder
Anónimo  

Pues está muy curioso, el único problema es que no consigo que haya diferencias entre quickEdit OFF y quickEdit ON. Vamos, que da igual donde pinche, no hay diferencia alguna. Los demás enlaces funcionan bien. Se ven horribles, pero como sólo los veo yo... no importa, y así puedo quitar la barra de arriba. Útil, desde luego, es; el único problema es ese, que no pillo la diferencia entre una pestaña y la otra. Supongo que habré olvidado añadir algo, como con el CSS me pierdo tantísimo...

Responder
JMiur  

En el código fuente de tu blog, veo que hay algo mal:
// ]]>
<style type='text/css'>
/* las clase a permutar */
.quickedit {display: block !important;}
.quickeditNO {display: none !important;}
</style>
</script>

Eso en negrita va arriba de <style type='text/css'> porque es el cierre del script. Eso ocurre ahora, como está mal cerrado, el script no funciona.

De todas maneras, podría fijarte en el post ya que he corregido levemente ese script ya que puesto así, saba algún problema en IE.

Responder
Anónimo  

Muchas gracias. Ya está arreglado. Nunca utilizo IE, así que el problema, desde luego, estaba en lo que Vd. ha comentado. Aprovecho para darle las gracias de golpe por la utilidad de todas estas entradas (que no son pocas, aunque este sea prácticamente mi primer comentario en una de ellas).

Responder
JMiur  

Me alegra que se solucionar. Gracias por el comentario :)

Responder
mi[AK]  

JMiur,

Es un placer leer tu blog, y te aseguro que todo un descubrimento como ir reconstruyendo un blog a partir de muchas de tus entradas.
He cambiado algunas cosas, pero ahora deseo quitar, esas herramientas que comentas, solo quitarlas, sin mas, y la verdad es que no lo consigo, tengo una barra con la cual puedo entrar al diseño, y no deseo un acceso rapido, pero no se porque no acabo de conseguirlo.
Si no te importa, solo es quitarlas, y te aseguro que se me esta haciendo mas complicado de lo deseado.

Muchas gracias

Responder
JMiur  

Para quitar eso, debes expandir la platilla y buscar esto:
<b:include name='quickedit'/>

Está en los posts y en cada elemento que se haya agregado.

Responder
mi[AK]  

Buenas noches JMiur,

Muchas gracias, perfecto, el problema entonces eetaba que solo lo quitaba en un lugar, por tanto seguia saliendome.

Muchas gracias, seguire tu blog con interes.

Responder
JMiur  

Recuerda que cada vez que agregues un elemento nuevo, volverá a aparecer. Son una plaga

Responder
mi[AK]  

Buenas noches JMiur,

Cierto que son una plaga, si fuera uno todavia, si feran dos, los pasas, pero es que son como las cucarachas, a cada cosa añadida, zasss, mas herramientas.
Pero solucionado.
Te lo agradezco nuevamente.

Responder
Usuario10  

Buenos dias JMiur,

Como puedo hacerle para que al entrar no aparezcan los quick edit en ON, ahorita me aparecen activos al entrar. Si me funciona el OFF y ON.
Los pongo en OFF y cuando paso a la siguiente pagina se vuelven a poner ON.

¡Saludos!

Responder
JMiur  

Oculta los iconos colocando la definición antes de <b:/skin> para que sea el valor por defecto:

.quickedit {display: none !important;}

Responder
Usuario10  

Buenas JMiur,

Cualquiera puede ver las opciones, que habre echo mal? entiendo que solo el administrador iba a ver estas opciones.

Agregue ".quickedit {display: none !important;}" y no lo desaparece, que crees que sea?

Saludos man.

Responder
JMiur  

No veo en que blog está el problema. En los que he mirado, no se muestran los íconos.

Responder
Usuario10  

JMiur corregi el error ya quedo el detalle que se mostraba a cualquier usuario.
Lo unico que no me queda es no los logro poner en OFF como default, ya agregue la linea css ".quickedit {display: none !important;}" pero no los deshabilita.

Gracias

Responder
JMiur  

Lo que yo veo es esta definicion:

.quickedit {display: block !important;}
.quickeditNO {display: none !important;}

Invierte las cosas, cambiando el nombre y las propiedades, por ejemplo:

.quickedit {display: none !important;}
.quickeditSI {display: block !important;}

Responder
Usuario10  

Gracias JMiur, con eso quedo, que funcion tieneel display block, display none lo desaparece verdad?

Muy amable de tu aparte como siempre.

Saludos!

Responder
JMiur  

Si. Es exactamente así.

Responder
Félix Prado  

(2º intento :P)

Buenas JMiur, me alegro de volver por aquí (en realidad nunca me fui :D).

A mi tampoco me gustan los destornilladores así que por fin hoy, después de tener esta entrada guardada, he sacado un ratillo para poner en mi blog con éxito este "truco" pero tengo el mismo problema que los últimos comentaristas: me gustaría que por defecto no aparecieran los iconitos.

Le he dado la vuelta a:

.quickedit {display: block !important;}
.quickeditNO {display: none !important;}

quedando:

.quickeditNO {display: none !important;}
.quickedit {display: block !important;}


Es lo que he entendido de tus explicaciones pero no consigo nada.

Como siempre espero tu explicación que sin duda lo arreglará :)

Un saludo y gracias por este blog que, años después, me sigue pareciendo fantástico.

Responder
JMiur  

Saludos Mr:Prado. He probado la línea de enlaces oculta bajo el menú de tu blog y los veo funcionando bien. Sólo puedo probar lo de mostrar y ocultar el iconito, claro, pero esa parte no tiene problemas.

El orden en que estén colocadas las definiciones carece de importancia.

Confirmame el problema.

Responder
Félix Prado  

A ver, sí que funciona bien.

Lo único que me gustaría es que por defecto no se mostrase el icono de herramientas, que hubiera que usar el "quickEdit ON" para que salieran.

Un saludo y gracias por preocuparte.

Responder
JMiur  

Perfecto, ya entendí. Entonces, en lugar de esto:

.quickeditNO {display: none !important;}
.quickedit {display: block !important;}

Coloca esto:

.quickeditNO {display: block !important;}
.quickedit {display: none !important;}

Simplemente, estás inviertiendo las propiedades. Por defecto, el icono se llama quickedit y es visible (display: block ); así, le decimos que por defecto sea invisible (display: none) y que al hacer click, se muestre.

Responder
Félix Prado  

It works :)

Gracias.

Responder
JMiur  

Bien Mr Prado ¡¡¡Fuera destornilladores!!! :D

Responder
Blau61  

Excelente aporte como siempre JMiur, pero tengo un pequeño problema que tras pasarle la consola de errores me sale esto:

missing ) after for-loop control

for (var x=0;x<el.childNodes.length;x++) {

y sinceramente NPI , y eso que hice varias veces el copy/paste, pero ni por esas.

A saber que tonteria debe ser, pero creo que es lo que hace que la funcion ON/OFF de las herramientas no funcione.

Seguro que tienes respuesta :)

Gracias

Responder
JMiur  

Blau61:

Desconcertante pero, haz lo siguiente, cambia la variable class por otra, por ejemplo oldclass. El script quedaría asi:

loopCSSChange = function (el, oldclass, newclass) {
for (var x=0;x&lt;el.childNodes.length;x++) {
loopCSSChange(el.childNodes[x], oldclass, newclass);
}
if (el.className==oldclass) el.className=newclass;
}

Recuerda que < debe ser reemplazado por &lt;

Responder
Isaac Chavero  

hola, mi problema es que cuando entro desde mi cuenta, me desaparecen elementos del footer (lo tengo modificado con varias filas y columnas). Esto me sucede desde diferentes ordenadores. No me sucede si visito mi blog sin entrar en mi cuenta de usuario. Sobre todo ocurre cuando entro en alguna entrada con comentarios. Probe a abrir un blog de pruebas y tengo el mismo problema. Mi blog es www.larevistadecirugiaestetica.com
¿a que puede ser debido? ¿como lo soluciono?

Responder
JMiur  

Isaac:
Imposible saberlo ya que es algo que sólo es posible verlo en esas condiciones, es decir, logueado.

Responder
Matías Aravena  

Gracias, recién lo agregué a mi blog.

Responder
EM2.0  

Perdón, por si las moscas, lo último que dices para añadir al CSS, ¿lo pongo justo encima de , no?, que llevo bastante sin tocar la plantilla y mi memoria falla. Definitivamente soy una anciana.

Responder
JMiur  

El CSS donde quieras, siempre amtes de <head> :)

Responder
Unknown  

Ami una vez me aparecio ese barra :O , eso habra pasado porque se cargo mal.

Responder
Anónimo  

es posible comprobar si es admin automaticamente?

Responder
JMiur  

Lo desconozco.

Responder
Andres  

Me gusta esa idea, para ocultar definitivamente la Navbar de Blogger. :D

Lo combiné con un menú estático al lado izquierdo del blog que estoy desarrolando.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR