Bloqueos, spam, infracciones, blog no deseado y otras sutilezas de Blogger

El otro día me preguntaron como se podía saber que un blog ha sido bloqueado, mi respuesta fue muy simple "Porque no tenemos acceso y por lo tanto nos impide editar entradas o manipular la plantilla"

Anoche me ocurrió algo, y poniendo un ejemplo es como si vieras un ovni (eso que dicen que existe pero pocos pueden demostrarlo) mi reacción fue la lógica (creo) sólo que en vez de coger la cámara fotográfica hice capturas de pantalla.

Puedo afirmar que en un visto y no visto uno de mis blogs fue bloqueado por según Blogger detectar que es un blog no deseado.

Si me hubiera ocurrido con Gem@ BLOG supongo que además de asombro me habría subido por las paredes, pero para más guasa se trataba de un blog creado hace !dos días¡ encima da la casualidad que es el mismo blog donde hice las pruebas para la entrada creada ayer "Dividir secciones en la plantilla"

En un principio pensé que podía ser algo relacionado con la Navbar no la había eliminado y por lo tanto alguien podía haber marcado como blog no deseado, pero lo veo muy poco probable ya que en la entrada que muestro ese blog no hay enlace que lleve a él ni está dado de alta en buscadores.

¿Misterios sin resolver? ¿Historias para no dormir? cualquier título iría bien, lo cierto es que hoy puedo dar más detalles sobre como solicitar el desbloqueo de nuestro blog y no morir en el intento.

Para empezar recibimos una notificación (en inglés) en nuestra bandeja de correo, yo de inglés no entiendo mucho y aunque me salto algunos párrafos entiendo lo suficiente para saber de qué va el tema.

En pocas palabras decía que mi blog era de gran potencial publicitario y sería suprimido dentro de un plazo de veinte días si no era repasado y previamente reclamado teniendo en este último caso un plazo de dos días hábiles para desbloquearlo.

En un principio pensé que no valía la pena reclamar el blog por los motivos que he expuesto antes, era un blog de pruebas sin contenido alguno, pero me pudo más mi derecho a reclamar algo que a simple vista me pertenece y así lo hice.

Al acceder a mi panel me encuentro lo siguiente:

Solicito revisión de desbloqueo

Clic en la imagen para ampliar

En efecto estoy segura que el contenido es apropiado, hago clic para ver el blog y quedan disculpados por hacerme perder el tiempo.

Clic en la imagen para ampliar

Ingresamos en el verificador de palabras, después de tres intentos acerté.

Clic en la imagen para ampliar

Y a esperar...

Eso ocurrió anoche y esta tarde al acceder a mi panel he comprobado que el blog ya estaba desbloqueado, no he recibido confirmación en mi correo pero lo cierto es, que si quedé asombrada del bloqueo más asombrada he quedado hoy con la rapidez de respuesta.

Desconozco si en todos los casos se procede igual, mi recomendación es seguir los pasos que nos indican, tener paciencia y en caso de perderla o pensar que no se está obrando con la rapidez que aseguran dirigirse al Grupo de Ayuda de Google.

Este grupo está formado por personas que colaboran en la medida de las posibilidades y medios de cada uno.

Entre todas, la única persona cualificada para desbloquear o liberar un blog es el Guía de Google dirigirse a él es el camino más corto para solucionar nuestro problema.

Dividir secciones en la plantilla

Hoy en día la cantidad de modelos de plantillas para Blogger es muy variada, se hace difícil a la hora de escoger la que más se adapta a nuestro gusto y necesidades.
Quizás por eso muchas veces decidimos personalizar nuestra propia plantilla.
La plantilla que más se presta a ser modificada y que menos problemas presenta a la hora de trabajar en ella es la Minima de Blogger.


Es simple y diáfana y casi todos la tuvimos alguna vez como blog para pruebas o "experimentos" con ella vamos a hacer unos cambios, separar secciones para darle una imagen diferente.
Esa imagen dependerá mucho de la imaginación de cada uno y el resultado es la satisfacción de tener una plantilla personalizada por nosotros.

Para empezar vamos a situarnos en Plantilla/Edicción de HTML no hará falta expandir la plantilla puesto que sólo trabajaremos en la CSS.

Ubicamos .post-body { y añadimos un borde con:
border: 1px solid #cc6666;

Comprobaremos en vista previa y veremos que no queda espacio entre el borde y el texto entonces añadiremos más espacio con:
padding: 5px 5px 5px 22px;

Para decorar un poco más ese espacio podemos añadirle también un color de fondo con
background:#ffffff;

O si preferimos una imagen con background:url('url-de-la-imagen');

Incluso redondear esas esquinas con:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

( visualizado con Explorer el efecto esquinas redondeadas se pierde y en su lugar quedan líneas rectas)

border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px; }

El resultado sería el siguiente:


Si deseamos añadir el mismo efecto en el footer y que las etiquetas, autor, fecha y demás también tengan la misma imagen ubicaremos .post-footer { y añadimos las mismas líneas que en .post-body {

Para la sidebar nos encontraríamos con la necesidad de una pequeña modificación en:

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Creamos dos secciones con ese código de forma que sean independientes y eliminamos el anterior.

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Le añadimos las líneas de código igual que en .post-body {
pero solamente en .sidebar .widget {

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}


Mientras hacía esta entrada me entretuve añadiendo una imagen de fondo a la plantilla y unos iconos a los títulos de la sidebar, la diferencia es bien palpable.


Personalizar la plantilla no quiere decir que sigas estos pasos, únicamente se intenta orientar y sobre todo animar para que pierdas el miedo a manipular tu plantilla, seguramente tendrás mil ideas y puedo asegurar que cuando las lleves a la práctica quedarás asombrado de las posibilidades que tenemos a nuestro alcance.

Pueden empezar cuando gusten

Imagen de fondo en los widgets de la sidebar

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Para colocar una imagen de fondo (la misma para todos los widget) en cada uno de los elementos de la sidebar, tendremos que localizar este código dentro de nuestra plantilla:

.sidebar .widget{
margin:0 0 0.7em;
padding:4px;
}

Y aplicarle el background:

.sidebar .widget{
background: url(URL_DE_LA_IMAGEN);
margin:0 0 0.7em;
padding:4px;
}

LiLi mint me pregunta:

¿Cómo es que puedo poner diferentes imágenes en cada una de las cajitas (widgets) del blog.

[1] Una vez situados en nuestro panel de Blogger, vamos a la pestaña de "Diseño" y pinchamos en "Edición de HTML".

Sin expandir la plantilla de artilugios localizamos el código que pertenece a los widget y que, estará representado cada uno, por una línea parecida a esta:

<b:widget id='HTML12' locked='false' title='Mis lecturas' type='HTML'/>

[2] Nos fijamos en la línea del widget concreto al que vamos a ponerle la imagen de fondo, si tiene título añadido nos será mucho más sencillo de localizar.

Una vez localizada la línea, nos fijamos en su id que es siempre distinta para cada widget.

En el caso de mi ejemplo, el id es HTML12

[3] Nos situamos ahora más arriba, en el código CSS de la plantilla y siempre antes de ]]></b:skin> colocamos el código necesario para mostrar la imagen en ese widget concreto:

#HTML12{
background: url(DIRECCION_DE_LA_IMAGEN);
}

[4] Por último tendremos que repetir estos mismos pasos para cada widget al que vayamos a ponerle imagen de fondo.

Una vez aplicadas las imágenes de fondo, tal vez quedarían mas lindos nuestros widget si además les pusiésemos un marco a cada widget como los de mi blog.

Google Pages nos hace trabajar

Si alguien pensaba que sobre el tema de alojamiento de archivos ya estaba todo resuelto está muy confundido.
Durante este fin de semana la mayoría de consultas han sido por este tema, dudas y más dudas y una preocupación que por una parte es lógica tener pero que no debemos verlo como algo trágico.

Google Pages nos deja sin alojamiento y es una faena, nadie dice lo contrario pero tiene solución, y la solución es buscar un alojamiento donde nuestros archivos estén a salvo con un mínimo de garantías respecto a funcionamiento.
Tenemos de tiempo hasta finales de año, da tiempo para la mudanza y mucho más pero no esperemos hasta el último momento, con prisas es más fácil cometer errores.

En otra entrada comentaba la forma de "Descargar archivos" y alojarlos en el nuevo servidor.


¿Qué servidor utilizo?

Eso es a gusto del consumidor, yo estoy experimentando con BoxSTR y SkyDrive recomendado por J.Miur. La bloguería y Pizcos se decantaron por Yahoo! Geocities ver información también de J.Miur aquí.

Archivos de imagen

"Es conveniente alojarlas en Blogger por una sencilla razón, el único inconveniente que tendríamos para visualizar las imágenes es que Blogger estuviera fuera de servicio. Pero si Blogger está fuera de servicio tampoco podemos visualizar el blog por lo tanto poco importaría el alojamiento de las imágenes"

¿Y los gifs.?

Historia aparte son las imágenes animadas o archivos gif. son imágenes que Blogger no impide alojarlas pero no es un archivo permitido y por lo tanto pierden su efecto o funcionan día si, día no, por lo tanto las alojamos en otro servidor que permita este tipo de imágenes, a falta de Google Pages podemos probar con Imageshack o si fuera posible con el nuevo servicio de alojamiento que utilicemos.

Casi todos añadimos alguna vez scripts en nuestra plantilla y ahí seguirán sin ocasionar problema. El problema viene cuando ese script está alojado en un servidor externo y ese es el motivo de esta entrada.

¿Cómo sabemos si tenemos scripts externos?

Lo ideal sería recordar si en algún momento añadimos un efecto a nuestro blog del tipo "leer más" "expandir entradas" "ventanas modales" o algo por el estilo.
Si no recordamos nada lo mejor es dirigirse a plantilla en edición de HTML.
Todos los scripts los añadimos justo antes de </head>
Ubicaremos </head> y con calma iremos repasando la plantilla, para identificar los scripts es bueno saber que se añaden más o menos así:

<script src='url_archivo_functiontoggleIt.js' type='text/javascript'/>

No se trata de poner patas arriba la plantilla sino de sustituir la url del archivo antiguo por la nueva.

Otro dato a tener en cuenta son los scripts añadidos a la sidebar no se olviden de ellos, pueden localizarlos editando los elementos donde los tienen incluidos.

En mi afán por facilitar las cosas más de una vez he posteado sobre algún script facilitando la url de los servidores donde los tenía alojados (Google Pages y Hostfile) fue muy bonito mientras ha durado y los dos pasan a mejor vida fastidiando con ello la nuestra.

Ahora mismo no recuerdo exactamente la cantidad de scripts que he proporcionado pero no me gustaría que tuvieran problemas por este motivo, así que conforme el tiempo me va dejando estoy actualizando entradas modificando los cambios.


Espero que esta entrada conteste algunas preguntas y les sea breve el cambio.

Valorar las entradas (Blogger in Draft)

En el blog de Blogger in Draft hacen mención a una nueva función para añadir al pie de nuestras entradas, para que nuestras visitas puedan valorarlas.

De momento y hasta que el equipo de Blogger considere incluirlo en el Blogger "normal", solo está disponible en Blogger in Draft.

Seremos nosotros mismos los que podremos elegir que colocar en los botones de valoración y cuantos botones o posibilidades incluir, así nuestras visitas podrán dejar su opinión al respecto de cada entrada simplemente con un clic en la opción elegida.

[Paso 1] Hemos de acceder al panel de nuestro blog desde Blogger in Draft y una vez allí, en la pestaña de "Diseño", pinchamos en el "Editar" del widget "Entradas del Blog".

[Paso 2] Una vez abierta la ventana con las opciones que pueden añadirse a nuestras entradas, veremos que aparece una nueva llamada "Reacciones", que se verá de esta manera:

[Paso 3] Tendremos que marcar la opción para que aparezca la votación debajo de cada una de nuestras entradas.
Si además queremos cambiar el texto de las opciones, la palabra "Reacciones" y aumentar o reducir la cantidad de posibilidades(los botones), pincharemos en el "Editar" que vemos a la derecha de los botones.

El problema es que esta nueva función, como ya sucedió con el Ranking de Estrellas o el formulario de comentarios es que, aunque la opción esté operativa, en las plantillas que han sido modificadas previamente, el código para mostrar el widget no está incluido, así que tendremos que incluirlo directamente en el HTML de nuestra plantilla.

[1] Nos situamos en la pestaña "Edición html" de nuestro panel y marcamos la casilla para "expandir las plantillas de artilugios".

[2] Localizamos está línea de código:

<div class='post-footer-line post-footer-line-3'/>

[3] Justo debajo pegamos el código necesario para mostrar el sistema de valoración:

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

[4] Usamos la vista previa antes de guardar los cambios.

Nota:
El estilo del widget se adapta de forma automática a los colores del blog donde se coloca.
Yo he estado probandolo esta tarde y he cambiado varias veces el color de fondo del blog de pruebas para asegurarme y se adapta sin problemas, aunque algunas veces no era visible el efecto sin guardar antes los cambios.

Menú de etiquetas (expandir y contraer)

Una sencilla manera de mostrar las etiquetas en nuestra sidebar de forma que no ocupen casi espacio.
Será muy útil para aquellos que tienen en su blog aplicado un número excesivo de etiquetas, ya que solo se mostrará el título del elemento con el símbolo [+/-] delante y una vez se pinche en este símbolo, las etiquetas aparecerán expandidas debajo hasta que, volviendo a pinchar en el símbolo, se oculten de nuevo.



[Paso 1] En la pestaña de Diseño - Edición Html, localizamos el código del elemento "Etiquetas" sin expandir la plantilla de artilugios:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

[Paso 2] Sustituimos esa línea por este código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[Paso 3] Comprobar en "Vista Previa" y si todo está correcto "Guardar Cambios".

PicShadow - Sombra en las imágenes

De siempre me ha gustado el efecto sombra en imágenes, para crear el efecto suelo utilizar Pikifx pero he descubierto PicShadow es una herramienta online ideada especialmente para crear sombras.

Supongo a más de uno le gustará porque además de lo sencillo que resulta nos ofrece la posibilidad de escoger color de fondo.

En "Distance" conseguimos crear sombra con mayor o menor intensidad.

Es una de esas herramientas que por su sencillez no llama poderosamente la atención pero que nos ayuda a ganar tiempo en nuestra tarea.


Fuente: wwwhat´s new