Le etichette non fanno altro che mostrare gli ultimi articoli che hanno in comune quella specifica etichetta. Sono importanti per l'utilizzo di alcuni tipi di widget come gli articoli correlati, per creare sezioni di un menù, per migliorare la navigazione in generale (leggi anche: a cosa servono le etichette).
Ma mi è stato fatto notare che se si volesse mostrare un gadget solo in una specifica etichetta, questo non è possibile, nemmeno se si utilizzano i tag per mostrare o nascondere i widget da alcune pagine del blog. A tal proposito in questa guida viene spiegato come incorporare una copia di una pagina delle etichette dentro un post, una pagina o un widget, così facendo diventa più facile da gestire utilizzando i tag e per alcuni potrebbe risultare esteticamente migliore.
Eccovi un'anteprima del risultato finale:
Per incorporare un'etichetta dentro un post su Blogger dovete iniziare a scrivere un post o una pagina ed usando solo la modalità HTML (senza mai andare su Scrivi), per incorporarla dentro un widget dovrete utilizzare il gadget HTML/Javascript; in entrambi i casi dovete copiare ed incollare il seguente codice:
1) "http://scuolissima.com" = sostituite questo url con quello del vostro blog.
2) etichetta = sostituite questo termine con il nome dell'etichetta che volete utilizzare. Si ricorda nell'url dell'etichetta si vanno ad aggiungere dei codici a seconda se è formata da due parole (es. Due%20Parole), o se la parola contiene un apostrofo (es. l%27etichetta).
3) Georgia è la famiglia utilizzata e si può cambiare per tutti o per un solo elemento.
4) All'interno del codice ci sono due url, il primo è una gif (quella che appare prima del caricamento dello script), la seconda url è quella dell'articolo che è sprovvisto di una immagine.
5) height:70px e width:70px = sono le dimensioni di altezza e larghezza delle miniature dei post.
6) var numfeed = 5; = questo numero serve per impostare il numero di articoli da visualizzare, conviene non esagerare con questo numero perché la pagina potrebbe risultare appesantita.
7) var characnumber = 90; = rappresenta il numero di caratteri della descrizione dei post.
8) height:950px; = rappresenta l'altezza del widget e a volte può essere necessario cambiarla per adattare gli spazi.
9) I link per navigare presenti sotto la lista di articoli dell'etichetta (Post precedenti, Post successivi, Inizio) si possono rinominare e proprio piacimento.
Ma mi è stato fatto notare che se si volesse mostrare un gadget solo in una specifica etichetta, questo non è possibile, nemmeno se si utilizzano i tag per mostrare o nascondere i widget da alcune pagine del blog. A tal proposito in questa guida viene spiegato come incorporare una copia di una pagina delle etichette dentro un post, una pagina o un widget, così facendo diventa più facile da gestire utilizzando i tag e per alcuni potrebbe risultare esteticamente migliore.
Eccovi un'anteprima del risultato finale:
Per incorporare un'etichetta dentro un post su Blogger dovete iniziare a scrivere un post o una pagina ed usando solo la modalità HTML (senza mai andare su Scrivi), per incorporarla dentro un widget dovrete utilizzare il gadget HTML/Javascript; in entrambi i casi dovete copiare ed incollare il seguente codice:
<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(http://1.bp.blogspot.com/-n8c1uWylTQc/VOd5yZMMGZI/AAAAAAAAbSo/fVZsxOZjX10/s1600/ajax_loader.gif) no-repeat 50% 50%;height:470px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://scuolissima.com";
var characnumber = 90;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://4.bp.blogspot.com/-_oiIrNOuras/VOd5f_lk1dI/AAAAAAAAbSg/9ueBUMBSJ20/s1600/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,characnumber) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'></div>";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default/-/etichetta"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<div id="el_box"></div>
<div id="navigazione"></div>
Personalizzazioni
Per rendere funzionante questa funzionalità dovete eseguire alcune modifiche al codice, ma solamente le prime due sono indispensabili, e sono:1) "http://scuolissima.com" = sostituite questo url con quello del vostro blog.
2) etichetta = sostituite questo termine con il nome dell'etichetta che volete utilizzare. Si ricorda nell'url dell'etichetta si vanno ad aggiungere dei codici a seconda se è formata da due parole (es. Due%20Parole), o se la parola contiene un apostrofo (es. l%27etichetta).
3) Georgia è la famiglia utilizzata e si può cambiare per tutti o per un solo elemento.
4) All'interno del codice ci sono due url, il primo è una gif (quella che appare prima del caricamento dello script), la seconda url è quella dell'articolo che è sprovvisto di una immagine.
5) height:70px e width:70px = sono le dimensioni di altezza e larghezza delle miniature dei post.
6) var numfeed = 5; = questo numero serve per impostare il numero di articoli da visualizzare, conviene non esagerare con questo numero perché la pagina potrebbe risultare appesantita.
7) var characnumber = 90; = rappresenta il numero di caratteri della descrizione dei post.
8) height:950px; = rappresenta l'altezza del widget e a volte può essere necessario cambiarla per adattare gli spazi.
9) I link per navigare presenti sotto la lista di articoli dell'etichetta (Post precedenti, Post successivi, Inizio) si possono rinominare e proprio piacimento.
