L'altro giorno stavo navigando nel forum di supporto di Blogger e qualcuno mi ha chiesto di un gadget autore simile a quello che esisteva per WP. A dire il vero, non l'avevo mai visto, ma dalle spiegazioni mi è venuta un'idea e ho pensato che potesse essere utile per i blog con più autori.
Dato che non credo di averlo mai fatto prima, vorrei chiarire prima di continuare che tutto ciò che si può fare su una piattaforma si può fare anche sull'altra... a patto di avere le stesse risorse. Questo significa semplicemente che se qualcosa, ad esempio, richiede PHP e un hosting che lo supporti, entrambi i siti avranno bisogno di quel supporto. Quello che non possiamo fare – a meno che non siamo santi – sono i miracoli, ma con le stesse risorse si può fare la stessa cosa, e la piattaforma diventa praticamente indifferente.
Detto questo, la mia visione di questo tipo di gadget, che mostrerà tutti gli autori che hanno pubblicato di recente (ultimi 150 post al massimo), è simile a quella nello screenshot seguente. Qui puoi vedere gli avatar di ognuno di loro e, sotto, gli ultimi X post creati da quell'autore. Cliccando sull'avatar di ogni persona, il contenuto cambierà per mostrare ciò che ogni persona ha da offrire.
Ho adattato il formato per includerlo in una barra laterale.
Questa volta, per motivi di tempo, proporrò solo un copia e incolla per un gadget HTML/JavaScript . Tuttavia, alla fine di questo post, aggiungerò una demo, ed ecco un accesso al codice assemblato in Codepen . Accedendo in modalità di modifica, è possibile sperimentare con il codice per capirne meglio il funzionamento o persino crearne una variante. In pratica, legge il feed, salva i dati necessari, li ordina per autore e quindi visualizza alcune voci per ciascuno.
Ciò che deve essere modificato per personalizzare alcuni elementi è evidenziato in un colore diverso, anche se ne parlerò più avanti.
<div id="obautores"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>//<![CDATA[
// Parametri configurabili
var url = ' http://www.musicaememorandum.com ';
var totalposts = 30 ; // Numero di post da leggere (massimo 150)
var maxposts = 5 ; // Numero massimo di post da mostrare per autore
var empezarpor = 190 ; // 1 per iniziare con il post più recente
var granavatar = false ; // Vero/Falso per vedere o non vedere l'avatar grande
// Non devi cambiare nulla da qui
$(document).ready(function(){var a=$("#obauthors");$(a).prepend('<div class="bloading"/>');var b=new Array;$.getJSON(url+"/feeds/posts/default?orderby=published&start-index="+startwith+"&max-results="+totalposts+"&alt=js on&callback=?").done(function(c){c.feed.entry.length;$.each(c.feed.entry||[],function(a,c){c.author[0].name.$t&&(b[a]=new Array,b[a][0]=(c.author[0].name.$t||"").replace(/\"/g,"´"),b[a][1]=new Data(c.pubblicato.$t||Data.ora()),b[a][2]=c.titolo.$t||"",b[a][3]=(c.link||[]).slice(-1)[0].href,b[a][5]=c.autore[0].gd$immagine.src||"")}),b.sort(function(a,b){return a[0]>b[0]?1:a[0]<b[0]?-1:a[1]<b[1]?1:a[1]>b[1]?-1:0}),$(".bloading").remove(),$(a).append('<ul class="obautor"></ul>'),$(a).append('<div class="obaurtab"></div>');for(var f=0;f<b.length;f++){var g=b[f][0],h=g.replace(/\s/g,"");if(0==f||g!=b[f-1][0]){var i=1,j='<img title="'+g+'" alt="'+g+'" src="'+b[f][5]+'"/>';$(".obauthor").append('<li><a href="#'+h+'">'+j+g+"</a></li>"),$(".obautortab").append('<div id="'+h+'"><h4>'+g+'</h4><ul><li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li></ul></div>"),granavatar?$(j).insertAfter("#"+h+" h4"):$("#"+h+" h4").prepend(j)}altrimenti i<maxposts&&(i++,$("#"+h+" ul").append('<li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li>"))}$(".obautortab div").hide(),$("ul.obautortab li:first").addClass("active").show(),$(".obautortab div:first").show(),$(".//]]></script> <style>#obauthors {larghezza massima: 300px;famiglia di caratteri:arial;margine:0 auto;imbottitura: 10px 0 0;dimensione del riquadro:bordo-box;} #obauthors img {
imbottitura:0;margine:
0;bordo:0;} ul.obauthor{larghezza:100%;margine:
0
auto;imbottitura:0 0 10px 0;list-style:none;font-size:0;line-height:0;text-align:center;}
.obauthor li{display:inline-block;vertical-align: middle;width: 33,33%;height:0;padding-bottom: 33,33%;overflow:hidden;position:relative;box-sizing:border-box;}
.obauthor li a{display:inline-block;vertical-align: middle;overflow: hidden;position: relative;width:100%;height:0;padding-bottom: calc(100% - 10px);border:5px solid #fff;box-sizing:border-box;border-radius: 50%;}
.obauthor img {position:absolute;top:0;left:0;max-width:100% !important;min-height:100%;}
.obauthor li.hover su {border-color:#333;}
.obauthor li:hover a{border-color:#999;}
.obartortab {text-align:center;width:100%;display: block;font-size:16px;box-sizing:border-box;}
.obartortab img {width: 100%;}
.obartortab h4 {margin:0; bordo:1px solido #333;sfondo: #ccc;allineamento testo:centro;dimensione carattere: 18px;altezza linea:38px;}
.obabortab h4 img {float:sinistra;larghezza:38px;altezza:38px;bordo destro:1px solido #333;}
.obabortab ul {imbottitura:0;margine:0;stile elenco:nessuno;}
.obabortab li {sfondo:#ccc;imbottitura:10px;indentamento testo:0;}
.obabortab li:nth-child(dispari) {sfondo:nessuno;}
.obabortab a {display:blocco;decorazione testo:nessuno;colore: #000;allineamento testo:sinistra;}
.obabortab a:hover {decorazione testo:sottolineato;}</style>
Per prima cosa, ho controllato il caricamento della libreria jQuery, perché se è già caricata per altri gadget o plugin, non è necessario caricarla di nuovo. Se è già presente, è possibile eliminare l'intera riga.
Poi ci sono cinque parametri, che sono gli unici che dovremo modificare per personalizzare il gadget a nostro piacimento:
- url : qui devi inserire l'indirizzo del blog da cui vuoi ottenere gli autori (senza barra alla fine)
- maxposts : numero massimo di post che mostreremo per ciascun autore per evitare di creare un widget infinito.
- totalposts : Stiamo per leggere un feed e poiché è un processo lento, qui andrebbe inserito il numero totale di voci da leggere.
- startwith : start-index , ovvero il numero del post da cui inizieremo la lettura nel feed. 1 per iniziare con il più recente; 10 per saltare il più recente 8; ecc.
- granavatar : se impostato su true , l'avatar dell'autore apparirà molto grande sotto il nome dell'autore. Se impostato su false , apparirà più piccolo e a sinistra del nome.
Commenti
Posta un commento