Imagen de fondo en los widgets de la sidebar de Blogger

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.


 

Compartir Enlace

Tres opciones muy utiles de configuracion de comentarios en Blogger

Es algo bastante básico, pero no por eso deja de ser desconocido para los que están empezando a utilizar Blogger.

[1] Incluir un mensaje en el formulario de comentarios.

Es tan sencillo como ingresar a nuestro panel de Blogger, ir a "Configuración" y pinchar en la pestaña de "Comentarios", allí veremos una casilla con un texto delante que dice "Mensaje del formulario de comentarios".
En esta casilla es donde añadiremos el texto que queremos mostrar en nuestro formulario y que será visible para todo aquel que vaya a dejar un comentario en nuestro blog.

Formulario con mensaje
[2] Recibir notificación de comentarios por email.

Sin salir de esa misma página de nuestro panel, un poco más abajo de la casilla de la que acabo de hablaros, hay una opción también muy útil: Correo electrónico de notificación de comentarios.
Si colocamos ahí nuestra dirección de correo, cada vez que alguien deje un comentario en el blog, nos llegará un email a la dirección de correo que hemos indicado, lo que nos ahorrará mucho tiempo a la hora de localizar cualquier comentario, es más, se puede acceder a la entrada y por tanto al comentario, a través de un enlace desde el mismo email.

Correo de comentarios
[3] Usar verificación de palabra en los comentarios.

Esta opción se activa al igual que las anteriores, en "Configuración", pestaña de "Comentarios".
Esto llega a ser bastante molesto para algunos usuarios, pero no deja de ser una medida muy útil para prevenir el spam.
El autor del blog no verá la palabra y por tanto, podrá comentar sin tener que validar su comentario, solo será visible para los demás usuarios.
Ultimamente he visto en varios blogs e incluso me lo han comentado algunas personas, que están proliferando en Blogger los comentarios spam, incluso con enlaces que llevan a páginas con spyware, en estos casos si que sería recomendable activar la opción de verificación de palabra, al menos durante un tiempo prudencial, ya que ese tipo de mensajes suele ser dejado por robots de forma automática y cuando comprueben que no van a poder comentar en el blog, lo normal es que eliminen la url afectada de su base de datos.

Palabra ant-spam

Compartir Enlace

Programación en JavaScript: editor y debugger portable

| 0 comentarios


Imagen de Notepad++ en funcionamiento

No trato en este caso de ofrecer un tutorial de programación en JavaScript eso lo podrás encontrar con facilidad buscando en google.

El caso es que, por razones que no vienen al caso, ando un poco liado repasando algo de JavaScript (un poco culo inquieto que es uno) y me he puesto a buscar algún software que me permitiese hacerlo. Para ello tan sólo había una serie de condiciones:
  1. Ha de ejecutarse en Windows. (si estos días ando en ordenadores con Microsoft)
  2. Ha de poder ejecutarse sin instalación, es decir, ser portable, ya que como podréis suponer el ordenador en el que lo voy a ejecutar no va a ser siempre el mismo y he de poder llevar lo hecho de un lado a otro en mi Pen Drive.
  3. No debe ser demasiado "pesada", hacer lo que quiero y punto.
  4. Ha de ser libre: no está la economía como para andar pagando licencias por cuestiones que se pueden solventar fácilmente mediante software libre.
LLegados a este punto la primera opción sería ejecutar algo que fuese compatible con la interfaz del antivirus portátil -o portable como lo llaman algunos- con el que ando. Así que, sin mas, me pasé por la página de portableapps.com y le eché un vistazo a las herramientas disponibles que a continuación os detallo:
  1. Editor de JavaScript: simplemente me bajé e instalé en mi pen drive el notepad++ tal y como podéis ver en la primera imagen, incluye entre otras cosas un cliente de FTP que te permitirá subir las páginas programadas para probarlas, un cliente ligero,...., además es compatible con una gran cantidad de lenguajes de programación.
  2. Debugger de JavaScript: simplemente me bajé Venkman el JavaScipt Debugger del proyecto Mozilla. Si quieres también puedes bajarte la versión portable de Mozilla Firefox para tenerlo siempre disponible desde tu pendrive.
  3. Por último y por si tenéis que diseñar páginas web complicadas o bien formularios,... y hacerlo desde un editor sencillo, vuestra opción debería ser el Kompozer, que también podréis descargar desde la página de portableapps.com. Sólo deberíais tener en cuenta en caso de querer instalarlo en un idioma distinto del inglés, que después de bajaros el paquete e instalarlo, lo ejecutáis y desde Tools-Extensions seleccionáis la extensión del lenguaje que deseéis y que previamente os habréis descargado desde la página: http://www.kompozer.net/l10n
    Imagen de la interfaz de Kompozer

    CopyPasteandoLink
     

    Títulos de entrada por etiquetas en Blogger

    Una forma para presentar las etiquetas en nuestro blog que facilitará aún más a nuestras visitas el encontrar la entrada que más les interese usando las etiquetas.

    El widget mostrará las etiquetas del blog con una flechita al lado que al pinchar en ella desplegará el título de las entradas con esa etiqueta, una vez localizado el título de la entrada que nos interese, y pinchando sobre el mismo, accederemos a esa entrada en concreto.

    Lo mejor de todo es que podemos controlar desde el código, el número de los títulos a mostrar, aunque si ponemos demasiados tardarán un poco en cargar y, mientras tanto, se mostrará un texto de "Cargando entradas...".


    Gadget etiquetas

    [1] En primer lugar nos descargamos el script que hace funcionar el gadget (botón derecho, guardar como) a nuestro PC y lo subimos a un alojamiento de archivos.

    [2] Nos situamos en nuestro panel de Blogger y pinchamos en la pestaña "Edición Html", una vez allí y sin expandir las plantillas de artilugios localizamos el código correspondiente a la sidebar y los elementos añadidos en ella y que ha de mostrarse parecido a esto:

    Sidebar
     [3] Fijaros que nuestra sidebar empieza con <div id='sidebar-wrapper'> y acaba con </b:seccion>  y es justo ahí, sobre </b:seccion>  donde hemos de "pegar" este código:

    <b:widget id='Label12' locked='false' title='Etiquetas' type='Label'>
    <b:includable id='main'>
    <script type='text/javascript'>
    home_page = &quot;http://elescaparatederosa.blogspot.com/&quot;;
    max_rc_posts = 10;
    </script>
    <script src='URL_DEL_SCRIPT' type='text/javascript'/>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'>
    <data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9658;</a>
    </span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9658;</a>
    </b:if>
    </li>
    </b:loop>
    </ul>
    </div>
    </b:includable>
    </b:widget>

    [4]Cambiamos ahora los datos que están coloreados por los nuestros, es decir, http://elescaparatederosa.blogspot.com por la url del blog donde estamos añadiendo el widget y en max_rc_posts = 10; pondremos el número de entradas que vamos a mostrar debajo de cada etiqueta.

    Por supuesto que hemos de sustituir donde dice en mayúsculas "URL_DEL_SCRIPT" por la url del script que nos hemos descargado antes.

    [5] Guardamos los cambios.


    [Notas]
    Si queremos eliminar el contador de entradas, es decir el número de entradas por etiqueta que se muestra después de cada una de estas,  localizamos (<data:label.count/>) y lo borramos.

    He puesto 12 en el id del elemento, será difícil que de problemas de instalación ya que supongo que nadie estará usando doce elementos "Etiquetas" a la vez, aunque si se diese el caso, solo habría que cambiar el 12 por un número que no estemos usando para ese elemento (Etiquetas).

    El estilo del widget se adaptará al de los demás elementos de nuestra sidebar.

    Compartir Enlace