Herramientas para Webmasters de Blogger

Menús para Blogger

2020-12-03T02:30:00.002-08:00

Presentamos algunos menús para poner en blogs de Blogger. Debajo de cada imagen está el enlace para ir al tutorial correspondiente.

Menú horizontal con CSS3, envolvente

Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog).

Ir al tutorial

Menú horizontal Estilo Apple Fancy Efecto Slide

Menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslicen hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera.

Ir al tutorial

Menú horizontal desplegable con CSS y Jquery, efecto deslizante

En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.

Ir al tutorial

Menú vertical con CSS y jquery, efecto acordeón

Cada elemento del menú despliega submenús con un efecto acordeón.

Ir al tutorial

Menú horizontal desplegable con Ajax

Éste es un menú de múltiples niveles.

Ir al tutorial

Menú horizontal dinámico, con submenús

Este menú es una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.

Ir al tutorial

Menú vertical desplegable

Este menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.

Ir al tutorial

Menú lateral con CSS y Jquery

Este menú en diapositiva tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.

Ir al tutorial

Convertir blog en web

2020-12-03T02:28:00.002-08:00

Convertir un blog en web, o darle apariencia de web, lo podemos lograr adecuando, en la página principal, una portada tipo magazine.

La portada estará formada por dos columnas de rectángulos, cada uno de los cuales corresponderá a una entrada, y en ellos pondremos:

Un resumen del contenido del post correspondiente.
Una imagen.
Tanto el resumen como la imagen los pondremos dentro de etiquetas <a href="#">, con la URL de la entrada correspondiente, para que sirvan de enlaces a la misma.
Todo lo anterior lo pondremos dentro de un bloque <div> al que le asignaremos la clase resumenOculto para aislarlo, de manera que no se vea en el texto de la entrada, sino únicamente en la portada o página principal.

El bloque descrito anteriormente lo ponemos en el editor de HTML, al comienzo de las entradas que van a aparecer en la portada, así:

 <div class="resumenOculto">

Código de la imagen<a href="URL de la entrada" title="Título de la entrada">Resumen de la entrada</a>

</div>

...poniendo en las partes resaltadas lo indicado en las mismas. El atributo title hace que, al poner el cursor sobre el resumen, aparezca el título de la entrada.

La imagen

La imagen que ponemos en cada rectángulo la subimos marcando en el diseño las opciones, en "Alineación de la imagen": "Ninguna", y en "Tamaño de la imagen": "Tamaño original".

El tamaño se adaptará al indicado en el código que veremos más adelante (punto 4).
El código de la imagen por defecto, subida con el diseño indicado, es como éste:

<a href="#" imageanchor="1"> <img border="0" src="#" alt="Título de la entrada" title="Título de la entrada"/></a>

El resaltado en amarillo lo agregamos.
En los sitios en donde están los signos numeral (#) Blogger pone por defecto la URL de la imagen, en el primero (con el atributo a href) como enlace, y en el segundo (con el atributo src) como identificador del archivo de la imagen. Reemplazamos la primera URL con la correspondiente a la entrada para que la imagen sirva de enlace a la entrada y no a la misma imagen.
Los atributos alt y title hacen que al poner el cursor sobre la imagen aparezca el título de la entrada. En las imágenes se utiliza, para este efecto, el atributo alt, pero ponemos también el atributo title ya que algunos navegadores no interpretan el primero.

Rectángulos que se verán e la portada

Los rectángulos que se verán en la portada serán los correspondientes a las últimas entradas creadas, y cuyo número será aquél que le asignemos en Configuración. Para esto vamos a:

Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de X entradas en la página principal

...y ponemos allí el número correspondiente. Este número deberá ser par, para que ambas columnas nos queden con igual número de rectángulos:

Guardamos configuración.

Obviamente el bloque <div>, indicado al comienzo del tutorial, tendremos que ponerlo en el editor de HTML al comienzo de cada entrada de las que van a aparecer en la portada.

Códigos que pondrán en funcionamiento la portada

Una vez hayamos puesto el bloque <div> en todas las entradas que aparecerán el la portada, ponemos en la plantilla los códigos que pondrán a funcionar la portada:

1.- Vamos a Editar HTML:

Diseño

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2.- Localizamos, en las plantillas nuevas, un código como éste, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo:

<b:if cond='data:blog.metaDescription == ""'>

      <!-- Then use the post body as the schema.org description,

          for good G+/FB snippeting. -->

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

    <b:else/>

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

    </b:if>

Y en plantillas antiguas un código como éste:

<div class='post-body entry-content'>

   <data:post.body/>

   <div style='clear: both;'/> <!-- clear for photos floats -->

</div>

...o como éste:

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

3.- En cualquier caso, el código que encontremos de los anteriores, lo eliminamos y lo reemplazamos con el siguiente:

<b:if cond='data:blog.pageType == "item"'>

  <div class='post-body entry-content'>

    <data:post.body/>

    <div style='clear: both;'/>

  </div>

<b:else/>

  <div class='post-body entry-content'>

    <div expr:id='"original-" + data:post.id' style='display:none;'>

      <data:post.body/>

    </div>

    <div style='clear: both;'/>

  </div>

  <!-- ejecutar función JavaScript -->

  <script type='text/javascript'>

    // enviará el ID generado por Blogger (data:post.id)

    ejecutarResumen('<data:post.id/>');

  </script>

</b:if>

Con este código conseguiremos:
- Aislar el resumen para que no aparezca sino en la página principal o portada.
- Que el contenido original del post no sea visible en la página principal o portada.
- Que cada post, en particular, no sufra ningún cambio.

4.- Antes de la etiqueta </head> pegamos el siguiente código:

<b:if cond='data:blog.pageType != "item"'>

  <style>

/*propiedades de los posts (resúmenes) en la portada*/

    .post {

      background-color: #E2EFFD;/*color del fondo*/

      float: left;

      width: 310px;/*ancho: mitad del cuerpo de las entradas*/

      height: 190px;/*el alto es fijo*/

      margin-right: 15px;

      margin-top: 0px;

      margin-bottom: 10px;

      overflow: hidden;

      padding-left: 5px;

      padding-top: 5px;

    }

/*propiedades de las imágenes en la portada*/

    .post img {

      float: left;

      margin: 0 5px 0 0;

      width: 100px;/*ancho*/

      height: 100px;/*alto*/

    }

  </style>

<b:else/>

  <style>

    .resumenOculto {display:none;}

  </style>

</b:if>

El /*color del fondo*/ es editable, ponemos el nuestro.
El /*ancho: mitad del cuerpo de las entradas*/, es editable, pero, por estética, se recomienda que no sea menor de 300px, para lo cual es recomendable que el blog tenga un ancho no menor de 950px. Si es necesario deberíamos ensanchar el blog; el tutorial al respecto está aquí.
El /*ancho*/ y el /*alto*/ de las imágenes son editables, pero se recomiendan los indicados en el código (100px). Debemos procurar que las imágenes sean lo más cuadradas posible, para que, al adaptarse a estas dimensiones, no se distorsionen.

5.- A continuación del anterior código pegamos el siguiente:

<script type='text/javascript'>

//<![CDATA[



// llega con el ID del post

function ejecutarResumen(idPOST) {

  var namePOST = "original-" + idPOST; // el DIV del post normal

  var divPOST = document.getElementById(namePOST);

  // buscamos los DIVS

  var lista = divPOST.getElementsByTagName("div");

  if(lista.length>0){

    // buscamos un DIV con la clase resumenOculto

    for(var i=0; i<lista.length; ++i) {

        if(lista[i].className=="resumenOculto") {

          // cambiamos el contenido del post por el de ese DIV

          divPOST.innerHTML = lista[i].innerHTML;

          // lo mostramos

          divPOST.style.display = "block";

          return;

        }

      }

    }

}

//]]>

</script>

Antes de guardar plantilla debemos utilizar la Vista previa para verificar que la portada nos haya quedado correcta. Lo más probable es que nó. Se pueden presentar los siguientes casos:

Que los rectángulos tuvieran un ancho superior al de la mitad del cuerpo de las entradas. En este caso todos los rectángulos quedarán en una sola columna, a la izquierda, y los enlaces pie de post se deaplazarán hacia arriba, a la derecha.
Que los rectángulos tuvieran un ancho inferior al de la mitad del cuerpo de las entradas. En este caso los rectángulos quedarán en las dos columnas, pero sobrará un espacio a la derecha, y los enlaces pie de post se desplazarán hacia arriba en el mismo.

Dependiendo del caso, aumentamos o disminuímos, en la línea correspondiente a /*ancho: mitad del cuerpo de las entradas*/ del código del punto cuatro, el número de pixeles, y vamos observando con la Vista previa hasta lograr que las dos columnas de rectángulos casen perfectamente.

5.- Guardamos plantilla.

6.- Eliminamos las fechas de las entradas, ya que éstas afectan la simetría de los rectángulos en la portada. En este tutorial se explica cómo eliminar las fechas.

Nota: Esta portada no se adapta muy bien a las plantillas Fantástico S.A. Aewsome, Picture Window y Filigrana.

Código de la cabecera Blogger

2020-11-28T08:02:00.003-08:00

Vamos a analizar el código de la cabecera en blogs de Blogger. Es conveniente conocerlo para el caso en que queramos hacer alguna modificación a la cabecera, sepamos qué partes del mismo debemos alterar.

Plantillas nuevas

Tomaremos como referencia la plantilla Simple.

Cabecera por defecto:

(El título y la descripción están, por defecto, alineados a la izquierda; los hemos puesto en el centro para una mejor presentación del tutorial)

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

...y localizamos el siguiente código, correspondiente a la cebecera, poniendo .header-outer dentro del rectángulo de búsqueda (Search):

/* Header

----------------------------------------------- */

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

_background-image: none;

}



.Header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}



.Header h1 a {

color: $(header.text.color);

}



.Header .description {

font-size: $(description.text.size);

color: $(description.text.color);

}



.header-inner .Header .titlewrapper {

padding: 22px $(header.padding);

}



.header-inner .Header .descriptionwrapper {

padding: 0 $(header.padding);

}

Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.

Primer bloque

Este bloque corresponde a la envoltura de la cabecera; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:

Segundo bloque

Este bloque corresponde al fondo del título del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:

Tercer bloque

Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras del título del blog visto en cada entrada en particular, por ejemplo si les cambiamos el color:

Cuarto bloque

Este bloque corresponde a los caracteres de la descripción del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras de la descripción del blog, por ejemplo si les cambiamos el color:

Quinto bloque

Este bloque corresponde a la sección de la cabecera o espacio que ocupa la cabecera dentro de la envoltura de la misma; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:

Es conveniente anotar que esta sección de la cabecera está encima de la envoltuta (primer bloque); es por eso que el color de fondo que se verá será el de la sección de la cabecera. Debemos tener cuidado al hacer cambios en las dimensiones de la envoltura y de la sección, procurando que queden iguales ya que, si por ejemplo, la envoltura es más larga que la sección, o viceversa, se nos va a presentar alguna desconfiguración en la ubicación del título y la descripción. Para asegurarnos de que esto no ocurra les ponemos, a las dos, colores diferentes, y dejamos más larga la envoltura que la sección; notaremos la diferencia en el contraste de los colores, entonces modificamos la dimensión de la envoltura hasta igualarla con la sección y después les ponemos el mismo color.

Sexto bloque

Este bloque corresponde al fondo de la descrición del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:

Plantillas Antiguas

Tomaremos como referencia la plantilla Mínima.

Cabecera por defecto:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

...y localizamos el siguiente código, correspondiente a la cebecera, poniendo #header-wrapper dentro del rectángulo de búsqueda (Search):

/* Header

-----------------------------------------------

*/



#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}



#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}



#header { 

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}



#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}



#header a {

color:$pagetitlecolor;

text-decoration:none;

}



#header a:hover {

color:$pagetitlecolor;

}



#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}



#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.

Primer bloque

Este bloque corresponde al fondo externo de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:

Segundo bloque

Este bloque corresponde al fondo interno de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:

Tercer bloque

Este bloque corresponde al fondo intermedio de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:

Los anteriores tres fondos están superpuestos, así:

...por consiguiente cualquier modificación que hagamos en las magnitudes (alto o ancho) de la cabecera, la debemos hacer en los tres fondos, guardando las proporciones para conservar la congruencia.

Cuarto bloque

Este bloque corresponde a los caracteres del título del blog. Por consiguiente para cualquier modificación al texto en el título del blog (color, tamaño de fuente, familia de fuente, etc.) debemos hacerla en este bloque.

Quinto bloque

Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular.

Sexto bloque

Este bloque corresponde a los caracteres del título del blog cuando ponemos el cursor encima y visto en cada entrada en particular.

Séptimo bloque

Este bloque no desempeña ninguna función.

Numerar los comentarios en blogger

2020-11-28T08:00:00.003-08:00

Para numerar los comentarios:

1. vamos a:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

        <script type='text/javascript'>var CommentsCounter=0;</script>

          <b:loop values='data:post.comments' var='comment'>

            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

3. Dentro del anterior código agregamos la línea resaltada.

4. Un poco más abajo del anterior código localizamos el siguiente:

<b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

              <b:else/>

                <data:comment.author/>

              </b:if>

5. A continuación pegamos éste:

<span class='numberingcomments' style='float: right; font-size: 16px; color:#ffffff'>

<a rel='nofollow' style='text-decoration:none' title='Comment Link'>#

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter);

</script>

</a>

</span>

resaltadas

6. Guardar plantilla.

Justificar textos en entradas y comentarios Blogger

2020-11-28T07:59:00.001-08:00

Justificar los textos de las entradas

Los textos de las entradas los podemos justificar de tres maneras:

Manualmente
En plantilla de entradas
En Edición de HTML

Justificación manual

Creamos la entrada en el editor HTML poniendo el texto de la misma entre las siguientes etiquetas:

 <div style="text-align: justify;">

Aquí el texto de la entrada

</div>

Justificación en plantilla de entradas

Vamos a:

Diseño

►

Configuración

►

Entradas y comentarios

►

Plantilla de las entradas

►

Añadir

Hacemos click en Añadir y, en la caja de texto que se despliega, pegamos las siguientes etiquetas:

 <div style="text-align: justify;">

</div>

Cada vez que vayamos a crear una entrada, en el editor HTML aparecerán estas etiquetas entre las cuales ponemos el texto de la misma.

Justificación en Edición de HTML

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.post-body {

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

text-align: justify;

}

...y agregamos, al final, la línea resaltada.

Todas las entradas se justificarán automáticamente.

Justificación de los textos de los comentarios

En las plantillas antiguas los textos de los comentarios no se justifican por defecto; podemos lograrlo así:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.comment-body {

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

text-align: justify;

}

...y agregamos, al final, la línea resaltada.

Añadir URL de entrada en textos copiados (copy and paste)

2020-11-28T07:49:00.002-08:00

Todos hemos visto, al copiar y pegar texto de algunos sitios web, que en la parte inferior de lo copiado aparece información que hace referencia a la URL de la fuente, en algunos casos acompañada con un aviso de copyright. Es algo así como: «Leer más aquí: www.sitio.com», y en la parte inferior el aviso de copyright.

Este método lo podemos implementar en nuestro blog para que cuando alguien copie el texto de una entrada, o parte del mismo, aparezca insertada, en la parte inferior del texto copiado, información de la entrada, como la URL y el nombre del blog con el aviso de copyright (derechos de autor).

Utilizamos la librería jQuery de JavaScript para que el código sea interpretado más fácilmente por todos los navegadores

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search):

</body>

Inmediatamente antes de la anterior etiqueta pegamos el siguiente código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

//<![CDATA[

$("body").bind('copy', function (e) {

if (typeof window.getSelection == "undefined") return;

var miblog = document.getElementsByTagName('body')[0];

var seleccionar = window.getSelection();

if (("" + seleccionar).length < 50) return;

var nuevodiv = document.createElement('div');

nuevodiv.style.position = 'absolute';

nuevodiv.style.left = '-99999px';

miblog.appendChild(nuevodiv);

nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());

if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {

nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";

}

nuevodiv.innerHTML += "<br/><br/>Leer más aquí: <a href='"

+ document.location.href + "'>"

+ document.location.href + "</a><br/>&copy; Nombre del blog";

seleccionar.selectAllChildren(nuevodiv);

window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);

});

//]]>

</script>

La primera línea del código corresponde a la librería jQuery; si ya tenemos una en nuestra plantilla, la omitimos.

La línea con este resaltado pone un mínimo de caracteres copiados para que la información aparezca. En este caso hemos puesto un límite de cincuenta caracteres, es decir, para que la información aparezca la copia debe tener cincuenta caracteres o más, en caso contrario no aparecerá; esta cifra la podemos cambiar. Si no queremos poner un límite, sino que la información aparezca al copiar cualquier número de caracteres, eliminamos esa línea.

El texto Leer más aquí podemmos cambiarlo.

En el texto resaltado con este color cambiamos Nombre del blog por el correspondiente a nuestro blog. Si no queremos mostrar copyrright con el nombre del blog eliminamos lo resaltado con amarillo.

Poner borde a imágenes de una entrada en Blogger

2020-11-28T07:35:00.007-08:00

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:

Imagen a la izquierda

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>

Imagen a la derecha

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>

Imagen en el centro

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>

En URL ponemos la URL de la imagen correspondiente.
En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Códigos de colores HTML aquí.

Poner borde a imágenes de una entrada en Blogger

2015-04-09T15:04:00.000-07:00

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:

Imagen a la izquierda

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>

Imagen a la derecha

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>

Imagen en el centro

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>

En URL ponemos la URL de la imagen correspondiente.
En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Códigos de colores HTML aquí.

Añadir URL de entrada en textos copiados (copy and paste)

2014-08-27T07:04:00.001-07:00

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search):

</body>

Inmediatamente antes de la anterior etiqueta pegamos el siguiente código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

//<![CDATA[

$("body").bind('copy', function (e) {

if (typeof window.getSelection == "undefined") return;

var miblog = document.getElementsByTagName('body')[0];

var seleccionar = window.getSelection();

if (("" + seleccionar).length < 50) return;

var nuevodiv = document.createElement('div');

nuevodiv.style.position = 'absolute';

nuevodiv.style.left = '-99999px';

miblog.appendChild(nuevodiv);

nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());

if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {

nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";

}

nuevodiv.innerHTML += "<br/><br/>Leer más aquí: <a href='"

+ document.location.href + "'>"

+ document.location.href + "</a><br/>&copy; Nombre del blog";

seleccionar.selectAllChildren(nuevodiv);

window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);

});

//]]>

</script>

La primera línea del código corresponde a la librería jQuery; si ya tenemos una en nuestra plantilla, la omitimos.

El texto Leer más aquí podemmos cambiarlo.

En el texto resaltado con este color cambiamos Nombre del blog por el correspondiente a nuestro blog. Si no queremos mostrar copyrright con el nombre del blog eliminamos lo resaltado con amarillo.

Justificar textos en entradas y comentarios Blogger

2014-03-16T09:36:00.000-07:00

Justificar los textos de las entradas

Los textos de las entradas los podemos justificar de tres maneras:

Manualmente
En plantilla de entradas
En Edición de HTML

Justificación manual

Creamos la entrada en el editor HTML poniendo el texto de la misma entre las siguientes etiquetas:

 <div style="text-align: justify;">

Aquí el texto de la entrada

</div>

Justificación en plantilla de entradas

Vamos a:

Diseño

►

Configuración

►

Entradas y comentarios

►

Plantilla de las entradas

►

Añadir

Hacemos click en Añadir y, en la caja de texto que se despliega, pegamos las siguientes etiquetas:

 <div style="text-align: justify;">

</div>

Cada vez que vayamos a crear una entrada, en el editor HTML aparecerán estas etiquetas entre las cuales ponemos el texto de la misma.

Justificación en Edición de HTML

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.post-body {

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

text-align: justify;

}

...y agregamos, al final, la línea resaltada.

Todas las entradas se justificarán automáticamente.

Justificación de los textos de los comentarios

En las plantillas antiguas los textos de los comentarios no se justifican por defecto; podemos lograrlo así:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.comment-body {

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

yyyyyyyyyy: xxxxx;

text-align: justify;

}

...y agregamos, al final, la línea resaltada.

Numerar los comentarios en blogger

2014-02-26T07:39:00.001-08:00

Para numerar los comentarios:

1. vamos a:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

        <script type='text/javascript'>var CommentsCounter=0;</script>

          <b:loop values='data:post.comments' var='comment'>

            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

3. Dentro del anterior código agregamos la línea resaltada.

4. Un poco más abajo del anterior código localizamos el siguiente:

<b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

              <b:else/>

                <data:comment.author/>

              </b:if>

5. A continuación pegamos éste:

<span class='numberingcomments' style='float: right; font-size: 16px; color:#ffffff'>

<a rel='nofollow' style='text-decoration:none' title='Comment Link'>#

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter);

</script>

</a>

</span>

resaltadas

6. Guardar plantilla.

Código de la cabecera Blogger

2014-02-16T15:38:00.000-08:00

Plantillas nuevas

Tomaremos como referencia la plantilla Simple.

Cabecera por defecto:

(El título y la descripción están, por defecto, alineados a la izquierda; los hemos puesto en el centro para una mejor presentación del tutorial)

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

...y localizamos el siguiente código, correspondiente a la cebecera, poniendo .header-outer dentro del rectángulo de búsqueda (Search):

/* Header

----------------------------------------------- */

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

_background-image: none;

}



.Header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}



.Header h1 a {

color: $(header.text.color);

}



.Header .description {

font-size: $(description.text.size);

color: $(description.text.color);

}



.header-inner .Header .titlewrapper {

padding: 22px $(header.padding);

}



.header-inner .Header .descriptionwrapper {

padding: 0 $(header.padding);

}

Segundo bloque

Este bloque corresponde al fondo del título del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:

Tercer bloque

Cuarto bloque

Quinto bloque

Sexto bloque

Plantillas Antiguas

Tomaremos como referencia la plantilla Mínima.

Cabecera por defecto:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

...y localizamos el siguiente código, correspondiente a la cebecera, poniendo #header-wrapper dentro del rectángulo de búsqueda (Search):

/* Header

-----------------------------------------------

*/



#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}



#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}



#header { 

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}



#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}



#header a {

color:$pagetitlecolor;

text-decoration:none;

}



#header a:hover {

color:$pagetitlecolor;

}



#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}



#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.

Primer bloque

Este bloque corresponde al fondo externo de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:

Segundo bloque

Este bloque corresponde al fondo interno de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:

Los anteriores tres fondos están superpuestos, así:

Convertir blog en web

2014-01-09T15:06:00.000-08:00

Un resumen del contenido del post correspondiente.
Una imagen.
Tanto el resumen como la imagen los pondremos dentro de etiquetas <a href="#">, con la URL de la entrada correspondiente, para que sirvan de enlaces a la misma.
Todo lo anterior lo pondremos dentro de un bloque <div> al que le asignaremos la clase resumenOculto para aislarlo, de manera que no se vea en el texto de la entrada, sino únicamente en la portada o página principal.

El bloque descrito anteriormente lo ponemos en el editor de HTML, al comienzo de las entradas que van a aparecer en la portada, así:

 <div class="resumenOculto">

Código de la imagen<a href="URL de la entrada" title="Título de la entrada">Resumen de la entrada</a>

</div>

...poniendo en las partes resaltadas lo indicado en las mismas. El atributo title hace que, al poner el cursor sobre el resumen, aparezca el título de la entrada.

La imagen

La imagen que ponemos en cada rectángulo la subimos marcando en el diseño las opciones, en "Alineación de la imagen": "Ninguna", y en "Tamaño de la imagen": "Tamaño original".

El tamaño se adaptará al indicado en el código que veremos más adelante (punto 4).
El código de la imagen por defecto, subida con el diseño indicado, es como éste:

<a href="#" imageanchor="1"> <img border="0" src="#" alt="Título de la entrada" title="Título de la entrada"/></a>

El resaltado en amarillo lo agregamos.
En los sitios en donde están los signos numeral (#) Blogger pone por defecto la URL de la imagen, en el primero (con el atributo a href) como enlace, y en el segundo (con el atributo src) como identificador del archivo de la imagen. Reemplazamos la primera URL con la correspondiente a la entrada para que la imagen sirva de enlace a la entrada y no a la misma imagen.
Los atributos alt y title hacen que al poner el cursor sobre la imagen aparezca el título de la entrada. En las imágenes se utiliza, para este efecto, el atributo alt, pero ponemos también el atributo title ya que algunos navegadores no interpretan el primero.

Rectángulos que se verán e la portada

Los rectángulos que se verán en la portada serán los correspondientes a las últimas entradas creadas, y cuyo número será aquél que le asignemos en Configuración. Para esto vamos a:

Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de X entradas en la página principal

...y ponemos allí el número correspondiente. Este número deberá ser par, para que ambas columnas nos queden con igual número de rectángulos:

Guardamos configuración.

Obviamente el bloque <div>, indicado al comienzo del tutorial, tendremos que ponerlo en el editor de HTML al comienzo de cada entrada de las que van a aparecer en la portada.

Códigos que pondrán en funcionamiento la portada

Una vez hayamos puesto el bloque <div> en todas las entradas que aparecerán el la portada, ponemos en la plantilla los códigos que pondrán a funcionar la portada:

1.- Vamos a Editar HTML:

Diseño

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2.- Localizamos, en las plantillas nuevas, un código como éste, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo:

<b:if cond='data:blog.metaDescription == ""'>

      <!-- Then use the post body as the schema.org description,

          for good G+/FB snippeting. -->

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

    <b:else/>

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

    </b:if>

Y en plantillas antiguas un código como éste:

<div class='post-body entry-content'>

   <data:post.body/>

   <div style='clear: both;'/> <!-- clear for photos floats -->

</div>

...o como éste:

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

3.- En cualquier caso, el código que encontremos de los anteriores, lo eliminamos y lo reemplazamos con el siguiente:

<b:if cond='data:blog.pageType == "item"'>

  <div class='post-body entry-content'>

    <data:post.body/>

    <div style='clear: both;'/>

  </div>

<b:else/>

  <div class='post-body entry-content'>

    <div expr:id='"original-" + data:post.id' style='display:none;'>

      <data:post.body/>

    </div>

    <div style='clear: both;'/>

  </div>

  <!-- ejecutar función JavaScript -->

  <script type='text/javascript'>

    // enviará el ID generado por Blogger (data:post.id)

    ejecutarResumen('<data:post.id/>');

  </script>

</b:if>

Con este código conseguiremos:
- Aislar el resumen para que no aparezca sino en la página principal o portada.
- Que el contenido original del post no sea visible en la página principal o portada.
- Que cada post, en particular, no sufra ningún cambio.

4.- Antes de la etiqueta </head> pegamos el siguiente código:

<b:if cond='data:blog.pageType != "item"'>

  <style>

/*propiedades de los posts (resúmenes) en la portada*/

    .post {

      background-color: #E2EFFD;/*color del fondo*/

      float: left;

      width: 310px;/*ancho: mitad del cuerpo de las entradas*/

      height: 190px;/*el alto es fijo*/

      margin-right: 15px;

      margin-top: 0px;

      margin-bottom: 10px;

      overflow: hidden;

      padding-left: 5px;

      padding-top: 5px;

    }

/*propiedades de las imágenes en la portada*/

    .post img {

      float: left;

      margin: 0 5px 0 0;

      width: 100px;/*ancho*/

      height: 100px;/*alto*/

    }

  </style>

<b:else/>

  <style>

    .resumenOculto {display:none;}

  </style>

</b:if>

El /*color del fondo*/ es editable, ponemos el nuestro.
El /*ancho: mitad del cuerpo de las entradas*/, es editable, pero, por estética, se recomienda que no sea menor de 300px, para lo cual es recomendable que el blog tenga un ancho no menor de 950px. Si es necesario deberíamos ensanchar el blog; el tutorial al respecto está aquí.
El /*ancho*/ y el /*alto*/ de las imágenes son editables, pero se recomiendan los indicados en el código (100px). Debemos procurar que las imágenes sean lo más cuadradas posible, para que, al adaptarse a estas dimensiones, no se distorsionen.

5.- A continuación del anterior código pegamos el siguiente:

<script type='text/javascript'>

//<![CDATA[



// llega con el ID del post

function ejecutarResumen(idPOST) {

  var namePOST = "original-" + idPOST; // el DIV del post normal

  var divPOST = document.getElementById(namePOST);

  // buscamos los DIVS

  var lista = divPOST.getElementsByTagName("div");

  if(lista.length>0){

    // buscamos un DIV con la clase resumenOculto

    for(var i=0; i<lista.length; ++i) {

        if(lista[i].className=="resumenOculto") {

          // cambiamos el contenido del post por el de ese DIV

          divPOST.innerHTML = lista[i].innerHTML;

          // lo mostramos

          divPOST.style.display = "block";

          return;

        }

      }

    }

}

//]]>

</script>

Antes de guardar plantilla debemos utilizar la Vista previa para verificar que la portada nos haya quedado correcta. Lo más probable es que nó. Se pueden presentar los siguientes casos:

Que los rectángulos tuvieran un ancho superior al de la mitad del cuerpo de las entradas. En este caso todos los rectángulos quedarán en una sola columna, a la izquierda, y los enlaces pie de post se deaplazarán hacia arriba, a la derecha.
Que los rectángulos tuvieran un ancho inferior al de la mitad del cuerpo de las entradas. En este caso los rectángulos quedarán en las dos columnas, pero sobrará un espacio a la derecha, y los enlaces pie de post se desplazarán hacia arriba en el mismo.

5.- Guardamos plantilla.

6.- Eliminamos las fechas de las entradas, ya que éstas afectan la simetría de los rectángulos en la portada. En este tutorial se explica cómo eliminar las fechas.

Nota: Esta portada no se adapta muy bien a las plantillas Fantástico S.A. Aewsome, Picture Window y Filigrana.

Menús para Blogger

2013-11-21T16:44:00.000-08:00

Presentamos algunos menús para poner en blogs de Blogger. Debajo de cada imagen está el enlace para ir al tutorial correspondiente.

Menú horizontal con CSS3, envolvente

Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog).

Ir al tutorial

Menú horizontal Estilo Apple Fancy Efecto Slide

Ir al tutorial

Menú horizontal desplegable con CSS y Jquery, efecto deslizante

En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.

Ir al tutorial

Menú vertical con CSS y jquery, efecto acordeón

Cada elemento del menú despliega submenús con un efecto acordeón.

Ir al tutorial

Menú horizontal desplegable con Ajax

Éste es un menú de múltiples niveles.

Ir al tutorial

Menú horizontal dinámico, con submenús

Este menú es una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.

Ir al tutorial

Menú vertical desplegable

Este menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.

Ir al tutorial

Menú lateral con CSS y Jquery

Ir al tutorial

Poner borde a las imágenes de las entradas en Blogger

2013-11-02T20:06:00.001-07:00

Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog.

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta:

]]></b:skin>

...e, inmediatamente antes, pegamos el siguiete código:

.post img, table.tr-caption-container {

  padding: 0px;

  border: 8px solid #fe4a4a;

}

Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos:

El resaltado en este color adjudica un espacio entre el borde y la imagen, que en este ejemplo no existe ya que es de cero pixeles. Si queremos que haya ese espacio cambiamos el cero por el número de pixeles que le dé el espacio deseado.
El resaltado en este color adjudica el ancho al borde.
El resaltado en este color es la propiedad que le da un estilo al borde. Ese estilo puede ser:
- dotted: borde en línea punteada.
- dashed: borde en línea discontinua.
- solid: borde normal o en línea continua.
- double: borde en línea doble.
- groove: borde con efecto ranura o acanalado.
- ridge: borde con efecto cresta, rugosidad o cordoncillo.
- inset: borde con proyección o perspectiva hacia adentro.
- outset: borde con proyección o perspectiva hacia afuera.
El resaltado en este color es el código hexadecimal del color adjudicado al borde.

Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):

Imagen sin borde

Código	Borde
`.post img, table.tr-caption-container { padding: 0px; border: 5px dotted #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 5px dashed #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px solid #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px double #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px groove #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px ridge #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px inset #fe4a4a; }`
`.post img, table.tr-caption-container { padding: 0px; border: 8px outset #fe4a4a; }`

Efecto sombra para títulos de las entradas Blogger

2013-10-12T15:30:00.001-07:00

Para darle un efecto de sombra a los títulos de las entradas vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos la siguiente etiqueta, poniéndola dentro del rectángulo de búsqueda (search):

]]></b:skin>

Inmediatamente antes pegamos el siguiente código:

.post-title {

  text-shadow: #58acfa 6px 6px 2px;

}

Vista previa ► Guardar plantilla

Análisis del código:

58acfa: es el código hexadecimal correspondiente al color asignado a la sombra. Le ponemos el nuéstro (códigos hexadecimales aquí).
6px: asigna un margen vertical entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará a la izquierda del texto, sin signo, a la derecha.
6px: asigna un margen horizontal entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará encima del texto, sin signo, debajo.
2px: le asigna un aspecto difuminado (diluído, desvanecido, desdibujado) a la sombra; a mayor número de pixeles más difuminado (menos nitidez).

Con el anterior código los títulos de las entradas se verán así:

Otras formas de implementar el efecto sombra

Algunas plantillas, como la Simple, tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios; de ahí que si agregamos a ese código las propiedades que asignan el efecto sombra, adquirirán ese efecto tanto los unos como los otros. Veamos:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos el código antes mencionado poniendo, en el cuadro de búsqueda (search), una línea del mismo:

h3.post-title, .comments h4 {

  font: $(post.title.font);

  margin: .75em 0 0;

}

...y le agregamos la línea con las propiedades que asignan el efecto sombra, debiendo al código quedar así:

h3.post-title, .comments h4 {

  font: $(post.title.font);

  margin: .75em 0 0;

  text-shadow: #58acfa 6px 6px 2px;

}

Otras plantillas, como la Awesome inc., también tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios, con la diferencia que la etiqueta h4, asignada a los títulos de los comentarios puede ser usada para poner el efecto sombra a cualquier texto que queramos poner, con ese efecto, en cualquier entrada (en el editor HTML) o en gadgets HTML/JavaScript, teniendo en cuenta que los caracteres de esos textos tendrán el mismo tamaño que los de los títulos. Ese código es el siguiente:

h3.post-title, h4 {

  font: $(post.title.font);

  color: $(post.title.text.color);

}

Para poner el efecto sombra le agregamos la misma línea que agregamos al código anterior.

Y para darles efecto sombra a textos en una entrada o en un gadget HTML/JavaScript, utilizando la etiqueta h4, debemos encerrar esos textos entre las etiquetas, así:

<h4>Aquí el texto</h4>

Efecto sombra para textos con etiquetas <h>

Las etiquetas <h> son: <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5> y <h6>...</h6>. A mayor número menor es el tamaño de los acracteres correspondientes al texto que encierran.

Habilitando en la plantilla el efecto sombra para las etiquetas <h> podemos poner, en entradas o en gadgets HTML/JavaScript, textos con ese efecto. Esa habilitación la hacemos así:

Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

Localizamos, poniéndola en el rectángulo de búsqueda, la siguiente etiqueta.

]]></b:skin>

...e inmediatamente antes pegamos el siguiete código:

h1, h2, h3, h4, h5, h6 {

  text-shadow: #58acfa 6px 6px 2px;

}

(Para modificar el formato del efecto sombra tenemos en cuenta el "Análisis del código" hecho al principio del tutorial).

Con el anterior código en la plantilla, cualquier texto en una entrada o en un gadget HTML/JavaScritp puesto dentro de una de las etiquetas <h>, adquirirá el efecto sombra.

Debemos tener en cuenta lo siguiente:

algunas etiquetas <h> asignan, dentro de la plantilla, formato a los diferentes títulos (de las entradas, de gadgets, de la sidebar, de los comentarios, etc.).
Habilitando el código con el efecto sombra para las etiquetas <h> ese efecto también lo adquirirán esos títulos.
También dentro de la plantilla algunas etiquetas <h> pueden tener un tamaño predeterminado diferente al que estas etiquetas asignan por defecto.

Los tamaños que las etiquetas <h> asignan por defecto son los siguientes:

`<h1>Texto con efecto sombra</h1>:`
`<h2>Texto con efecto sombra</h2>:`
`<h3>Texto con efecto sombra</h3>:`
`<h4>Texto con efecto sombra</h4>`:
`<h5>Texto con efecto sombra</h5>:`
`<h6>Texto con efecto sombra</h6>:`

Organizar etiquetas por secciones en Blogger

2013-10-07T14:18:00.000-07:00

Cuando en nuestro blog tratamos temas diferentes, para facilitar la búsqueda a los usuarios podemos organizar las etiquetas por secciones, así:

Vamos a:

Página principal ► Diseño ► Diseño ► Añadir un gadget (en la sidebar)

...y añadimos tantos gadgets del tipo "Etiquetas"...

...cuantas secciones sean aquéllas en las que vamos a dividir el contenido del blog.

A cada uno de los gadgets le damos la siguiente configuración:

En Título ponemos el nombre del tema al que correspondan las entradas cuyas etiquetas aparecerán en cada gadget.
En Selecciona las etiquetas que quieras que aparezcan seleccionamos las etiquetas de las entradas correspondientes al tema de cada gadget.
Click en Listo
Click enn Guardar

En cada gadget quedarán las etiquetas como las presenta Blogger, por defecto, con la configuración "Lista". Para darles una mejor configuración a los gadgets los personalizamos como se explica en este turotial. El código allí indicado personaliza todos los gadgets del tipo "Label" ("Etiqueta") que añadamos.

Error 404 en Blogger, identificar, personalizar, solucionar

2013-10-05T11:17:00.001-07:00

El error 404 se produce cuando los robots de los buscadores no pueden rastrear una URL ya que conduce a una entrada que no existe porque:

la entrada fue eliminada, o
la URL fue mal escrita.

Google dice: "Por lo general, los errores 404 no afectan a la posición que ocupa un sitio en los resultados de búsqueda, pero se pueden utilizar para mejorar la experiencia del usuario". No afectan la posición de un blog, en el caso de Blogger, pero sí el número de sus visitantes.

¿Por qué los errores 404 pueden disminuír el número de visitantes de un blog?

Porque si un usuario accede a un blog en busca de una entrada que no existe se va a encontar con este mensaje:

La página que estabas buscando en este blog no existe.

Esta visita resulta fugaz e inútil, y muy posiblemente el visitante abandone el blog y no vuelva. Si hubiera encontrado lo que buscaba sería un muy probable visitante para otras oportunidades.

Personalizar el mensaje de error

El mensaje antes indicado no da ninguna alternativa al visitante. Podemos personalizarlo cambiándolo por otro más amable, y dándole, al usuario, la opción de ir a la página principal del blog.

Para personalizar el mensaje de error vamos a:

Diseño ► Configuración ► Preferencias para motores de búsqueda ► Mensaje de página no encontrada personalizado ► Editar

En el área de texto escribimos el siguiente mensaje seguido del código que redirecciona a la página principal del blog:

Discúlpenos, se ha presentado un inconveniente. En cinco segundos usted será redireccionado a la página principal del blog.



<script type = "text/javascript">

//Redireccion 404

BSPNF_redirect = setTimeout(function() {

location.pathname= "/"

}, 5000);

</script>

El mensaje lo podemos cambiar. En el código 5000 corresponde a milécimas de segundo (cinco segundos); podemos modificar el tiempo de espera.

Veamos en funcionamiento la anterior personalización haciendo click sobre la siguiente URL correspondiente a una entrada inexistente en un blog y que redirecciona a la página principal del mismo:

http://pruebaredireccionar.blogspot.com/entrada-inexistente

Prevenir errores 404

Los errores 404 prevenibles son los producidos por entradas eliminadas, y la forma obvia de prevenirlos es no eliminando entradas; es más conveniente redireccionarlas, para que las URLs de las mismas no lleven a ellas sino, por ejemplo, a la página principal del blog o a otra entrada.

Entonces, si queremos "desaparecer" una entrada de nuestro blog no la eliminamos sino que ponemos en el editor HTML de la misma el siguiente código:

<script>

location.href="Aquí la URL de la página principal o de la entrada hacia la que queremos redireccionar";

</script>

De esta manera si alguien, desde un buscador, hace click en el enlace a la entrada que no queremos mostrar, será llevado, no a esa entrada, sino a la que la hemos redireccionado con el código anterior.

Identificar errores 404

Nuestro blog puede tener errores 404 sin que nosotros lo sepamos. Para saber si existen esos errores y poder identificarlos accedemos, con nuestra cuenta de Google a Herramientas para webmasters de Google, añadimos nuestro blog haciendo click en la pestaña "Añadir un sitio" de la parte superior derecha y seguimos las instrucciones allí indicadas.

Añadido el blog:

1. hacemos click sobre la imagen del mismo o sobre el enlace:

2. En el menú que aparece a la izquierda desplegamos el submenú "Rastreo" con un click sobre el mismo, a continuación click sobre "Errores de rastreo" y, por último, click sobre el cuadro que muestra el número de errores "No se encuentra", que son los errores 404.

►

3. En la parte inferior aparecerán, en un cuadro estadístico y en una lista, los errores 404 detectados en los últimos 90 días.

4. Un click sobre cada URL de la lista nos mostrará un cuadro con la URL de la entrada que no pudo ser rastreada puesto que no existe, y los detalles del error.

Solucionar errores 404

Los errores 404, producidos por entradas que han sido eliminadas, se pueden solucionar así:

Identificadas las URLs causantes de los errores, como ya se explicó, las reconstruímos creando entradas con URLs idénticas. Pongamos como ejemplo una URL como la siguiente:

http://titulodelblog.blogspot.com/2013/02/titulo-de-la-entrada.html

Esta URL correspondería a una entrada creada en el segundo mes (02) de 2013. Para reconstruír esa URL creamos una entrada con el título idéntico al que aparece en la misma reemplazando, obviamente, cada guión por un espacio. En cuanto a la fecha Blogger pone, por defecto, la del día en que se crea la entrada, entonces para que quede con la fecha que necesitamos la programamos en el menú "Configuración de la entrada" que está en el lado derecho del editor de la entrada, en Programar ► Establecer hora y fecha; allí modificamos el mes y el año, si es necesario; la hora y el día no afectan la URL.

En el editor HTML de la entrada ponemos, únicamente, el siguiente código:

<script>

location.href="Aquí la URL de la página principal o de la entrada hacia la que queremos redireccionar";

</script>

Con lo anterior lograremos que cuando un usuario acceda a nuestro blog desde un buscador, a través de la URL de esa entrada que había sido eliminada, pero que reconstruímos, sea redireccionado a la página principal del blog, o a la entrada que hayamos escogido.

"Position: absolute" y "Position: relative" en Blogger

2013-09-26T09:17:00.001-07:00

Veamos la diferencia que hay entre los valores "relative" y "absolute" aplicados a la propiedad "position", para posicionar elementos dentro de un blog:

Position: relative

Como su nombre los indica (relativo) posiciona un elemento, dentro del blog, en relación con los demás elementos del mismo, respetando los parámetros indicados en la plantilla.

Position: absolute

Como su nombre lo indica (absoluto) posiciona un elemento, dentro del blog, de manera absoluta es decir, sin tener en cuenta relación alguna con los demás elementos del blog, fuera del contexto del mismo.

Ejemplo

Vamos a mover la cabecera (header) del blog, poniéndole márgenes superior e izquierdo de 50 pixeles cada uno. La posición original de la cabecera es ésta:

Para darle una posición relativa pegamos en la plantilla, dentro de la sección CSS correspondiente a la cabecera, el siguiente código:

.header-outer {

   margin-left: 50px;

   margin-top: 50px;

   position: relative;

}

La cabecera quedará así:

Como podemos observar la cabecera se desplaza posicionándose según los márgenes que le asignamos (izquierdo y superior), pero al mismo tiempo conserva el margen derecho, y los que tiene en relación con el cuerpo de las entradas y el gadget "Archivo del blog".
Es de anotar que esta posición la adquiere la cabecera por defecto, es decir aunque se omita del código la línea position: relative;

Para darle una posición absoluta utilizamos el mismo código anterior, pero cambiando el valor relative por el valor absolute. La cabecera quedará así:

La cabecera se desplaza según los márgenes que le asignamos pero sin tener en cuenta los demás parámetros: el margen derecho ni los que tenía en relación con el cuerpo de las entradas y con el gadget "Archivo del blog", saliéndose del contexto del mismo, como si estuviera sola. Se ajusta, además al ancho del título, que sí conserva, en relación con la cabecera, los márgenes asignados por defecto, ya que le dimos posición absoluta a la cabecera, nó al título. Obviamente que esta alternativa no es aplicable porque desconfigura el blog; se trata de explicar la diferencia entre "Position: absolute" y "Position relative":

Si le ponemos a la cabecera un margen que supere al ancho del blog, con la posicion absoluta se saldrá del mismo. En el ejemplo le vamos a poner un margen izquierdo de 960 px utilizando este código:

.header-outer {

   margin-left: 960px;

   position: absolute;

}

Así se verá la cabecera:

Y si le ponemos ese mismo margen, pero con la posición relativa, la cabecera no se verá, y desplazará el contenido del blog hacia abajo ya que las letras del título del blog formarán, una debajo de otra, una línea vertical.

Buscar un codigo en el nuevo editor

2013-07-28T06:46:00.000-07:00

Nuevo editor HTML de Blogger

2013-07-19T20:31:00.000-07:00

Usar el nuevo editor HTML de Blogger, según algunas inquietudes que se han recibido, representa cierta dificultad para algunos usuarios.

Veamos, a continuación, las especificaciones del nuevo editor y, al final, la manera de buscar una línea de código o un código dentro del mismo. Esta búsqueda, para los expertos puede ser muy sencilla, pero para los novatos, no.

Pestañas

Atrás: un click sobre esta pestaña nos saca del editor.

Guardar plantilla: un click sobre esta pestaña guarda los cambios hechos en la plantilla.

Ir al widget: un click sobre esta pestaña despliega una lista con las identificaciones de todos los widgets que tengamos en el blog...

...y un click sobre una de esas identificaciones nos llevará al código del widget correspondiente. Por ejemplo, si hacemos click sobre la identificación Attribution1, se nos presentará la línea con el código de ese widget...

...en la que podremos observar:

Las etiquetas de apertura y de cierre del widget, mas nó su contenido.
Que el número correspondiente a la línea del código es el 1919, y el de la línea que le sigue es el 1936, lo que nos indica que el código del gadget Attribution1 ocupa las líneas comprendidas entra la 1919 y la 1935, inclusive.
Una flecha al lado derecho del número. Un click sobre esa flecha desplegará el código, así:

...en donde aparece las líneas 1920 y 1935, pero nó las comprendidas entre los números 1921 y 1934, inclusive. Tendremos que hacer click sobre la flecha que aparece con el número 1920 para delplegar el código en su totalidad, que se verá así:

Obviamente la numeración de las líneas correspondientes al widget Attribution1 no debe ser igual en todas las plantillas. Se trata de un ejemplo.

Lo anteriormente explicado aplica para los códigos de los demás widgets y también para los de las secciones que, como en el código del ejemplo, no se encuentren expandidos en el formato, por defecto, de la plantilla. Y para buscar una línea de código o un código que, dentro de ellos estén ocultos, no es necesario realizar todo este procedimiento ya que, como veremos más adelante, el buscador lo localizará expandiendo el artilugio correspondiente. Esta explicación es meramente ilustrativa.

Editar plantilla: un click sobre esta pestaña nos volverá al código de la plantilla cuando estemos en Vista previa de la plantilla.

Vista previa de la plantilla: un click sobre esta pestaña nos mostrará el blog, dentro del mismo editor, reflejando los cambios que le hayamos hecho a la plantilla.

Plantilla de formato: un click sobre esta pestaña ordenará el código HTML, incluyendo las adiciones, eliminaciones y modificaciones que le hayamos hecho. Esa ordenación quedará con el formato de indentación o sangría.

Revertir los cambios: un click sobre esta pestaña deshará los cambios que hayamos hecho al editar el código HTML.

Restablecer plantillas de artilugios a los valores predeterminados: un click sobre esta pestaña producirá el efecto en ella indicado..

Buscar dentro del editor HTML

Para buscar una línea de código:

Ponemos el cursor del mouse dentro del editor y hacemos click.
Digitamos Ctrl + F. Con esto activaremos el rectángulo de búsqueda que tiene integrado el editor:

Introducimos en el rectángulo de búsqueda la linea de código a buscar y damos Enter. El buscador localizará la línea de código; si ésta se encuentra oculta dentro de un artilugio el buscador la localizará expandiendo el artilugio correspondiente.

Para reemplazar una línea de código:

Después de hacer click con el cursor del mouse dentro del editor, digitamos Ctrl + Shift + F. Con esto el rectángulo de búsqueda se activará así:

Introducimos, en el rectángulo de búsqueda, la línea de código a reemplazar y damos Enter. El buscador nos pedirá la línea de código reemplazante:

Introducimos la línea de código reemplazante y damos Enter. El buscador nos pedirá confirmar el reemplazo:

Hacemos click en Yes y la línea de código será reemplazada automáticamente.

Para reemplazar una línea de código repetida:

Después de hacer click con el cursor del mouse dentro del editor, digitamos Ctrl + Shift + R. Con esto el rectángulo de búsqueda se activará así:

Introducimos la línea de código repetida a reemplazar y damos Enter. La línea quedará resaltada en color amarillo todas las veces que se encuentre, y el buscador nos pedirá la línea de código que la va a reemplazar; la introducimos y damos Enter. La línea de código será reemplazada automáticamente, todas las veces que se encuentre.

Contraseña de acceso a entradas Blogger

2013-07-11T15:03:00.001-07:00

Podemos restringir el acceso a una(s) entrada(s) de nuestro blog habilitando un formulario de acceso con contraseña, así:

1.- Cuando creemos la entrada, en el editor de HTML...

...pegamos, antes del texto de la misma, el siguiente Script:

 <Script languaje="javascript">

  var getin = prompt("Necesitas una contraseña para acceder a esta entrada.")

  if (getin!="Aquí la contraseña")

  {location.href='URL de página anunciando error'}

  else

  {alert('Contraseña correcta, acepta para ingresar')}

</Script>

En Aquí la contraseña ponemos el número de la contraseña.
Cuando la contraseña anotada en el formulario no es la correcta, el Script nos rediccionará a la página cuya URL debemos poner en URL de página anunciando error.

2.- Para crear la página con el anuncio de Error tenemos dos opciones:

Crear una entrada con el texto en donde anunciamos el error. Esta alternativa no es aconsejable porque, mientras no creemos más entradas, ésta, en la que anunciamos el error, se verá en la página principal, lo cual no es nada estético.
Crear un nuevo blog (en Blogger podemos crear todos los blogs que queramos) con una única entrada, que es la que va a contener el texto con el anuncio de Error. La URL de este blog es la que debemos poner en URL de página anunciando error. Esta opción es la ideal.

Si son varias las entradas con acceso restringido, ponemos en cada una el Script (véase punto 1), y creamos en el nuevo blog una entrada con el anuncio de error por cada entrada, del blog principal, con acceso restringido, y en URL de página anunciando error ponemos la URL de la entrada respectiva.

En este último caso, en el que debamos crear varias entradas con anuncio de error en el nuevo blog, debemos habilitar, en el mismo Mostrar un máximo de 1 entrada en la página principal:

Diseño ► Configuración ► Entradas y comentarios ► Mostrar un máximo de 1 entrada en la página principal

Lo anterior con el fin de evitar que nos aparezcan, en la entrada principal del nuevo blog, varios anuncios de error.

3.- En la entrada que va a contener el anuncio de error, y a la que no le pondremos título, ponemos, en el editor de HTML, el siguiente código:

 <p>

<center>

<b>¡¡Contraseña errada!! Regresa, haciendo click sobre la flecha, e inténtalo de nuevo.</b>

<p>

<a href="URL de la entrada con acceso restringido"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 47px;" src="http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png" border="0" alt="Intentar de nuevo" title="Intentar de nuevo"/></a>

</center>

En URL de la entrada con acceso restringido ponemos la URL de la entrada a la que debemos acceder con contraseña.
http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png es la URL de la imagen (flecha), que puede ser cambiada.

Esta entrada se verá así:

En el Demo vamos a utilizar esta clave: 12345. Probemos utilizando la clave correcta y otra incorrecta:

Como vimos en el demo, una vez introducida la contraseña correcta aparecerá un mensaje como éste:

...que dependiendo del navegador, puede contener o nó la segunda la línea "Evita que esta página cree cuadros de diálogos adicionales". Esta clase de mensajes suele crear desconfianza. Si queremos que este cuadro no aparezca, sino que, introducida la contraseña correctamente, se acceda directamente a la entrada, eliminamos del código del punto 1 estas líneas:

  else

  {alert('Contraseña correcta, acepta para ingresar')}

Poner más de una contraseña

Si necesitamos poner más de una contraseña en una entrada con acceso restringido, ponemos, en el código del punto 1, la siguiente línea:

if (getin!="Aquí la contraseña")

...tantas veces cuantas contraseñas necesitemos poner. En este caso el cuadro indicado arriba, con el mensaje del blog, en caso de que lo dejemos habilitado, aparecerá únicamente con la última contraseña.

Nota

La contraseña se nos exigirá cuando queramos ingresar a la(s) entrada(s) con acceso restringido, pero también se nos exigirá para ingresar a la página principal cuando en ésta haya varias entradas y entre las mismas esté una entrada con acceso restringido.

Numerar los comentarios en Blogger

2013-07-05T09:03:00.001-07:00

Para numerar los comentarios:

1. vamos a:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

        <script type='text/javascript'>var CommentsCounter=0;</script>

          <b:loop values='data:post.comments' var='comment'>

            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

3. Dentro del anterior código agregamos la línea resaltada.

4. Un poco más abajo del anterior código localizamos el siguiente:

<b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

              <b:else/>

                <data:comment.author/>

              </b:if>

5. A continuación pegamos éste:

<span class='numberingcomments' style='float: right; font-size: 16px; color:#ffffff'>

<a rel='nofollow' style='text-decoration:none' title='Comment Link'>#

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter);

</script>

</a>

</span>

resaltadas

6. Guardar plantilla.

Tamaño de imágenes subidas a blogger

2013-06-25T12:04:00.000-07:00

Ahora blogger da, para las imágenes subidas, la posibilidad de escoger entre cinco tamaños, así:

Una vez elegido el archivo del equipo, y añadida la imagen seleccionada...

...se nos presenta el cuadro con las opciones de diseño:

Alineación de la imagen
Tamaño de la imagen

Nos ocuparemos del tamaño (la alineación es obvia), tomando como ejemplo una imagen cuyas medidas originales son: ancho (width): 387px, y alto (height): 142px.

Subida la imagen, en el Editor HTML de la entrada correspondiente se genera un código que, dependiendo del tamaño escogido, será como uno de los siguientes:

Para la opción pequeño:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/s1600/Blogger.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/s200/Blogger.png"/></a>

Ésta es la imagen:

s1600 indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.
s200 indica que la imagen se muestra hasta con un máximo de 200 pixeles en su dimensión más larga (en este caso es el ancho); la otra dimensión se adapta automáticamente. Es la imagen que aparece en la entrada. Un click sobre la imagen llevará a la imagen ancla.

Para la opción Mediano:

<a href="http://2.bp.blogspot.com/-

Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s1600/Blogger.png"  imageanchor="1">

<img border="0" src="http://2.bp.blogspot.com/-

Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s320/Blogger.png"/></a>

Ésta es la imagen:

s1600 indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.
s320 indica que la imagen se muestra hasta con un máximo de 320 pixeles en su dimensión más larga (en este caso es el ancho); la otra dimensión se adapta automáticamente. Es la imagen que aparece en la entrada. Un click sobre la imagen llevará a la imagen ancla.

Para la opción Grande:

<a href="http://2.bp.blogspot.com/-

7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/s1600/Blogger.png"  imageanchor="1">

<img border="0" src="http://2.bp.blogspot.com/-

7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/s400/Blogger.png"/></a>

Ésta es la imagen:

s1600 indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.
s400 indica que la imagen se muestra hasta con un máximo de 400 pixeles en su dimensión más larga (en este caso es el ancho); como la dimensión más larga de la imagen original es de 387 pixeles, así se mostrará la imagen. Es la imagen que aparece en la entrada, y que, en este caso, es igual a la imagen ancla. Un click sobre la imagen llevará a la imagen ancla.

Para la opción Extra grande:

<a href="http://1.bp.blogspot.com/-

20RCg5bzoJc/UciSYlfXfKI/AAAAAAAACBE/WUMhtviQzCA/s1600/Blogger.png"  imageanchor="1">

<img border="0" src="http://1.bp.blogspot.com/-

20RCg5bzoJc/UciSYlfXfKI/AAAAAAAACBE/WUMhtviQzCA/s640/Blogger.png"/></a>

s640 indica que la imagen se muestra hasta con un máximo de 640 pixeles en su dimensión más largas (en este caso es el ancho); como la dimensión más larga de la imagen original es de 387 pixeles, así se mostrará la imagen. Es la imagen que aparece en la entrada, y que, en este caso es igual a la imagen ancla. Un click sobre la imagen llevará a la imagen ancla.

Para la opción Tamaño original:

<a href="http://1.bp.blogspot.com/-

g9nVF2pQ6Fs/UciSyvCkUPI/AAAAAAAACBM/d47z3xFZPvY/s1600/Blogger.png"  imageanchor="1">

<img border="0" src="http://1.bp.blogspot.com/-

g9nVF2pQ6Fs/UciSyvCkUPI/AAAAAAAACBM/d47z3xFZPvY/s1600/Blogger.png"/></a>

s1600, en las dos imágenes, indica que ambas se mostrarán en su tamaño original, siempre y cuando no excedan los 1.600 pixeles en su dimensión más larga. En este caso la imagen se mostrará con sus medidas originales: 387px de ancho y 142 pixeles de alto.

Análisis del código

Tomamos como referencia el código correspondiente a la opción Mediano, y tenemos en cuenta los mismos parámetros para los otros códigos:

El código contiene, a su vez, los códigos de dos imágenes, así:

1. Imagen ancla:

<a href="http://2.bp.blogspot.com/-

Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s1600/Blogger.png"  imageanchor="1">

Es la imagen en su versión original, con un límite de 1.600 pixeles en su dimensión más larga, y punto de destino del link o enlace que es la segunda imagen.
Los resaltados en este color, y en éste conforman la URL de la imagen en su versión original, que no es la que aparece en la entrada.
s1600 indica la medida en pixeles (1.600px) de la dimensión más larga permitida (ancho o alto, o ambas cuando la imagen es cuadrada) de la imagen, en su versión original. La dimensión más corta se adapta, por defecto, guardando la proporción. Es decir, que si la dimensión más larga sobrepasa los 1.600 pixeles, la imagen quedará anclada con 1.600 pixeles en su dimensión más larga; y si la dimensión más larga es menor que 1.600 pixeles, quedará anclada con sus medidas originales.
El resaltado en este color es el nombre o título, y el formato de la imagen.
El resaltado en este color indica que la URL de esta sección corresponde a una imagen ancla (las anclas son referencias que se emplean, en una página, con el fin de ser el punto de destino de un link).

2. Imagen link o enlace:

<img border="0" src="http://2.bp.blogspot.com/-

Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s320/Blogger.png"/></a>

Es la imagen que sirve de enlace con la primera. Es decir, que un click sobre esta imagen lleva a la imagen ancla.
El resaltado en este color impide que se muestre un borde que algunos navegadores crean, por defecto, en toda imagen que sea un enlace o link (esta imagen lo es).
Los resaltados en este color y ésteconforman la URL de la imagen como la presenta Blogger en la entrada.
s320 indica que 320 pixeles es el límite que pone Blogger para presentar la imagen en la entrada, en su dimensión más larga (ancho o alto, o ambas cuando la imagen es cuadrada), con la opcion Mediano. La dimensión más corta se adapta, por defecto, guardando la proporción. Es decir, que si la dimensión más larga sobrepasa los 320 pixeles, la imagen quedará en la entrada con 320 pixeles en su dimensión más larga, y si la dimensión más larga es menor que 320 pixeles, quedará con sus medidas originales.
El resaltado en este color es el nombre o título, y el formato de la imagen.

Como se anotó arriba, un click sobre la imagen link o enlace llevará a la misma imagen (imagen ancla), en su versión original. Si queremos evitar esto reemplazamos, en el código generado al subir la imagen, la Url de la imagen ancla por el signo numeral (#), debiendo quedar así:

<a href="#">

<img border="0" src="http://2.bp.blogspot.com/-

Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s320/Blogger.png"/></a>

..y entonces un click hecho sobre la imagen llevará al inicio de la entrada que la contiene.

Cambiar el tamaño de las imágenes

Para modificar el tamaño de una imagen en una entrada poniéndole un tamaño que no está dentro de las opciones a elegir, tenemos en cuenta la segunda parte del código, la que corresponde a la que hemos denominado Imagen link o enlace. En ella cambiamos (tomando como ejemplo la Opción Mediano) s320 que, como ya vimos indica 320 pixeles en la dimensión más larga de la imagen, por sXXX, reemplazando las equis por el número de pixeles al que queremos aumentar o disminuír el tamaño de la imagen, tomando siempre su dimensión más larga (ya sabemos que la otra se adapta automáticamentela). Esta dimensión debe estar dentro de un rango comprendido entre un pixel y el número de pixeles de la imagen original, en su dimensión más larga. Aunque le pongamos una mayor, la imagen se adaptará a la de la imagen original.

Veamos un ejemplo, tomando siempre como referencia la Opción Mediano:

En la URL correspondiente a la imagen link cambiamos s320 (320px) por s100 (100px), medida con la que no contamos dentro de las opciones de tamaño, ponemos esa URL en la barra de direcciones de una ventana aparte, y accedemos a la misma, la veremos así, como también se verá en la entrada en la que pngamos la imagen (clik sobre el enlace):

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyP-_8SOHdW_b-yPy83soC2YcD-zo_dhdd88YYnO7lcgeUkvJw8xnN_Pj3YNvKmfeyxAqD4oHw8q69c1QrPqlanFSqT8-VmJFKmYiDSRI_SI8OHnkFm_BI32O0KIsBK89wON1lOUxPC72/s100/Blogger.png

En la pestaña de la ventana en donde aparece la imagen podremos ver (en todos los navegadores, excepto Internet Explorer), las medidas de la imagen: 100 pixeles de ancho, medida que le pusimos en la URL, y 37 pixeles de alto, medida a la que se adaptó automáticamente o por defecto.

Enlaces dentro de una entrada

2013-06-13T15:09:00.000-07:00

Cuando el contenido de una entrada hace necesario, por su extensión, dividirlo en varias partes, es conveniente crear enlaces que lleven, desde un índice, a cada una de las partes en particular. Estos enlaces se denominan marcadores, y no solamente se utilizan en índices, aquí lo hacemos a manera de ejemplo; también se pueden utilizar, en entradas de contenido muy extenso, para facilitar al usuario ir a cualquier parte de la misma de forma rápida.

Veamos la explicación con un ejemplo:

En una entrada se va a tratar un artículo sobre informática, considerando los siguientes aspectos: definición, etimología, orígenes y funciones.

En el índice ponemos los títulos de cada una de las partes en las que hemos dividido el contenido de la entrada:

Índice

Definición
Etimología
Orígenes
Funciones

Enlace origen

Cada título del índice lo ponemos, en el editor HTML de la entrada, al crear la misma, dentro de un enlace que apunte a la parte de la entrada correspondiente (destino del enlace), así:

<a href="#Definición" title="Definición">Definición</a>

<a href="#Etimología" title="Etimología">Etimología</a>

<a href="#Orígenes" title="Orígenes">Orígenes</a>

<a href="#Funciones" title="Funciones">Funciones</a>

El signo numeral (#) hace que el enlace apunte a un elemento dentro de la misma entrada. Sin este signo el enlace no encontrará el elemento ya que lo buscará por fuera de la entrada, y aparecerá un mensaje indicando que esa página no existe.
El atributo title hace que aparezca un texto con el título correspondiente al poner el cursor sobre cada uno de ellos (es opcional).
Cada uno de los títulos con este color es el texto que aparece en el índice.

Destino del enlace

Cada uno de los títulos de cada una de las partes en que hemos dividido el contenido de la entrada, en el editor HTML de la misma, lo ponemos dentro de un código destino, así:

<a name="Definición"> <h3>Definición</h3></a>

<a name="Etimología"> <h3>Etimología</h3></a>

<a name="Orígenes"> <h3>Orígenes</h3></a>

<a name="Funciones"> <h3>Funciones</h3></a>

El atributo name asigna un nombre al destino del enlace para que éste lo pueda identificar.
Las etiquetas <h3>...</h3> dan a los títulos el formato de tales (según el formato por defecto de los títulos en cada blog, pueden ser <h1>...</h1> , <h2>...</h2> o <h3>...</h3>).
Cada uno de los Textos con este color es el título de cada una de las partes en que hemos dividido el contenido de la entrada.

Enlace "Ir al principio"

Por último podemos utilizar, al final de cada parte en que dividimos la entrada, o al final de la misma, el siguiente código, que nos genera un enlace para volver al principio de la entrada:

<a href="#"title="Ir al principio" >Ir al principio</a>

El texto Ir al principio podemos cambiarlo por "Ir al inicio" "Regresar" "Ir arriba" etc.
El atributo title hace que aparezca el texto Ir al principio al poner el cursor sobre el enlace.

Veamos los enlaces en funcionamiento: