sábado, 15 de octubre de 2016

EL MENÚ DE ESTE BLOG (Menú por 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>
------------------------------------

No hay comentarios :

Publicar un comentario