Como mostrar las últimas entradas de una etiqueta en particular

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Estás leyendo Ultimas entradas de una etiqueta en particular en el blog (script), en Widget - Gadget

Ultimas entradas de una etiqueta en particular en el blog (script)

Mostrar las últimas entradas en nuestro blog es un complemento muy útil para los lectores que desean acceder con facilidad y rapidez al contenido recientemente publicado. Son muchos los procedimientos que ya hemos visto para instalar esta herramienta. Ultimas entradas con miniatura de imagen, Últimas entradas en movimiento (widget de control manual) e incluso Mostrar las últimas entradas de una etiqueta específica.

Este último truco es el que precisamente explicaré en esta entrada. No se trata del mismo tutorial sino que he dado con otro procedimiento más simple y efectivo para mostrar lo mismo: una lista con los títulos de tus últimos artículos bajo una etiqueta en particular.

A continuación te muestro una imagen del resultado:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade estas líneas:

<script src='https://sites.google.com/site/editoriosus/fds/UltimsblJtetiq.js'/><link href='https://sites.google.com/site/editoriosus/fds/blJtetik.css' media='screen' rel='stylesheet' type='text/css'/><style>#UltimblJtetiqu a {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jlCxccXOlsZLYbF1k8WVJIP9JaNi-s4faQegcPQg4XE1bpp7E7HRqePESCc8LYXp1_xM3bxI_Nfaqr94bnwwpZ0D6ug42LSVQ2Tq_oVLsMx2vkVHWLtV9NkZG3NvKMNfHGLntC9K7MI/") no-repeat scroll 0 -6px transparent;}</style>

Seguidamente guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Agrega esto en su interior:

<div id="UltimblJtetiqu"><script src="http://TUBLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?max-results=10&alt=json-in-script&callback=blJtetiq"></script></div>

Reemplaza TUBLOG por la dirección de tu blog (no hace falta que incluyas el http:// o el .blogspot.com ya que tal y como puedes ver ha sido insertado).

En ETIQUETA escribe la etiqueta tal y como aparece en tus entradas (con sus mayúsculas, minúsculas, tildes, acentos...) de manera que los últimos posts puedan mostrarse.

En la línea max-results=10 puedes controlar el número de títulos que aparecerán. Aumenta o disminuye la cifra (10).

Guarda el gadget para terminar.

Read More

Cómo decorar las etiquetas con una palabra o frase al lado

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Decorar los números de las etiquetas o incluir una palabra personal

Cuando añadimos el gadget de Etiquetas, éste muestra el número de entradas junto a cada categoría.

Hace tiempo aprendimos a quitar el número que aparece junto a cada tag.

Antes de empezar debes tener el gadget de Etiquetas instalado:




Una vez lo tengas en el blog podremos comenzar. Vamos a personalizar un poco más el número, añadiéndole una palabra o frase al lado...

Diseño>edición HTML>expandimos artilugios

Busca la siguiente línea:

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

Un poco más abajo encontrarás esta otra:

(<data:label.count/>)

Sustitúyela (con los paréntesis incluidos) por este bloque:

(
<b:if cond='data:showFreqNumbers == 0'>
recetas
<b:else/>
<b:if cond='data:label.count == 1'>
1 receta
<b:else/>
<data:label.count/> recetas
</b:if>
</b:if>)

Cambia la palabra recetas por una frase o palabra personal (debes escribirla tres veces).

Por último, haz vista previa para ver el resultado y guarda cambios.

Read More

Etiquetas divididas en 4 columnas arriba de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Etiquetas divididas en cuatro columnas encima del bloque de entradas

Previamente vimos el truco para incluir las etiquetas divididas en cuatro columnas encima del pié del blog.

Son bastantes las personas que me preguntaron cómo hacer dicho truco pero, en lugar de incluir las columnas encima del pié del blog, insertarlas encima del bloque de las entradas (main-wrapper).

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

#etiquetasbloque {
width:870px;
text-align:left;
margin:0 auto 10px;
line-height: 1.6em;
clear:both;
padding-top: 12px;
}

.etiqueta {
color: #000000;
line-height: 1.5em;
}

.etiqueta .widget {
padding:0 0 1.5em;
margin:0 .4em 1.5em .4em;
}

.etiqueta ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.etiqueta ul li {
float:left;
list-style-type: none;
width:20%;
margin: 0 0 5px;
background: transparent url(http://www.iconfinder.net/data/icons/silk2/bullet_green.png) no-repeat left center;
padding-left: 15px;
}

.etiqueta:hover {
color: #999999;
}

Ahora busca esta línea:

<div id='main-wrapper'>

Y encima agrega lo siguiente:

<div id='etiquetasbloque'>
<b:section class='etiqueta' id='etiqueta'>
<b:widget id='Label112' locked='false' title='Etiquetas' type='Label'>
</b:widget>
</b:section>
</div>

Nota:

En el primer paso, debes pegar los bloques de CSS que darán estilo a las columnas. Si realizaste el truco de las etiquetas divididas en cuatro columnas encima del pié del blog, no será necesario que los introduzcas de nuevo.

Read More

Como ofrecer la opción de suscribirse a distintas categorías

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Ofrecer la opción de suscribir a diferentes etiquetas

Este truco es muy sencillo de realizar y ofrece la gran ventaja de ahorrarnos el incluir elementos de página que posibiliten la suscripción a etiquetas o categorías del blog.

Se trata de poner un código en la plantilla para que, con solo pulsar el botón Feed del navegador, aparezcan distintas formas de suscribirse al blog:

En la imagen puedes ver la opción "Suscribirse a Setas comestibles" debido a que estoy leyendo artículos con esta etiqueta.

Para incluirlo en tu blog sigue los siguientes pasos:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <body> (que estará debajo de la etiqueta </head>) y encima inserta este bloque:

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<link expr:href='&quot;DIRECCION DE TU BLOG/feeds/posts/default/-/&quot; + data:blog.pageName' expr:title='data:blog.title + &quot; - &quot; + data:blog.pageName' rel='alternate' type='application/rss+xml'/></b:if></b:if></b:if>

Sustituye DIRECCION DE TU BLOG por la url de tu sitio web (sin incluir la barra final, es decir, la que te muestro en rojo:http://elbalcondejaime.blogspot.com/).

Para terminar, guarda la plantilla:

Read More

Como poner imágenes o iconos distintos según la categoría

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Imágenes diferentes según la etiqueta bajo el título de las entradas

Lo que vamos a conseguir con este truco que se me ha ocurrido es algo muy útil, que nos puede ayudar a roganizar el blog de otra forma, a crear un índice, a destacar las entradas de una etiqueta o categoría específica...

Básicamente lo que haremos es introducir un código en la plantilla que permitirá mostrar una imagen (o un enlace / texto) en especial en todas las entradas de una etiqueta.

Pongamos un ejemplo para entenderlo mejor. Si yo tengo un blog con las siguientes etiquetas: peces, perros y gatos, insertaré en el código el nombre de cada animal y una foto que después aparecerá en las entradas con esa etiqueta para describirlo.

En la siguiente imagen puedes ver como cada entrada tiene su correspondiente imagen (la primera entrada tiene la etiqueta "peces", la segunda "perros" y la tercera "gatos").

Las fotos aparecerán en todos los artículos con la etiqueta "perros, gatos o peces" respectivamente, lo que ayudará bastante a tus lectores.

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y justo debajo añade esto:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
</b:loop>

Reemplaza en el código:

ETIQUETA por la etiqueta que desees. Ten en cuenta que tienes que escribirla tal y como aparece en las entradas del blog (con mayúsculas o minúsculas).

URL DE LA IMAGEN por la dirección del icono o la imagen que representará a la etiqueta que incluyas.

Si deseas añadir más etiquetas y por tanto, más imágenes, utiliza esta línea tantas veces como quieras:

<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>

Pero recuerda que debes pegarla siempre antes del cierre </b:loop>.

Las imágenes aparecerán a la derecha del título pero puedes centrarlas o alinearlas a la izquierda cambiando align='right'por align='center' o align='left'.

Finalmente guarda la plantilla:

Read More

Como editar el texto y el aspecto del cartel "Mostrando entradas con la etiqueta..."

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Editar el texto y el aspecto del cartel "Mostrando entradas con la etiqueta..."

Hace ya bastante tiempo aprendimos a ocultar o eliminar el cartel con el mensaje "Mostrando entradas con la etiqueta..." y, a decir verdad, nos fué de mucha utilidada casi todos.

En un comentario que leí hace unos días me preguntaban si existe una forma de editar el texto del cartel, así como darle un estilo personalizado.

Y por supuesto que existe, es más, se me ha ocurrido un método sencillísimo de conseguir ambas cosas...

Diseño>edición HTML>expandimos artilugios

Busca este bloque de código:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Y reemplázalo por esto otro:

<div class='status-msg-wrap'>
Estás viendo los artículos con la etiqueta... &quot;<data:blog.pageName/>&quot;</div>

Puedes cambiar la frase que se mostrará en el cartel y escribir algo a tu gusto.

Ahora vamos a aplicarle el CSS necesario para poder editarlo a nuestro gusto.

Busca la etiqueta ]]></b:skin> y añade este bloque encima:

.status-msg-wrap{background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 #fff;
padding: 4px; border: 1px solid #ccc;}

Sustituye URL DE LA IMAGEN por la dirección del icono o la imagen de fondo ^[+].

Aquí te dejo el icono del ejemplo, por si deseas utilizarlo en tu cartel:




En caso de querer añadir una imagen de fondo y que ésta rellene todo el cartel, cambia el atributo no-repeat por repeat.

- Puedes editar la separación que habrá entre el contenido del cartel y el borde en la línea padding: 4px; (editando la cifra -4- por una mayor o menor).

- El grosor del borde puedes editarlo en la línea border: 1px solid #cccccc;, cambiando el valor 1px. El estilo (solid) también puede editarse. Para ello, visita este artículo acerca de los estilos de borde.

Finalmente el color del borde (#cccccc) también puede cambiarse, con ayuda de la tabla de colores.

Guarda tu plantilla para terminar:

Read More

Cambiar la palabra Etiqueta por una imagen o palabra

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Reempazar el texto "Etiquetas" por una imagen o icono

Si la plantilla que usas en tu blog de blogger no ha sido editada o modificada, lo más probable es que, al lado de las etiquetas que asignas a cada una de tus entradas, aparezca la palabra "Etiquetas".

En esta entrada aprenderemos a reemplazar esa palabra por una imagen o un icono cualquiera, con el propósito de obtener algo muy similar a lo que puedes ver a continuación:

Diseño>Edición de HTML>expandimos artilugios

Busca la línea <data:postLabelsLabel/> que estará en un código muy parecido a este:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

Simplemente tienes que borrar esa línea y pegar esta otra en su lugar:

<img style="border: none;" src="URL DE LA IMAGEN"/>

Incluye la dirección de tu icono o imagen en donde dice URL DE LA IMAGEN.

Haz vista previa para ver el resultado y guarda la plantilla para finalizar:

Read More

Inserta una nube de etiquetas o categorías en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Nube de enlaces

Hace tiempo descubrimos un truco muy interesante que nos permitía mostrar las etiquetas del blog en forma de nube 'flotante', que además, tenía movimiento y resultó ser una completa novedad en blogger.

En esta otra entrada voy a enseñarte a incluir una nube de enlaces en el blog, sin movimiento, pero totalmente personalizable y bastante atractiva.

La instalación es sencilla ya que únicamente requiere el uso de un gadget o elemento de página y además, los colores o tamaños podrán editarse.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código necesario:

<div id="blnub">
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
</div>

<style>
#blnub{text-align:center; padding:5px;}
#blnub a{text-decoration:none;}
#blnub a:hover{text-decoration:none; color: #CC3366;}
#blnub .blink1{font-size:14px; color:#3399CC;}
#blnub .blink2{font-size:20px; color:#3366CC;}
#blnub .blink3{font-size:16px; color:#006699;}
#blnub .blink4{font-size:15px; color:#339966;}
</style>

En cada línea reemplaza DIRECCION PAGINA por la dirección del blog, la web o el artículo al que conducirá el enlace y TITULO por el título que aparecerá en la nube.

Si deseas añadir más enlaces a la nube, inserta líneas como esta (siempre antes del cierre </div>) :

<a href="DIRECCION PAGINA" class="blink3">TITULO</a>

Teniendo en cuenta que blink3 es un estilo distinto a blink1, blink2 y blink4 por lo que puedes editar el valor 3 para cambiar el aspecto del enlace.

Puedes cambiar el color de los enlaces editando el valor hexadecimal de las líneas 'color:#3399CC;' y haciendo uso de la tabla de colores.

Guarda el gadget para terminar.

Read More

Autocategorías en Blogger: Muy útil para profesionalizar tu blog

Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.

 

Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

2.- Luego antes de </head> pega este script:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ew5hMCeGE3zuRVMwclMb0t0cS3oBirir2CC-S4SZnXpv2TpssVlTlge09OfiUNX1AJyizhiFHN3TNV4KeZ5VK2SjS0A4TVITbBPimHSVbaz3-R025EHENRrfZL8Ads9jvhNlg9IlTQY/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.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";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

3.- Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:

http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.

var numposts ← Número de entradas a mostrar
var showpostthumbnails ← Mostrar o no las miniaturas
var displaymore ← Mostrar o no el enlace para leer más
var displayseparator ← Mostrar o no un separador
var showcommentnum ← Mostrar o no el número de comentarios
var showpostdate ← Mostrar o no la fecha de las entradas
var showpostsummary ← Mostrar o no el resumen de las entradas
var numchars ← Número de caracteres en los resúmenes

Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.

Enlace

Read More