DESPLAZAMIENTO DE TEXTO (MARQUESINA)

Marquesina Básica:

Marquesina Básica

La marquesina básica se desplaza a lo largo del ancho de la pantalla y el texto se mueve de derecha a izquierda.


<marquee>Marquesina básica</marquee>


Modificaciones:

Podemos crear marquesinas de todo tipo combinando atributos:

width(ancho):Lo podemos expresar en % o en píxeles.
height(alto):Lo podemos expresar en % o en píxeles.
align(alineación):top(arriba),middle(centrado),bottom(abajo).

Marquesina que ocupa el 90% del ancho de la pantalla y tiene una altura de 50 pixeles.


<marquee width="90%" height="50" align="bottom">
Marquesina que ocupa el 90% del ancho de la pantalla y tiene una altura de 50 pixeles.
</marquee>


behavior: Sirve para definir el estilo del texto.

behavior="scroll"
behavior="alternate"
behavior="slide"

Nota: La marquesina por defecto es de tipo scroll.


Marquesina con movimiento tipo alternate


<marquee behavior="alternate" width="100%" height="50" align="midldle">
Marquesina con movimiento tipo alternate
</marquee>


bgcolor: Modificar el color del fondo de la marquesina.
style: Modificar el color de las letras de la marquesina.

Marquesina con colores...


<marquee style="color: #FF0033;" behavior="alternate" align="midldle" bgcolor="#9999FF" width="100%" height="50">
Marquesina con colores...
</marquee>


Personalizar Colores.

Consultar Colores.

direction: Dirección hacia donde se dirige el texto.

direction="right"
direction="left"
direction="up"
direction="down"

Nota: El movimiento por defecto es left.


<marquee direction="right" align="bottom" width="90%" height="50">
Marquesina que se desplaza de izquierda a derecha
</marquee>



scrolldelay: Tiempo entre cada movimiento expresado en milisegundos.


Marquesina con tiempo modificado y texto de arriba a abajo


<marquee scrolldelay="600" direction="down" align="bottom" width="90%" height="50">
Marquesina con tiempo modificado y texto de arriba a abajo
</marquee>


Nota: Todas las opciones mencionadas son combinables entre si, asi que lo único que teneis que hacer es personalizar vuestra marquesina haciendo uso de lo anterior, para cualquier duda no dueis en preguntar.

CAMBIO DE MINIATURAS

Esto es una funcioncita un poco tonta pero que no la encontré por ningún sitio, el escenario es el siguiente, una imagen principal y unas miniaturas.


Lo que se desea es que al hacer click en la imagen inferior se cargue la imagen en la parte superior, el objetivo es poder ir recorriendo las imagenes.

<?php for($i=0;$i<$numImagenes;$i++){ ?>
<img class="imagenPeq" id="imagen<?php echo $i;?>" src="<?php echo $datosImagenes['url']?>" onclick="cambiarImagenPrincipal(this.id)"/>
<?php $datosImagenes=mysql_fetch_array($rsImagenes);}?>

La función cambiarImagenPrincipal es la siguiente:

function cambiarImagenPrincipal(id){
var imagenPrincipal=document.getElementById('AnuncioimagenPrincipal').src;
document.getElementById('AnuncioimagenPrincipal').src=document.getElementById(id).src;
document.getElementById(id).src=imagenPrincipal;
}

Esto no funciona en blogger ya que no permite codigo php, la finalidad de este codigo es para webs.

FUNCIONES VALIDAR Y SANEAR DATOS

Entrada orientada para la programación en PHP, PHP5 proporciona un conjunto de funciones básicas para validar y sanear los datos de entrada que pueden ayudar a filtrar los datos de entrada. Para validaciones más complejas será necesario desarrollar un conjunto propio de funciones de filtrado para los distintos casos que se pueden dar. Las funciones de filtrado de datos PHP son:

filter_has_var(): verifica si la variable del tipo especificado existe.
filter_id(): devuelve el ID del filtro con el nombre dado.
filter_input_array(): obtiene múltiples variables desde afuera de PHP y opcionalmente las filtra.
filter_input(): obtiene una variable desde afuera de PHP y opcionalmente la filtra.
filter_list(): devuelve una lista de todos los filtros soportados.
filter_var_array(): filtra múltiples variables con el mismo o con diferentes filtros.
filter_var(): filtra una variable con un filtro específico.

Estas funciones se pueden emplear para realizar dos tipos de filtrados:

Validación:

*Aplica reglas estrictas de formato (por ejemplo, URL o email).
*Devuelve el dato original o false si no pasa el filtro.

Saneamiento:

*Se emplean para permitir o no permitir ciertos caracteres en los datos.
*No emplea reglas de formato.
*Devuelve la cadena original tras eliminar los caracteres no permitidos.

Para indicar el tipo de filtrado a realizar (Validación o saneamiento), se emplean unas constantes que se utilizan al llamar a las funciones de filtrado. Las principales constantes de filtros de validación son:

FILTER_VALIDATE_INT: valida un entero.
FILTER_VALIDATE_IP: valida una dirección IP.
FILTER_VALIDATE_FLOAT: valida un número real.
FILTER_VALIDATE_URL: valida una URL.
FILTER_VALIDATE_EMAIL: valida un email.

Las principales constantes de filtros de saneamiento son:

FILTER_SANITIZE_STRING: sanea una cadena.
FILTER_SANITIZE_NUMBER_INT: sanea un entero.
FILTER_SANITIZE_NUMBER_FLOAT: sanea un número real.
FILTER_SANITIZE_URL: sanea una URL.
FILTER_SANITIZE_EMAIL: sanea un email.

Además, existen una serie de opciones y flags para especificar información adicional en el proceso
de filtrado, como las opciones min_range y max_range para definir intervalos numéricos o el flag
FILTER_FLAG_ALLOW_THOUSAND para permitir el empleo de la coma como separador de miles en un número real.

AGREGAR UNA NUEVA SIDEBAR

Respondiendo al siguiente comentario de Cris me decidí a explicar como crear una nueva sidebar.

"Llevo unos días que se me ha metido e la cocorota poner una segunda colmna a mi blog, porque ya no me caben las cosas en mi columna lateral. He buscado instucciones en google pero no lo he conseguido, no me acabo de enterar y casi la lío.Podrias hacer una entrada sobre esto? ¿Hay que cumplir algún reqisito para poder hacer eso?"

Lo primero comentarte Cris es que nada en el blog es fijo, es decir podemos crear cualquier cosa que creamos oportuna, el único inconveniente es saber hacerlo, ya que para este tipo de cosas el asistente de blogger no nos sirve, deberemos modificar nuestra plantilla mediante código HTML y CSS. Lo ideal sería que todos supieramos estos lenguajes pero como todo, es cuestión de ponerle ganas y pensar un poco, cuando nos ponemos a modificar código nada es automático, debemos de ajustar los códigos a nuestros requerimientos, por tanto intentaré explicar de la forma mas clara posible como hacerlo.

En primer lugar deberemos centrarnos en las estructuras que están implicadas, que principalmente son:Veamos como se refleja esto en el código:

Iremos a la plantilla de nuestro blog, en el caso de blogger Diseño->Edicición de HTML. Antes de nada recomendaros realizar una copia de vuestra plantilla y la búsqueda rápida mediante las teclas Ctrl+F para buscar fragmentos de código.

Lo fundamental a la hora de hacer estas modificaciones es ser conscientes del tamaño del que disponemos. Por tanto nos fijaremos en el atributo width de main-wrapper que es el área donde se muestran los post y de sidebar-wrapper que será la sidebar existente, en el código os aparecerá de la siguiente forma:


#main-wrapper {
padding-top: 0px;
width: 500px;
float: right;
....
}

#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}


Estos fragmentos de código no serán exactamente iguales en vuestro caso, pero lo importante es entender lo que significa. Lo señalado en azul es el ancho y por tanto tendremos que sumar esos valores para saber del ancho del que disponemos, en este caso sería 500px de main + 210px de sidebar =710px. Por tanto dispondríamos de 710px. Es evidente que si añadimos una nueva sidebar tendremos que reducir alguno de estos valores para hacerla encajar. Lo común será crear una nueva sidebar con el mismo ancho que la que tenemos y reducir el espacio del main.

Teniendo esto claro, procederemos a agregar la nueva zona y lo haremos de la siguiente forma:

Buscaremos el fragmento de código con la siguiente estructura.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
......AQUI OS APARECERÁ INFORMACION DE VUESTROS GADGETS.
</b:section>
AQUI ES DONDE AÑADIREMOS EL EL CODIGO.
</div>


Sustituiremos la línea que señalé en azul por lo siguiente:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

Los ID no deben coincidir, observamos como el id de la primera sidebar se llama sidebar y el id de la segunda sidebar se llama sidebar2



Si guardáramos los cambios en este punto, lo que nos pasaría sería que se nos deformaría todo, ya que le estamos agregando una nueva sidebar que no cabe!, por tanto se solaparían y saldría todo desordenado, por tanto es en este punto donde tendremos que ajustar los anchos de cada elemento. Teniendo en cuenta los datos que dedujimos al principio, lo normal sería agregar una sidebar del mismo tamaño que la existente y reducir el tamaño del 'centro', para ello lo que haremos será copiar un nuevo fragmento de código especificanto las características de la nueva sidebar. Lo haremos de la siguiente forma:


#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}

#sidebar2-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: right;
....
}

La parte señalada en rojo es la que añadimos justamente en la parte inferior del código azul, que es el código de la primera sidebar que teníamos anteriormente pero modificando en la primera linea #sidebar-wrapper por sidebar2-wrapper, los atributos los dejaremos todos igual con el objetivo que sean ambas columnas iguales. Lo único que cambiaremos será float que pondremos right o left dependiendo de donde queramos la nueva columna.

Como punto final adaptaremos el tamaño de la parte central. Como ejemplo al principio os comenté que disponíamos de 710px que en vuestro caso será otro valor, pues los que haremos será sumar el valor de las 2 sidebar en el ejemplo width de sidebar=160px + width sidebar2=160px serían un total de 320px, si teníamos al principio 710px entonces nos quedará para la parte central: 710px-320px=390px. Este sería el valor que tendremos que modificar en el width del main-wrapper. De esta forma nos quedaría todo bien cuadrado.

Ahora solo queda guadar los cambios y esperar que todo haya salido bien. Os recomiendo hacer esto con tiempo y intentando entender bien cada uno de los pasos ya que de no ser así el resultado será un fracaso. Espero hayáis entendido el procedimiento, ya me contaréis vuestras anécdotas :).

CAMBIAR EL 0 COMENTARIOS

Uno de los 'defectos' que tienen las plantillas de blogger desde mi punto de vista es el famoso mensaje de 0 comentarios. En primer lugar da mala presencia ya que una entrada sin comentarios parece algo desoladora, desde el punto de vista del lector puede carecer de credibilidad, pero tenemos que tener en cuenta de que alguien tendrá que ser el primero en dejar un comentario para que la dichosa frase comience a tener sentido. ¿Que pasa ahora? Un atrevido lector ha dejado su comentario y entonces se muestra 1 comentarios, parace que no suena tan mal pero sigue siendo un poco absurdo sería en todo caso 1 comentario. El caso es que la frase comienza a ser correcta a partir del segundo comentario que entonces si! tendremos 2 comentarios! de ahí en adelante todo perfecto!. Podemos darle la enhorabuena a todos aquellos que hacen esas maravillosas plantillas que del del 0 al 2 se equivocaron en las 2!. Bueno lo que yo propongo es mostra un mensaje tipo; danos tu comentario cuando el número de comentarios sea 0, 1 comentario cuando tengamos un comentario y 2 comentarios.... cuando el número de comentarios sea mayor. ¿Que os parece? Lo más seguro es que muchos de vosotros ni os hayáis dado cuenta de este detalle y a partir de ahora lo veáis totalmente incorrecto, por eso os voy a enseñar a modificarlo para ofrecer un sentido coherente al tema de los comentarios.

Primer paso:(Localizar código y copia de la plantilla)

Lo primero de todo será realizar una copia de seguridad de nuestra plantilla, ya que cuando tocamos el código podemos modificar algo que luego no sepamos reparar por ello copia de seguridad y en el caso de no obtener los resultados esperados restablecer nuestra plantilla.

Ahora si, podemos comenzar!

Iremos al código de nuestra plantilla, en el caso de blogger a Diseño->Edicion de HTML, activaremos la casilla de expandir plantilla de artilugios y buscaremos el siguiente fragmento de código:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>


Segundo paso:(Sustitución de código)

Sustituiremos el código anterior por el siguiente:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>
Danos tu comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios
</b:if>
</a>
</b:if>


Tercer paso:(Buscar el código)

Seguidamente buscaremos el siguiente código:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>


Cuarto paso:(Sistitución del código)

Sustituiremos el código anterior por el siguiente:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
Danos tu comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario:
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios:
</b:if>
</h4>


Podremos modificar las partes señaladas en negrita en el interior del código en caso de que queráis mostrar otros mensajes, aconsejo insertar los códigos de la forma que se describen y en caso de querer modificarlos, hacerlo después de guardar los cambios y comprobar que funciona correctamente. Espero os sea de utilidad ya me contaréis.

PERSONALIZAR FOOTER

El footer es la parte inferior del blog, en ocasiones muy desaprovechado, normalmente se suele poner información resaltante del blog como puede ser información del autor, tipo de plantilla empleada, antiguedad del blog y bueno todo aquello que creáis oportuno que vuestros visitantes deben saber a cerca de la construcción del mismo. Personalmente a mi no me gusta que el footer tenga un grosor grande ya que vi en algunas ocasiones que ocupa casi el mismo espacio que la pantalla principal, para gustos los colores, por ello vamos a ver como personalizar esta parte ya que no deja de ser menos importante que las demás.

A grandes rasgos esta es la estructura de la que estoy hablando, principalmente nos centraremos en el FOOTER.

Primer paso:(Comprobaciones previas)

Deberemos de ir a Diseño->Edición HTML y buscar las siguientes partes de código.

Primera parte:

#footer {
width:660px;

Segunda parte:



#outer-wrapper {
width: 660px;

Deberemos asegurarnos que los valores señalados en azul son los mismos, en caso contrario adaptaremos el tamaño del footer al mismo que outer-wrapper.

Segundo paso:(Añadir FOOTER)

Buscaremos la siguiente parte de código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


La sustituiremos por las siguientes líneas de código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>


Con esto lo que hemos creado el siguiente espacio:

Tercer paso:(Personalizar)

Añadir color o imagen de fondo al footer, lo haremos añadiendo la siguiente linea al final de:



#footer {
...
Aqui añadir la linea
}


Añadiremos una linea de la siguiente forma:

1. Si solo queremos añadirle color al fondo:



background-color: #CodigoColor;


2. Si queremos añadirle una imagen de fondo:



background-image:url('Url de imagen');


El atributo height:Tampx; indica el alto del footer por tanto podremos modificar su valor para adaptarlo a nuestro gusto.

Nota: Tener un poco de paciencia y ir modificando los valores hasta que el resultado sea de vuestro agrado, no esperéis obtener reltados perfecto a la primera, de todas formas si tenéis algun duda, hacer uso de los comentarios.

NUBE DE ETIQUETAS

Os voy a mostrar una forma muy sencilla de hacer una nube de etiquetas. Este recurso nos permitirá ofrecerle a nuestros visitantes las etiquetas de una forma mas atractiva que como lo hace blogger, ya que podremos definir el tamaño y color de los títulos de los enlaces. Es un recurso muy recomendable ya que nos permite mostrar la información de una forma personalizada y llamativa. El resultado que otendremos será algo como lo siguiente:

En primer lugar:(Un poco de estilo)

Deberemos ir al código de nuestra plantilla y colocar el siguiente código justamente encima de la linea donde pone ]]></b:skin>

/* Nube de Etiquetas*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#CC0700;}
#tagcloud .tag2{ font-size:1.1em; color:#CC9C00;}
#tagcloud .tag3{ font-size:1.3em; color:#C2CC00;}
#tagcloud .tag4{ font-size:1.5em; color:#00C2CC;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
/*FIN Nube de Etiquetas*/


Segundo paso:(Entendiendo el código)

Antes de continuar copiando código vamos a entender lo que acabamos de copiar, que se resume a lo siguiente:

padding: es la distancia en píxeles de la separación entre vínculos.
font-size: tamaño de la letra.
color: color del del vínculo. Consultar colores.

Una vez sabemos lo que hemos copiado, continuaremos siguiendo los pasos, luego podremos volver a este punto para personalizarlo teniendo en cuenta para que sirve cada atributo.

Tercer paso:(Crear la nube)

Para ello crearemos un gadget de tipo HTML/Javascript y añadiremos en su interior el siguiente código:

<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag4">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag3">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag2">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
</div>


Como podemos observar son 5 lineas prácticamente iguales, lo único que cambia es el número del tag, por tanto si lo que queremos es clasificar 10 etiquetas tendremos que añadir 10 líneas de la misma forma, únicamente modificando el número que acompaña al tag. Yo por ejemplo combino el número del tag como podéis observar la secuencia es 1,4,3,2,1.., podéis insertarlo en el orden que queráis para darle el efecto deseado. Tendréis que añadir la Url del enlace de la etiqueta correspondiente y el texto del vínculo por cada etiqueta que queráis añadir. Insertados unos cuantos con su respectiva URL es cuando podréis observar el resultado y por tanto personalizar correctamente la nube retrocediendo al primer paso y modificando los atributos correctamente.

ULTIMOS COMENTARIOS

Tener en nuestra sidebar un gadget con los últimos comentarios puede ser muy interesante tanto para los lectores del blog como para el propietario ya que de una forma muy rápida se puede observar cuales son los temas que están actualmente en 'discusión', recordar que hacer comentarios en otros blogs es muy interesante ya que son enlaces a vuestro blog. Insertarlo en el blog es muy sencillo y os mostraré como hacerlo.

En primer lugar:(En la plantilla):

Nos vamos a Diseño->Edición de HTML y buscaremos
]]></b:skin>, una vez localizado copiaremos justamente encima el siguiente código.


/* ULTIMOS COMENTARIOS RINCON BLOG */
.txtmsg {margin: -20px 0 0 0;}


Guardaremos los cambios y listo.

En segundo lugar:(Nuevo elemento)

Como lo normal será tenerlo en la sidebar, añadiremos un nuevo elemento de tipo HTML/Javascript y allí pegaremos el siguiente código.


<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}}
var photoslink=new Array()
photoslink[0]='<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png"/>';
caxitos='<img src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SeJpxgrXlGI/AAAAAAAAGmg/7KS4S9cQiro/s320/yo.png"/>';
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Ene";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Abr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ago";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showcommentdate == true) document.write('El ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');
if( entry.author[0].name.$t == 'Caxitos'){ document.write(Caxitos)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + ', dijo' +'</a> ');
if (showposttitle == true) document.write(' en ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"><br/></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(leer mas)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}
</script>
<script type="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="http://AQUIVUESTROBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>


Modificar AQUIVUESTROBLOG por el nombre de vuestro blog, guardaremos los cambios y listo, un código bastante largo pero muy simple de insertarlo.
Llegado este punto podremos observar el resultado, nos mostrará todos los usuarios con el mismo icono.

Personalización:

Este punto principalmente consiste en poner un icono para los distintos comentaristas de nuestro blog.

Diferenciaremos tres grupos:

1. Comentaristas
2. Autor
3. Anonimos

Lo primero que deberemos hacer es sustituir las 3 apariciones de caxitos por vuestro nombre tal y como aparece en las firmas de vuestro blog.

Seguidamente tendremos que buscar los iconos que queramos que acompañen a los comentarios, yo utilizo este buscador de iconos. Buscaremos 3 recordar uno para cada una de las categorías mencionadas anteriormente, los descargaremos a nuestro ordenador y seguidamente los alojaremos en un servidor de imagenes, guardamos las direcciones generadas y procederemos de la siguiente forma:

Reemplazaremos nuestros códigos sabiendo que el código verde hace referencia a la dirección de la imagen de los comentaristas, el azul al del autor y el rojo al de los anonimos.
Guardamos y listo!!!




ENTRADAS RELACIONADAS

Añadir una lista de entradas relacionadas a cierto post del blog es muy recomendable ya que permite a los usuarios apollarse en ciertas entradas relacionadas con el tema de la entrada principal. Es muy interesante también ya que es una forma de retener a los lectores ofreciendoles una lista de entradas del mismo tipo de la entrada que el seleccionó.

¿Cómo funciona?

El script que mostraré a continuación se apolla principalmente en el contenido de las etiquetas, por tanto para poder incorporarlo tendréis que tener previamente definidas etiquetas.
Para entenderlo mejor os pongo una imagen para que veáis de lo que hablo. Todo hay que decir que estaréis cansados de utilizarlo provablemente en otros blogs o webs.

Esto lo podeis observar al final de cada entrada de mi blog, si queréis insertarlo en vuestro blog tendréis que seguir los siguientes pasos. Aviso no os asustéis, el código a insertar es algo largo pero muy simple ya que tan solo tendréis que modificar 2 cositas de nada.
Recomendable guardar la plantilla antes de realizar las modificaciones.

Nota:Recordar que podéis buscar coincidencias con ctr+F

Primer paso:(Ubicación del script)

En el caso de blogger nos dirigiremos a Diseño->Edicion de HTML una vez aquí marcaremos la casilla Expandir plantillas de artilugios. A continuación buscaremos ]]></b:skin>
Justamente debajo tendremos que copiar el siguiente código:


<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}}
document.write('</ul>');
}
//]]>
</script>


Segundo paso:(Unas lineas mas)

Llegado este punto ya lo tenemos casi todo, lo único que tendremos que hacer es buscar el siguiente fragmento de código en nuestra plantilla:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>


Justamente debajo tendremos que insertar el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>


Tercer paso:(Ultimas lineas)

Buscamos ahora la línea de nuestro código que dice:

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


Justamente debajo de esta linea copiaremos el siguiente código:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>


Cuarto paso:(Modificaciones)

• Resultados mostrados: El numero de resultados mostrados lo podremos configurar desde la linea que insertamos que dice así:
  

  if (cuantosPosts == 3)
  

  Este valor 3 se corresponde con el número máximo de entradas relacionadas coincidentes, por tanto este valor lo podremos cambiar por cualquier otro valor que nosotros queramos.
  

• Tamaño del titulo de la entrada: Poniendo un ejemplo lo veréis mejor, por ejemplo una entrada que se llame así: Código de colores, diremos que tiene una longitud de 17 caracteres, (los espacios en blanco también cuentan como caracteres). Sabiendo esto nos dirigiremos a la siguiente línea del código.
  

  relatedTitles.length && i < 20


  El 20 se corresponde con el tamaño máximo de caracteres de una entrada, en el ejemplo que os puse eran 17, podemos modificar este valor dependiendo del tmaño de nuestras entradas, el resultado de la búsqueda dará la lista de entradas con título menor que ese valor.

Guardamos la plantilla y listo, (en vista previa no podemos apreciar los cambios). Os dije que no era complicado, pero lo que no os dije era que es un poquito largo :) espero que os funcione a todos.

LEER MAS

Es una de las opciones que podéis añadirle a vuestro blog, es recomendable cuando se hacen entradas muy extensas ya que ocupan gran parte de la página principal y no deja que se vean mas entradas, es algo como esto:

Como observamos si el lector está interesado en continuar leyendo la entrada podrá hacerlo accediendo al enlace Leer mas...

Para ponerlo en vuestro blog, partimos de que no todas las plantillas son iguales pero en general todas se parecen por tanto tendremos que tener eso en cuenta a la hora de localizar partes de código.

Primer Paso:

Dirigirnos a Diseño->Edicion de HTML y aquí selecionamos la casilla expandir plantillas de artilugios.
Una vez aquí localizar </head>, una vez aquí pegar el siguiente código justamente encima.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'fullpost') {
spans[i].style.display = 'none';
found = 1;}
if (spans[i].className == 'showlink') {
if (found == 0) {
spans[i].style.display = 'none';
}}}}</script>
</b:if>


Segundo Paso:

Tendremos que localizar en el código de la plantilla una parte similar o igual a la siguiente:

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Como digo no tiene que ser exactamente igual, podéis utilizar ctr+f para localizar partes de código.

Tercer Paso:

Tendremos que cambiar el bloque anteriormente localizado por el siguiente:

<div class='post-body' expr:id='"post-" + data:post.id'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<span class='showlink'>
<p><a expr:href='data:post.url'>Leer más...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Legado a este punto ya tenemos todo lo necesario para crear entradas y ampliarlas mediante el Leer mas

Cuarto Paso:(Como crear la entrada)

Tendremos que copiar el siguiente código en las entradas que queramos ampliar de la siguiente forma:

Parte de entrada a la vista
<span class="fullpost">
El resto de la entrada no se verá hasta hacer click en "Leer más"
</span>