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.
Nessun commento :
Scrivi un commento
I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail.