EL MENÚ DE ESTE BLOG (Menú por etiquetas)

(saber más de las etiquetas)

  Hoy voy a mostraros un conjunto que culminará en un menú por etiquetas, como el que utiliza este blog, es resultón y eficaz y muy importante: no da problemas. Espero que os sea de utilidad.

1º) Este es el script que hace el índice como un menú y se colocara o en el head o en el propio gadget ▼

<script type ="text/javascript" > function recentpostslist(json) {

    document.write('<ul>');

    for (var i = 0; i < json.feed.entry.length; i++) {

        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

                break;

            }

        }

        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs 

        var entryTitle = json.feed.entry[i].title.$t;

        var item = "<li>" + "<a href=" + entryUrl + '">' + entryTitle + "</a> </li>";

        document.write(item);

    }

    document.write('</ul>');

} </script> 

2ª) EL CSS colocarlo o bien en el b:skin o dentro del gadget ▼

<style>

/* Ocultar botón radio */

input[id^="spoiler"]{

display: none;

}

input[id^="spoiler"] + label {

display: block;

width: 70%; /* PROBAR A CAMBIAR EL PORCENTAJE*/

margin: 10px auto;

padding: 0px 20%;/* PROBAR A CAMBIAR EL PORCENTAJE*/

color: #112671;

font-size: 20px;/*TAMAÑO FUENTE ELEMENTO MENÚ*/

border-radius: 0px;

cursor: pointer;

transition: all .6s;

}

input[id^="spoiler"] + label:hover{

color:#44A5CA;/*COLOR AL PASAR EL RATÓN ELEMENTO MENÚ*/

transition: all .1s;

}

input[id^="spoiler"]:checked + label {

color:#44A5CA;/*COLOR AL DESPLEGAR DEL ELEMENTO MENÚ*/

}

input[id^="spoiler"] ~ .spoiler {

width: 80%;/* PROBAR A CAMBIAR EL PORCENTAJE*/

height: 0;

overflow: hidden;

opacity: 0;

margin: 0px auto 0; 

padding: 0px; 

border-radius: 0px;

transition: all .6s;

}

input[id^="spoiler"]:checked + label + .spoiler{

height: auto;

background:#CAE6F0;/*COLOR DEL FONDO DESPLEGADO*/

font-size: 16px;

opacity: 1;

padding: 10px;

}

</style>

3º) EL SCRIPT que saca el indice de las etiquetas y el HTML que lo muestra (también colocarlo en el gadget)▼

<input type="checkbox"  id="spoiler(Nº ETIQUETA)" /> 

  <label for="spoiler(Nº ETIQUETA)" >NOMBRE ETIQUETA</label>

<div class="spoiler"style="text-align:center;">

<script src="http://tecnicablogg.blogspot.com.es/feeds/posts/summary/-/NOMBRE EXACTO DE LA ETIQUETA?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

</div>

NOTA:

El mejor método es numerar el spoiler por cada elemento o etiqueta que contenga el menú y repetir este codigo con el spoiler con numeración distinta tantas veces como etiquetas quieras mostrar. ( Cuando numeres el spoiler acuérdate de quitar los paréntesis)

(Podéis colocarlo tal cual dentro del gadget)
EL GADGET COMPLETO QUEDARÍA ASÍ:

<script type ="text/javascript" > function recentpostslist(json) {

    document.write('<ul>');

    for (var i = 0; i < json.feed.entry.length; i++) {

        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

                break;

            }

        }

        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs 

        var entryTitle = json.feed.entry[i].title.$t;

        var item = "<li>" + "<a href=" + entryUrl + '">' + entryTitle + "</a> </li>";

        document.write(item);

    }

    document.write('</ul>');

} </script> 

<style>

/* Ocultar botón radio */

input[id^="spoiler"]{

display: none;

}

input[id^="spoiler"] + label {

display: block;

width: 70%;

margin: 10px auto;

padding: 0px 20%;

color: #112671;

font-size: 20px;

border-radius: 0px;

cursor: pointer;

transition: all .6s;

}

input[id^="spoiler"] + label:hover{

color:#44A5CA;

transition: all .1s;

}

input[id^="spoiler"]:checked + label {

color:#44A5CA;

}

input[id^="spoiler"] ~ .spoiler {

width: 80%;

height: 0;

overflow: hidden;

opacity: 0;

margin: 0px auto 0; 

padding: 0px; 

border-radius: 0px;

transition: all .6s;

}

input[id^="spoiler"]:checked + label + .spoiler{

height: auto;

background:#CAE6F0;

font-size: 16px;

opacity: 1;

padding: 10px;

}

</style>

<input type="checkbox"  id="spoiler(Nº ETIQUETA)" /> 

  <label for="spoiler(Nº ETIQUETA)" >NOMBRE ETIQUETA</label>

<div class="spoiler"style="text-align:center;">

<script src="http://tecnicablogg.blogspot.com.es/feeds/posts/summary/-/NOMBRE EXACTO DE LA ETIQUETA?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

</div>

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