Insertar imagen fija en blog

En más de un blog habréis visto que en alguna zona del mismo aparece una imagen y aunque nos desplacemos con las barras de desplazamiento la imagen sigue visualizándose permaneciendo fija.

Para crear este tipo de imagen, tan solo debemos insertar un pequeño código en nuestra plantilla.

En primer lugar, como siempre, realizaremos la copia de seguridad de la plantilla.

Una vez hecha, accedemos a la ficha Diseño -> Edición de HTML y bajamos hasta el cuerpo de la página (body).

Justo antes de la etiqueta </body>, pegamos el siguiente código:

<a href="direccion_URL_pagina"><img src="direccion_URL_imagen" alt="ir arriba" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Vamos a analizar el código anterior para que sepáis lo que debéis modificar.

En dirección_URL_página escribiremos la dirección a la que queremos que se acceda cuando hagamos clic sobre la imagen.

En dirección_URL_imagen tendremos que escribir la dirección donde está alojada la imagen.

Con el código anterior, la imagen se muestra en la parte inferior (bottom) derecha (right), aunque podemos cambiar esta alineación modificando la propiedad style.

ACTUALIZACIÓN 10 DICIEMBRE 2009

Los distintos valores para cambiar la alineación de la imagen son los siguientes:

• Top: alineación parte superior.
• Bottom: alineación parte inferior.
• Left: alineación parte izquierda.
• Right: alineación parte derecha.

Combinando estos valores podremos alinear la imagen en los diferentes vértices de la ventana de nuestro navegador.

Eliminar borde del encabezado del blog

En plantillas como Mínima y Mínima Lefty, incluído sus variantes, habréis visto que en el encabezado aparece un doble borde exterior.

El caso es que cuando ponéis una imagen en el encabezado, ese borde puede que queráis eliminarlo.

Eso justamente es lo que veremos en esta entrada, cómo eliminar el doble borde exterior que aparece en el encabezado.

En primer lugar, haremos la copia de seguridad de la plantilla puesto que vamos a eliminar parte del código HTML de la plantilla. De esta forma, si el resultado final no nos gusta podremos recuperar el estado anterior del blog sin ningún problema.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del Header de la plantilla, el siguiente código:

border:1px solid $bordercolor;

Como podréis comprobar esta línea aparece dos veces en la plantilla, una en header-wrapper y la otra en header.

Pues bien, si queremos eliminar ese borde bastará con eliminar ambas líneas de código.

Si por el contario, no queremos eliminar el borde y sí queremos aumentar el grosor del mismo, solo tendremos que modificar la línea anterior modificando los píxeles en vez de dejar uno como viene definido por defecto.

Una vez hayamos realizado las modificaciones, guardaremos los cambios y podremos visualizar el resultado final.

Agregar nueva columna - Plantilla Sand Dollar

Otra nueva entrada a agregar nuevas columnas a las plantillas que tenemos en Blogger. En esta ocasión, le toca el turno a la plantilla Sand Dollar.

Lo primero de todo, como siempre, antes de realizar cualquier modificación os aconsejo que hagáis la copia de seguridad de la plantilla.

Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}

En el código anterior podemos ver la definición de la zona donde se sitúan las entradas (div#main) y la barra lateral (div#sidebar) que tenemos a la izquierda.

A diferencia de las otras plantillas que hemos visto hasta ahora, ésta tiene definida la anchura (witdh) en porcentaje en vez de en píxeles. Vemos que la zona de las entradas tiene una anchura del está definida al 66% y la barra lateral al 31%.

Para agregar la nueva columna, vamos a modificar el ancho anterior, estableciéndolo al 50% para la zona de las entradas y al 23% para la barra lateral.

Una vez hayamos modificado los valores anteriores, agregaremos el código de la nueva columna justo debajo de la llave de cierre de div#sidebar.

div#newsidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 25%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Una vez añadido el código, nos dirigimos a la parte del cuerpo (body) de la plantilla para agregar la nueva columna.

Para ello, buscamos el código

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

lo copiamos y lo pegamos, realizando las modificaciones necesarias, justo antes de la línea <div id='main-wrapper'> , quedando el código de esta forma:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos los cambios, agregamos un gadget a la nueva columna desde la opción Elementos de la página y comprobamos el resultado final.

Capacidad de Blogger

Otra de las preguntas frecuentes es la capacidad de Blogger.

Blogger tiene capacidad ilimitada para alojar las entradas del blog, la única restricción que podemos tener es respecto al alojamiento de imágenes que se hace a través del sercicio Picasa de Google.

Como bien sabéis la capacidad inicial de este servicio es de 1 Gb, pero podemos contratar espacio adicional.

La alternativa a esto, en el caso de que no queremos contratar más espacio en este servicio, es utilizar otros servidores de alojamiento de imágenes.

Podréis encontrar muchas páginas en internet sobre esto, pero el que más me convence a mi es el servicio Skydrive de Windows Live. Este servicio os da la capacidad de 25 Gb para alojar todo tipo de archivos y está disponible siempre y cuando dispongáis de una cuenta de Hotmail.

Si ya tenéis la cuenta creada solo hará falta acceder a este servicio a través de este enlace.

Si por el contrario, todavía no tenéis cuenta de Hotmail, podéis crearla pulsando aqui.

Agregar nueva columna - Plantilla Mínima Lefty

En esta entrada veremos cómo agregar una nueva columna a la plantilla Mínima Lefty y sus derivaciones.
En primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Modificamos el 660 px por 870 px para aumentar el ancho del blog.

Ahora, vamos a definir la nueva columna. Para ello, copiamos el código que aparece justo debajo del main-wrapper y lo pegamos realizando las modificaciones necesarias, quedando el código de la nueva columna de la siguiente forma:

#newsidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Una vez que hemos realizado estas modificaciones en la definición de los objetos de la plantilla, vamos a agregar definitivamente la nueva columna. Para ello, buscamos y copiamos este código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Una vez copiado, lo modificamos y pegamos justo debajo, quedando el nuevo código de la siguiente manera:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Seleccionamos de nuevo el código de la barra lateral inicial (sidebar-wrapper) y lo pegamos antes de la línea <div id='main-wrapper'>

Guardamos las modificaciones realizadas en la plantilla y nos dirigimos a la opción Elementos de la página.

Agregamos un nuevo gadget a la nueva columna para poder comprobar su existencia en el blog, guardamos de nuevo los cambios y comprobamos que el resultado debería parecerse a la siguiente imagen.

Como podemos comprobar las dos columnas han quedado en el mismo lado. Para poder una a cada lado, accedemos de nuevo a la opción Edición de HTML, buscamos el siguiente código

#main-wrapper {
width: 410px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

y modificamos la alineación (float) al valor $startSide.

Para terminar con esta plantilla, si queremos igualar el espacio que hay entre la barra lateral y la zona de las entradas, añadimos la siguiente línea de código en la definición de la barra lateral (sidebar-wrapper).

padding-$endSide:1em;

Guardamos los cambios y comprobamos el resultado final.

Insertar vídeos de Youtube en blog

Hoy veremos cómo insertar vídeos de Youtube en nuestro blog.

En primer lugar, accedemos a la página donde tenemos el vídeo que queremos insertar y nos fijamos a la derecha de la pantalla en el apartado Insertar.

El código que tenemos en ese apartado es el código que debemos pegar en nuestro blog para insertar el vídeo.

Además, podemos personalizar ciertos aspectos del vídeo antes de insertarlo como el marco, el tamaño, etc...

Para poder personalizar estos datos, haremos clic sobre el botón que tenemos justo a la derecha del código de Insertar, con lo que nos aparecerán las opciones que podemos visualizar en la imagen siguiente.
Una vez hayamos elegido las opciones que queramos, solo debemos copiar el código generado, acceder a nuestro blog y pegarlo bien en la entrada correspondiente o bien en el gadget si es que queremos incorporarlo de forma permanente a nuestro blog.

Personalizar barras de desplazamiento del blog

Hoy veremos cómo personalizar las barras de desplazamiento de nuestro blog de Blogger.

Esto podríamos realizarlo mediante la modificación del código pero, en esta ocasión, en vez de explicaros para qué sirve cada línea de código vamos a acceder a la página iconico.com donde tenéis un aspecto más visual de los cambios que váis a realizar en vuestras barras de desplazamiento.

Como podemos en dicha página, tenemos una aplicación para ir directamente seleccionando los colores que queramos y, una vez elegidos, nos generará el código necesario para copiarlo directamente a nuestro blog.

El código debemos pegarlo en la definición del CSS de la plantilla, pero he realizado varias pruebas y hay que hacer alguna modificación al código generado para que funcione con el blog de Blogger.

Para que lo podáis ver con un ejemplo, vamos a suponer que el código que nos genera esta página es el siguiente:

<style>
body {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}
</style>

Solo nos vamos a quedar con este código:

scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;

Una vez copiado, accedemos a la ficha Diseño -> Edición de HTML y buscamos, en la definición del CSS de nuestra plantilla, el siguiente código:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
}

Como siempre digo, el código de una plantilla a otra puede variar. Una vez hayamos encontrado el código anterior, justo donde acaba después de la llave de cierre añadimos lo siguiente junto con la parte de código con la que nos habíamos quedado de la página iconico.com

html {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}

Completados todos estos pasos, solo debemos guardar los cambios y visualizar el resultado.

Deshabilitar la selección de texto en página web o blog

Para deshabilitar la selección de texto en nuestra página web o blog, tendremos que incluir el siguiente script entre las etiquetas body del código HTML de la página web o blog.

<script language='JavaScript1.2'>
function disabletext(e){
return false
}
function reEnable(){
return true
}
//if the browser is IE4+
document.onselectstart=new Function ("return false")
//if the browser is NS6
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Una vez pegado este código, guardamos los cambios y comprobamos que si intentamos seleccionar cualquier texto de la web o blog, veremos que no aparece nada seleccionado.

ACTUALIZACIÓN 15 AGOSTO 2010

Descarga el código explicado en esta entrada del blog.

Deshabilitar menú contextual en página web o blog

Para deshabilitar el menú contextual del ratón en una página web o blog, necesitaremos incluir la propiedad oncontextmenu en la etiqueta body.

Para ello, tendremos que acceder al código HTML de nuestra web o blog y, en la etiqueta body, introducir el siguiente código:

oncontextmenu="return false"

por lo que esta etiqueta podría quedar de la siguiente forma:

<body oncontextmenu="return false">

Con esto, cuando hagamos clic con el botón derecho sobre la web que contiene este código, no aparecerá el menú contextual.

También podríamos combinar con este código el citado, días anteriores en este blog, para deshabilitar el uso del teclado en la web.

Deshabilitar el teclado en página web o blog

Para deshabilitar el uso del teclado en una página web o blog, necesitaremos incluir la propiedad onkeydown en la etiqueta body.

Para ello, tendremos que acceder al código HTML de nuestra web o blog y, en la etiqueta body, introducir el siguiente código:

onkeydown="return false"

por lo que esta etiqueta podría quedar de la siguiente forma:

<body onkeydown="return false">

Con esto, aunque pulsemos cualquier tecla al visitar la página web o blog, veremos que no escribe ni ocurre nada.

Cambiar el color de la barra lateral del blog

Tal y como expliqué en esta entrada anterior del blog, podemos personalizar los colores de la plantilla a nuestro gusto.

De lo único que no me di cuenta es que cada plantilla es diferente, al igual que ocurre con el tema de agregar nuevas columnas, por lo que pueden variar los elementos que encontremos dentro de la opción Diseño -> Fuentes y colores.

¿A que me refiero con esto?
Por ejemplo, si utilizamos la plantilla Rounders o cualquiera de sus variaciones podremos cambiar el color de la barra lateral desde la opción Fuentes y colores con tan solo seleccionar el color, mientras que si utilizamos la plantilla Mínima veremos que la opción para cambiar el color de la barra lateral no aparece en Fuentes y colores por lo que tendremos que realizar una pequeña modificación en el código HTML de la misma.

Esto es justamente lo que veremos en esta entrada, el código que debemos insertar para poder cambiar el color de la barra o barras laterales que tenemos en el blog cuando no dispongamos de la opción correcta en la opción Fuentes y colores.

El código citado en esta entrada pertenece a la plantilla Mínima, aunque para el resto no debería variar mucho.

En primer lugar, no estaría de más hacer una copia de seguridad de la plantilla tal y como indico en esta entrada del blog.

A continuación, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de la barra lateral cuyo código es el siguiente:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Como podemos comprobar en el código anterior, no tenemos la propiedad Background que es la que nos permite seleccionar el color de fondo de la barra, por lo que tendremos que añadirla, quedando el código de la siguiente forma:

#sidebar-wrapper {
width: 220px;
float: $endSide;
background:#ff0000;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Como podéis ver lo único que he añadido es la propiedad Background junto con el color en hexadecimal. No hace falta decir que el color podéis elegir el que queráis, y para obtener el valor hexadecimal del mismo podéis utilizar la opción Fuentes y colores del blog o bien cualquier programa de retoque fotográfico que tengáis instalado en vuestro ordenador.

Una vez añadido este código, solo nos queda guardar los cambios y visualizar el resultado.

Alta en el buscador Google

Como os anuncié días atrás, hoy os enseñaré los pasos que debemos seguir para incluir nuestro blog o página web en el buscador Google.

Una de las formas de dar a conocer nuestra web o blog es indexarla en buscadores y directorios y, como buscador principal, tenemos a Google.

La manera de comprobar las páginas que tenemos indexadas en dicho buscador, fue ya explicada hace unos días y la podéis encontrar haciendo clic en este enlace.

Antes de empezar, os aclararé que el proceso de alta en Google puede darse a través de un simple enlace de alta, que habréis visto en más de una ocasión por Internet, o bien a través de las Herramientas para webmasters, servicio del propio Google y que fue creado justamente para este fin.
La diferencia entre uno y otro es que a través del simple enlace estáis dando a conocer a Google vuestra web de forma anónima, por lo que su indexación es bastante dudosa, puesto que al día se reciben millones de peticiones a través de este enlace; y si por el contrario, lo decidís dar de alta a través de las Herramientas para webmasters, lo estaréis dando a través de la cuenta de Google por lo que el sitio web será indexado en menos de un mes.
Por este motivo, la forma que os voy a explicar en esta entrada es la segunda.

Bien, pues comencemos el proceso para dar de alta. En primer lugar, debemos acceder a la página del servicio de Herramientas para webmasters de Google.

Introducimos nuestros datos de la cuenta de Google y nos aparecerá la siguiente pantalla:

En ella podemos ver las webs o blogs que tengáis dadas de alta cada uno de vosotros. Si no tenéis dado de alta nada, la lista de páginas aparecerá vacía.

Lo que debemos hacer es, en la caja de texto Haga clic para añadir un sitio, escribir la dirección URL de la web o blog que queremos indexar en Google.

Ejemplos, aunque se pueden ver en la imagen, serían los siguientes:

elblogdelainformatica.blogspot.com
www.telefonica.net/web2/jmgg1979

Una vez escrita la dirección URL, pulsaremos el botón Añadir sitio apareciendo la siguiente pantalla:
Como bien nos indica esta pantalla, el paso siguiente es verificar el sitio.

¿Qué quiere decir esto de verificar el sitio? Que debemos informar a Google que somos los administradores del sitio web que queremos indexar en su buscador. Para ello, pulsaremos el enlace Verifique su sitio web que aparece dentro del rectángulo de color amarillo.

Al pulsar sobre este enlace, nos aparecerá la pantalla con las diferentes formas de verificar el sitio web.
Para seleccionar el método de verificación, haremos clic en la lista desplegable que aparece y seleccionaremos la opción que queramos. En este ejemplo, seleccionaremos la opción Añadir una metaetiqueta.

Al seleccionar esta opción, os aparecerá justo debajo la metaetiqueta que debéis añadir a vuestra web o blog para realizar la verificación.

Lo único que debéis hacer es copiar el código HTML que os aparece y pegarla entre las etiquetas <head> y </head> del código de vuestra web o blog.

En el caso de que lo estéis realizando con un blog de Blogger, solo tendréis que acceder a la ficha Plantilla –> Editar HTML y pegar ese código entre las etiquetas citadas anteriormente.

Una vez que hayamos pegado ese código y actualizados los cambios en la web, haremos clic en el botón Verificar de la ventana de Herramientas para webmasters.

Al instante nos informará si el sitio web ha sido verificado correctamente o no.

Una vez verificado el sitio web, solo nos hace falta indicar a Google el sitemap de la web o blog.

El sitemap es un archivo que contiene todas las páginas de un sitio web. Para saber cómo indicárselo a Google, podéis hacer clic en este enlace, puesto que fue un tema ya explicado en este blog.

Indicado también el sitemap, habremos concluído el proceso de alta en Google y la indexación en el buscador, si no recuerdo mal, tardará entre una y tres semanas.

Agregar nueva columna - Plantilla Thisaway

En esta entrada veremos cómo agregar una nueva columna a la plantilla Thisaway y sus derivaciones.
En primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}

Empezaremos modificando el ancho del blog, por lo que en el código anterior sustituimos los 760 píxeles por 990 px.

Esta misma modificación la haremos en el código:

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}

A continuación, buscaremos el siguiente código:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Una vez encontrado, lo copiamos y lo pegamos justo debajo, realizando las modificaciones oportunas en el nombre y alineación de la barra, por lo que el código nuevo sería el siguiente:

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora insertaremos la nueva columna en el cuerpo (body) de la página. Para ello, buscamos el código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Éste es el código de la columna lateral que tenemos a la derecha del blog. Lo que haremos será copiar y pegar este código justo antes de la línea <div id='main-wrapper'>

Una vez pegado el código, modificaremos el nombre y eliminaremos los gadgets puesto que no pueden estar duplicados, por lo que el código de esta nueva columna quedará de la siguiente forma:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos los cambios efectuados en el código de la plantilla y, mediante la opción Elementos de la página (ficha Diseño), agregamos un gadget nuevo a la barra lateral creada.

Si guardamos los cambios y visualizamos el resultado, comprobaremos que la barra lateral derecha aparece en la parte inferior por falta de espacio.

Para solucionar esto, vamos a modificar el ancho de las barras laterales. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de ambas barras, es decir, los siguiente códigos:

barra lateral izquierda -> #newsidebar-wrapper {

barra lateral derecha -> #sidebar-wrapper {

Estos son los códigos con los que empieza la definición de ambas barras, lo único que tendremos que hacer es modificar el valor del ancho, que lo determina la propiedad width, a 220 píxeles en vez de 269 px que es el ancho que tiene definido actualmente.

Guardamos de nuevo los cambios y el resultado debería parecerse a la siguiente imagen:

Llegado a este punto, ya solo nos hace falta maquillar un poco la apariencia del blog eliminando o retocando las imágenes que aparecen tanto en el encabezado del blog como a derecha e izquierda que es el borde que visualizamos, en este caso, de color marrón más oscuro.

Si decidimos eliminar ambas imágenes solo se perderá ese aspecto redondeado en la parte inferior del encabezado y el borde derecho e izquierdo que aparece en marrón más oscuro.

A continuación os indico donde están definidas, en el código HTML de la plantilla, ambas imágenes y que cada uno decida si quiere eliminarlas o bien retocarlas bien con Photoshop o cualquier otro programa de retoque fotográfico.

Código que define la parte inferior del encabezado:

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}

Si decidimos eliminar la imagen, este código quedaría de la siguiente forma:

#header-wrapper {
padding-bottom: 15px;
}

Y, por último, os indico el código donde está definida la imagen que hace que aparezca ese borde a derecha e izquierda:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}

Al igual que antes, si decidís eliminarla, el código quedaría de la siguiente forma:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9;
}

Hecho esto, guardaríamos los cambios y el resultado, habiendo eliminado ambas imágenes, sería el siguiente:
Por cierto, hablando de programas de retoque fotográfico os he indicado que lo podéis hacer con Photoshop o cualquier otro programa.

Otro programa de retoque fotográfico es Gimp, cuya página principal podéis visitar haciendo clic en este enlace, y cuyo funcionamiento podéis aprender mediante este blog cuya autora es misaani.

Comprobar si Google tiene indexada nuestra página web o blog

Para saber si el buscador Google tiene indexada nuestra página web o blog, tendremos que acceder a la página principal del buscador y, en el apartado para realizar la búsqueda, escribir lo siguiente:

site:direccion_URL_sitio_web

Como ejemplo, para buscar las páginas de este blog que tiene indexadas el buscador Google, tendríamos que escribir lo siguiente:

site:elblogdelainformatica10.blogspot.com

o por ejemplo para conocer las páginas de mi página web que tiene indexadas Google, escribiríamos lo siguiente:

site:www.telefonica.net/web2/jmgg1979

Una vez escrito, pulsamos el botón Buscar con Google y nos aparecerán dichas páginas.

En entradas posteriores de este blog, os enseñaré como incluir vuestra página web o blog en el buscador Google.

Licencias Creative Commons

En más de un blog habréis visto un logotipo de licencia creative commons.

Este tipo de licencias permiten el uso del contenido del blog o página web siempre y cuando se cumplan las condiciones que elija el autor de ellos en la propia licencia.

Para crear este tipo de licencia tan solo tenéis que visitar la página oficial de Creative Commons.
o si queréis acceder directamente a la opción correspondiente para crearlas, pulsad este enlace.

¿Mi opinión sobre este tipo de licencias?

Pues la verdad, no es que esté muy de acuerdo con ellas, puesto que en cierto modo se está permitiendo la copia, algo que estoy totalmente en desacuerdo, de los artículos siempre y cuando se cite tanto la página como el autor.

A determinada gente le puede interesar esto, pero os pondré un caso real que suele ocurrir más de una vez y que, justamente, fue el motivo que me hizo no elegir este tipo de licencias para mi blog.

La cuestión es que usuario A escribe un artículo en su blog teniendo una licencia Creative Commons indicando que se puede copiar el contenido siempre y cuando se cite tanto la página como el autor.

Usuario B visita cierto día el blog de usuario A y copia ese artículo citando tanto la página del blog como al usuario A. Esto es totalmente legal debido a la licencia Creative Commons.

El caso está en que un día, usuario C busca información sobre un determinado tema, justo el tema que escribió usuario A y que copió usuario B.

La cuestión está en que usuario C obtiene unos resultados en el buscador Google sobre el tema buscado y, en primer lugar, aparece el tema del blog de usuario B que fue el que plagió el artículo del blog de usuario A, con lo que usuario C accede al blog de usuario B.

Evidentemente en el artículo del blog de usuario B está indicado que el artículo está copiado del blog de usuario A, pero una vez que usuario C encuentra la información no tiene por qué visitar el blog de usuario A puesto que ya ha encontrado lo que estaba buscando.

Creo que ya está claro el problema, pero si no está claro todavía, os lo explico. Por determinados motivos, el blog del usuario B está mejor posicionado que el de usuario A, por lo que en la página de resultados aparece en primer lugar.

Si el blog de usuario B tiene incorporada la publicidad Adsense de Google, este usuario se está aprovechando de un artículo que ni ha pensado ni ha perdido ni un solo minuto en escribir, puesto que lo ha copiado de otro, y además está ganando dinero por ello.

Este es el motivo por el que no estoy de acuerdo con este tipo de licencias. Espero que se haya entendido, porque con tanto usuario de por medio ... pero bueno no era plan de ir citando nombres y menos dar publicidad a usuarios que se aprovechan de otros, solo os indentificaré a uno, usuario C era yo.

Cambiar puntero del ratón en blog

Como bien dice el título de esta entrada, os enseñaré a personalizar el puntero del ratón en vuestro blog para que no tenga la apariencia de flecha.

En primer lugar, necesitaréis tener alojada en Internet la imagen del puntero que queréis poner. La extensiones que pueden tener los punteros son las habituales, ANI si el puntero es animado o CUR si no tiene animación.
Un apunte más sobre las extensiones es que podemos utilizar también GIF o PNG, pero solo serán visualizados si navegamos con Mozilla Firefox, si lo estamos haciendo con Internet Explorer estos punteros no serán visualizados.

Una vez tengamos decicida y alojada la imagen del puntero, pasaremos a introducir el código necesario. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la parte CSS del apartado BODY de nuestra plantilla.

body {

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

}

Una vez lo hayamos encontrado, solo hará falta pegar el siguiente código:

cursor: url("url_cursor_1"), url("url_cursor_2"), auto;

Una aclaración sobre el código pegado es que vemos varios cursores en él. La explicación es muy sencilla, hay navegadores que pueden encontrar problemas para mostrar ciertos cursores, como el ejemplo que hemos visto con las extensiones PNG o GIF y el navegador Internet Explorer. Por este motivo, en la definición de nuestro cursor, podemos poner varios cursores en el orden de preferencia siguiente:

1º - cursor_1
2º - cursor_2
3º - auto

El cursor auto indica la típica flecha que, normalmente, tenemos como puntero del ratón.

Si no tenemos cursores alternativos, podemos dejar el código de la siguiente forma:

cursor: url("url_cursor_1"), auto;

Una vez hayamos hecho las modificaciones en el código, solo hará falta guardar y visualizar los resultados.

Para quien no se aclare todavía con el código, aqui le dejo un ejemplo para que vea el resultado del código que deberíamos tener al final.

body {

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
cursor: url("http://mukuia.bay.livefilestore.com/y1peRlTnNIXRLeSkG1UKAG5kqOIr2hjrk-MJAqHhMKEYGBxMcerJFUSXeSyiAaMmKgXux_LoGEN0T7CH-3iLBd4-w/calendario.png"), auto;

}

Agregar nueva columna - Plantilla Rounders

En esta entrada veremos cómo agregar la nueva columna a la plantilla Rounders y sus variantes.
Esta es una de las plantillas que nos llevará algo más tiempo, puesto que además de agregar el código, hay que eliminar una de las dos barras laterales que vienen por defecto colocadas a la derecha en esta plantilla.

En primer lugar, antes de hacer cualquier modificación como siempre hacemos la copia de seguridad de la plantilla.

Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Page Structure, el siguiente código:

#sidebar-wrap {

width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Éste es el código de la barra que tenemos a la derecha de la pantalla. Copiamos este código y lo pegamos justo debajo cambiando el nombre por newsidebar y la alineación (float) por el valor $startSide.

Antes de seguir con el siguiente código, aprovechando que estamos en el apartado Page Structure, nos fijaremos los anchos que tenemos definidos tanto para el blog como para las columnas laterales y la central.

Como podemos ver en el código, el ancho del blog (outer-wrapper) está definido en 740 píxeles, la columna central (main-wrap1) en 485 píxeles y cada barra lateral (sidebar-wrap y newsidebar-wrap) en 240 píxeles.

Si sumamos los 485 px y los 480 px de ambas barras podemos comprobar que el ancho de 740 px del blog se queda corto, por lo que modificaremos este ancho a 990 píxeles.

Modificado el ancho del blog, vamos a eliminar una de las dos barras laterales que tenemos creadas por defecto en este blog.

Para ello, accedemos al cuerpo de la página (body) y buscamos el siguiente código:

<div id='sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div></div>

</div>

Éste es el apartado donde están creadas ambas barras, la de arriba que está identificada como sidebartop-wrap y la de abajo como sidebarbottom-wrap1.

Eliminaremos la barra inferior, por lo que tenemos que borrar el siguiente código:

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>

</div></div>

Una vez eliminado, agregaremos la barra lateral izquierda al blog. Para ello, insertamos el siguiente código antes de la línea <div id='main-wrap1'><div id='main-wrap2'>

<div id='newsidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar'>
</b:section>
</div></div>

</div>

Guardamos los cambios y, mediante la opción Elementos de la página, agregamos a la nueva barra un gadget para poder apreciar los cambios realizados.

Guardamos de nuevo los cambios y comprobamos el resultado que debería ser algo así:

Si queremos aumentar un poco el espacio que hay entre la columna izquierda y la central, introduciremos el siguiente código en el apartado Page Structure de la nueva columna (newsidebar):

padding-$endSide:1em;

con lo que el resultado final será este:

Si queréis arreglar un poco la zona del encabezado o incluso si habéis modificado las dimensiones de las barras laterales, tendréis que editar las imágenes que aparecen en la parte superior e inferior, puesto que son las causantes que ambos objetos, encabezado y columnas, tengan esa forma redondeada en las esquinas.

Imagen como firma de las entradas del blog

En más de un blog, habréis visto que en la parte inferior de las entradas, donde aparece el texto "Publicado por ...." en lugar del nombre del autor aparece una imagen.

Esto es justamente lo que os enseñaré con esta nueva entrada de El Blog de la Informática 10.

Agregar nueva columna - Plantilla Denim

Siguiendo con el tema agregar columnas al blog, hoy dedicaré esta entrada a la plantilla Denim y sus variantes.

Antes de empezar, aclararé que como la explicación es la misma en todas las plantillas, a partir de hoy iré directamente al código que hay que modificar sin detenerme mucho en explicaciones puesto que las tenéis en las entrada del día 17 de Abril.

En primer lugar, antes de hacer cualquier modificación hacemos la copia de seguridad de la plantilla tal y como está explicado en esta entrada.

Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Content, el siguiente código:

#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Éste es el código de la barra lateral que tenemos a la izquierda del blog. Lo que haremos será copiar este código y lo pegarlo justo debajo modificando el nombre sidebar por newsidebar y la alineación (float) por $startSide.

A continuación, bajamos casi hasta el final de la plantilla y, en el cuerpo de la página (body), buscamos el código siguiente:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Éste es el código de la barra lateral derecha que tenemos en el blog junto con los gadgets. Lo copiamos y lo pegamos justo antes de <div id='main-wrapper'>

Eliminamos los gadgets que tiene incorporada la barra lateral, porque si no lo hacemos nos dará error por duplicidad de gadgets ya que hay algunos que son únicos y no pueden estar duplicados.
Además cambiaremos el nombre sidebar por newsidebar tal y como hemos hecho anteriormente, y el resultado final del código debería ser este:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Una vez hecho esto, guardamos los cambios, accedemos a la ficha Diseño -> Elementos de la página y agregamos un gadget a la nueva barra para poder apreciar la existencia de la misma.

Guardamos de nuevo los cambios y comprobamos el resultado.

A continuación, necesitamos modificar el ancho del blog puesto que como podemos ver la barra derecha aparece en la parte inferior por falta de espacio.

Accedemos de nuevo a la ficha Diseño -> Edición de HTML y buscamos el siguiente código dentro del apartado Content:

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

Tenemos definido un ancho para el blog de 760 píxeles que modificaremos al valor 990 px.

Guardamos los cambios y comprobamos que el resultado se debería parecer a la imagen que se muestra a continuación:

PageRank

El PageRank es un sistema por el cual Google valora las páginas web, blogs, etc... El peor valor es cero y el mejor diez.

En este enlace de Wikipedia podréis encontrar algo más de información sobre este tema.

El algoritmo que utiliza Google para calcular el pagerank, según el enlace anterior, es:

PR(A) PageRank de la página A
PR(Ti) PageRank de las páginas Ti que enlazan a A
C(Ti) número de enlaces salientes de la página Ti
d factor de amortiguación que tiene un valor entre 0 y 1

A continuación os dejo algunas páginas donde podréis calcular el pagerank, incluirlo en vuestra página con una imagen o incluso insertar un formulario para que los usuarios puedan calcular el pagerank desde vuestra propia web:

calcularpagerank.com
directoriopr.es
free-pagerank.com
mipagerank.com
pagerankgo.com
pagerankof.com
seotester.com

Como habréis leído, una de las formas de aumentar el pagerank de vuestra página web o blog es consiguiendo enlaces, es decir, incluir vuestra página o blog en directorios y buscadores web.
Cabe destacar que no vale cualquiera ... bueno por valer, sí vale cualquiera ... pero lo que os hará subir vuestro pagerank será el alta en aquellos buscadores y directorios que tengan un pagerank superior al vuestro.

En la parte inferior de la columna de la derecha de este blog, tenéis un formulario para calcular el pagerank de vuestra web o blog.