Mostrare tutti i post elencati in una pagina o widget di blogger

Gran bel strumento per creare in automatico un elenco di post su blogger, in maniera semplice e automatica.  Se avete un sito che inizia ad avere un certo volume di articoli, post o pagine, allora sarà meglio che abbiate anche uno strumento di ricerca che sia ottimale e creare delle pagine di elenchi di link.

Il vostro blog parla di giardinaggio? Immaginate una pagina che in maniera possa avere tutti gli articoli scritti riguardante il taglio dell'erba. Se ne avete poche centinaia è un lavoro che potete fare a mano, invece se così non è dovete trovare una soluzione rapida e automatica, che con le giuste attenzioni possa risolvervi tanto lavoro.




Questo codice è un HTML/JAVASCRIPT, potete quindi scegliere se creare una pagina separata dove avrete l'elenco delle pagine oppure creare un Widget apposta per pubblicare l'elenco.

Il codice da utilizzare è il seguente, da selezionare, copiare e incollare:


<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:#262626url(https://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/s300-no/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://radiuk.blogspot.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 = "https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/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>


Prima di salvare il vostro post/gadget , dovete fare le opportune modifiche:


  1. Sostituite il http://radiuk.blogspot.com con il vostro indirizzo web. Se si tratta di un blog non registrato su un dominio, state attenti a non metter .it ma sempre il .com . Stai attento se hai l'indirizzo registrato, ad esempio www.engineeringradiuk.com , a non inserirlo: devi mettere quello con l'url di blogspot.com altrimenti non funziona!
  2. Inserite nel campo etichetta  che l'etichetta che volete utilizzare. Se sono due parole, dovete inserire nello spazio tra le due il %20 , cioè etichetta%20etichetta

Ora potete pubblicare, se avete fatto questi due semplici passaggi allora funzionerà correttamente. Potete fare ulteriori modifiche e personalizzazioni:

  • Si può sostituire la nomenclatura con altri termini (Altro, Articolo successivo, ecc...)
    • Inizio
    • Post precedenti
    • Post successivi
  • I colori potete cambiarli per migliorare il vostro layout
  • Le miniature hanno dimensioni height:70px width:70px personalizzabili.
  • var numfeed = 5 è il numero di post che si vedono per pagina
  • var characnumber = 90 è il numero dei caratteri da visualizzare nella cella
  • Lo script ci mette qualche istante a caricarsi, appaiono due immagini di caricamento, che possono essere cambiate.

 In bocca al lupo!

Articoli correlati:

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...