- Home
- Post archiviati in articoli recenti
Pubblicato il 02/05/12 - aggiornato il | 33 commenti :
Widget degli Ultimi Articoli per Blogger con icona.
Pubblicato il 24/04/12 - aggiornato il | 124 commenti :
Slideshow degli Ultimi Post con immagini e bottoni di navigazione.
I widget visualizzati sotto forma di slideshow piacciono moltissimo soprattutto alle blogger donne ma anche gli uomini non li disdegnano affatto. Ci sono essenzialmente due diversi tipi di gadget per slideshow. Quelli che mostrano le immagini di alcuni post con i relativi link che si vogliono tenere sempre in primo piano e quelli che invece si aggiornano con nuovi contenuti tutte le volte che ci sono nuove pubblicazioni. Questi ultimi vengono chiamati anche Content Sliders.
Pubblicato il 17/03/12 - aggiornato il | 109 commenti :
Widget degli Ultimi Post con Miniature per Blogger.
Aggiornamento: Il widget illustrato in questo post non è più funzionante perché non è più disponibile lo spazio su cui era caricato lo script. Lo stesso widget può però essere installato consultando il post
Widget degli Ultimi Articoli con Miniature per Blogger completamente personalizzabile
Pubblicato il 13/02/12 - aggiornato il | 25 commenti :
Widget degli Articoli Recenti con Miniature per Blogger.
Pubblicato il 16/04/11 - aggiornato il | 4 commenti :
Widget degli Ultimi Post con effetto di transizione.
Ho presentato molti gadget per mostrare gli Articoli Più Recenti del nostro blog su Blogger. Ricordo quello semplice con solo titoli e sommario, quello più complesso con le miniature e infine il gadget slideshow, il più sofisticato. Questo widget che vado a presentare è molto originale ed è stato realizzato usando le API di Google. Può essere personalizzato nei colori e nel numero dei post da visualizzare. La sua particolarità risiede nel fatto che saranno mostrati gli Ultimi Post con un breve sommario di solo uno di questi. Ci sarà un effetto di transizione che porterà in primo piano alternativamente tutti gli articoli dell'elenco. Per avere una idea del suo funzionamento visionatelo sulla destra del post di prova
Aspettate qualche secondo per apprezzarne appieno le potenzialità. Ci sarà una freccia che indica di volta in volta il post di cui si visualizza l'incipit
Pubblicato il 03/02/10 - aggiornato il | 4 commenti :
Come inserire il widget degli Ultimi Articoli direttamente nel modello di Blogger.
Questo metodo di inserimento dei widget serve per due ragioni
- Velocizzare il caricamento della pagina visto che non si richiedono indirizzi esterni
- Evitare problemi di blackout del sito in cui sono stati caricati gli script
</head>immediatamente sopra si incolla lo script del widget. E' meglio inserire dei commenti all'inizio e alla fine per essere sicuri di riconoscere il codice per eventuali future modifiche
<script type='text/javascript'>
//<![CDATA[
//credit to hoctro - tradotto da Parsifal32 - parsifal32.blogspot.com
function rp(json) {
document.write('<ul>');for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(leggi tutto)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Gen";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mag";
monthnames[6] = "Giu";
monthnames[7] = "Lug";
monthnames[8] = "Ago";
monthnames[9] = "Set";
monthnames[10] = "Ott";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
//]]>
</script>
<!--ULTIMI ARTICOLI FINE-->
Adesso andate in Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e in Sezione del sito incollate questo codice
var numposts = 8;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://parsifal32.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
<div style="font-size:50%;text-align:center"><p> <a href="http://goo.gl/2O9J">Install widget</a> </p></div>
- Il numero di articoli da visualizzare (8)
- Se si vuole mostrare anche la data del post (false non si mostra true invece sì)
- L'opzione di mostrare il sommario del post (false non si visualizza con true invece sì)
- Il numero dei caratteri del sommario (100) nel caso si sia scelto true alla riga precedente
- Ovviamente l'URL del blog evidenziato di rosso
Nella demo ho scelto di non mostrare né sommario dell'articolo, né data. Se invece si scelgono le altre opzioni il widget avrà questa forma
Pubblicato il 07/01/10 - aggiornato il | 8 commenti :
Come inserire il Widget degli Ultimi Articoli relativi a una singola etichetta in un blog su Blogger.
Ci sono dei blog nei quali c'è l'esigenza di mostrare gli ultimi articoli suddivisi per etichetta. Poniamo che si abbia un blog che parla di motori, in questo caso potrebbe essere utile presentare due widget distinti con gli articoli più recenti relativi all'etichetta "moto" e a quella "auto"; se si ha un blog di televisione potremmo volere un widget con gli articoli dell'etichetta "reality" e quelli dell'etichetta "sport" e così via.
Con il sistema che vado a illustrare si possono creare tutti i widget che vogliamo per tutte le etichette del blog. Il codice da personalizzare è il seguente
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/ultimi_articoli_categoria.js"></script>
<script>
var numposts = 8;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://nome-blog.blogspot.com/feeds/posts/default/-/nome-etichetta?orderby=published&alt=json-in-script&callback=rp"></script>
<div style="font-size:70%;text-align:center"><p> <a href="http://goo.gl/zc7V">Install widget</a> </p></div>
dove i dati eventualmente da cambiare sono
- var numposts = 8; - rappresenta il numero degli articoli da mostrare nel widget
- var showpostdate = false; - se si vuole mostrare la data dell'articolo si inserisce true invece di false
- var showpostsummary = false; - se oltre al titolo si vuole mostrare anche il sommario del post si mette true invece di false
- var numchars = 100; - sono i numeri di caratteri massimi del titolo. Se si supera il limite si vedrà il link "leggi".
- nome-blog va sostituito con il nome del nostro blog su Blogger. Nel caso avessimo un dominio personalizzato dovremo inserire www.mioblog.com al posto di nome-blog.blogspot.com.
- nome-etichetta va sostituita con l'etichetta di cui vogliamo gli ultimi articoli (p.e. auto, cinema, blogger,..)
Dobbiamo andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollare il codice personalizzato in Sezioni del sito mentre come Titolo ne inseriamo uno a piacere sul tipo "Ultimi Articoli Cinema". Si clicca su Salva e si posiziona l'elemento con il mouse nella posizione che preferiamo.
Nel mio blog di prova ho inserito questo widget per l'etichetta "blogger" nella pagina
Alternativamente potete consultare il post su come inserire il "Widget degli ultimi post con miniature per categoria".
Pubblicato il 05/01/10 - aggiornato il | 53 commenti :
Il widget degli articoli recenti con miniature e sommario per blog su Blogger.
Come i due precedenti widget, anche in questo caso non si va a modificare direttamente il modello ma si inserisce soltanto un nuovo elemento pagina, andiamo però per gradi. Occorrerà personalizzare questo codice
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 280;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 12;
acolor = "#191919";
aBold = true;
icon = " • ";
text = "Commenti";
showPostDate = false;
summaryPost = 70;
summaryFontsize = 10;
summaryColor = "#242424";
icon2 = " → ";
numposts = 6;
rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js" type="text/javascript"></script>
Le personalizzazioni riguardano i seguenti elementi
- imgr[0] , imgr[1], ecc rappresentano le immagini casuali che vengono visualizzate come miniature nel caso non ce ne siano nei post. Gli URL inseriti da me sono relativi a immagini di albe e tramonti e possono essere cambiate con altre più attinenti
- showRandomImg = true; se si vogliono mostrare le immagini casuali altrimenti sostituire true con false. Nel caso di blog con immagini in tutti i post.
- tablewidth = 280; rappresenta la larghezza del widget
- cellspacing = 1; è la distanza tra le celle della tabella verticale
- borderColor = "#ffffff"; è il colore del bordo
- bgTD = "#ffffff"; è il colore di sfondo del widget
- imgwidth = 120; è la larghezza della miniatura
- imgheight = 120; è l'altezza della miniatura
- fntsize = 12; è la dimensione dei caratteri del Titolo del post
- acolor = "#191919"; è il colore del testo del Titolo del post
- aBold = true; significa che il titolo è in grassetto, se non si vuole in grassetto bisogna sostituire true con false
- icon = " • "; e icon2 = " → "; rappresentano le icone che si visualizzeranno rispettivamente prima del Titolo e prima del Sommario. Si possono sostituire con altri simboli oppure lasciare lo spazio vuoto se non ci piacciono
- text = "Commenti"; è il testo che sarà visualizzato accanto al numero dei commenti. Se non vogliamo nessun testo basta lasciare text = " ";
- summaryPost = 70; rappresenta il numero dei caratteri del sommario del post
- summaryFontsize = 10; è la dimensione dei caratteri del sommario
- summaryColor = "#242424"; è il colore del testo del Sommario dell'articolo
- numposts = 6; è il numero degli articoli che si vogliono visualizzare nel widget
- rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default"; qui dovete inserire l'URL dei feed del vostro blog. Se avete un blog su Blogger basterà sostituire la parte evidenziata di verde
Per vedere questo gadget in azione potete andare nella pagina dedicata agli "articoli recenti con miniature e sommario" del mio blog di prova.
Importante: Se avete un dominio personalizzato cioè del tipo www.miodominio.com, il widget non funzionerà. Dovrete scaricare il javascript con l'URL colorato di blu e caricalo nella cartella Public di Dropbox.
Aggiornamento n° 1: Per non inserire il numero dei commenti consultate questo post
Pubblicato il 04/12/09 - aggiornato il | 8 commenti :
Il widget degli ultimi articoli con miniature da installare con pochi click.
Per coloro che amano i widget colorati e pieni di immagini è adesso disponibile una versione del gadget degli articoli recenti per blogger da inserire con pochi click come se fosse un widget di quelli che mette a disposizione Blogger.
Andate in Layout > Aggiungi un gadget e nella casella in alto incollate la seguente parola chiave "recent posts with thumbnails"
Cliccate sul pulsante di ricerca o premete Invio; avrete un solo risultato che sarà mostrato nella finestra successiva
Cliccate sul segno più per inserire il widget nel blog. Il gadget dovrà essere personalizzato riempendo i campi e mettendo o togliendo i segni di spunta
Le personalizzazioni riguardano
- Altezza del widget
- Numero degli articoli da mostrare
- Mostrare o non mostrare le miniature
- Mostrare o non mostrare il sommario dei post
- Numero di caratteri del sommario
- Mostrare o non mostrare la data
- Mostrare o non mostrare il numero dei commenti
- Mostrare o non mostrare il link read more
- Mostrare o non mostrare un separatore tra i post
Si deve inserire l'URL del blog e cliccare su Aggiorna per vederne l'anteprima in fondo alla finestra. Quando si è terminata la personalizzazione si clicca su Salva, quindi in Layout > Elementi pagina si trascina nella posizione desiderata. Per vedere questo widget in azione guarda questa demo.
Ho presentato altri widget simili quali quegli degli ultimi articoli con miniature e degli articoli recenti con miniature in orizzontale.
Fonte | Allblogtools -
Pubblicato il 02/09/09 - aggiornato il | Nessun commento :
Quattro nuovi widget per Blogger: Picasa Photostream, Twitter Updates, Ultimi Articoli e Commenti Recenti.
Le novità in Blogger sono ormai a getto continuo anche se quelle che vado ad illustrarvi sono di qualche settimana fa. Questi widget sono stati sviluppati da Amanda di Blogger Buster e ripresi dal blog di Blogger in Draft e riguardano
- Picasa PhotoStream – per visualizzare nel blog gli album pubblici caricati su Picasa
- Twitter Updates – per mostrare il proprio stato su Twitter
- Recent Posts – si vedono gli ultimi articoli
- Recent Comments – per mostrare gli ultimi commenti
Il sistema di inserimento nel blog è automatico, basta cliccare nei seguenti link e selezionare quello nel quale aggiungere il widget. Successivamente si può spostare il gadget con il mouse nella posizione desiderata
- Aggiungi Picasa Photostream -
- Aggiungi Twitter Updates -
- Aggiungi Recent Posts -
- Aggiungi Recent Comments -
Se si clicca per esempio sul primo collegamento si aprirà una finestra di questo tipo
in cui selezionare il blog per inserirci il gadget. Personalmente ne ho tantissimi perché ogni tanto ne creo uno che mi serve come test di qualche funzionalità. Si va quindi su Configura Gadget
e si digitano i dati di Titolo, Altezza, Username, Numero di miniature, si mette il segno di spunta se si vuole inserire anche il link alle nostre immagini, quindi si clicca su Salva. Il flusso di immagini sarà visibile se avete condiviso su Picasa degli album in modo pubblico. Se non vi ricordate il nick con il quale siete registrati su Picasa andate su Picasa > Setting > Generale.
Se invece vogliamo inserire il nostro stato su Twitter clicchiamo sul secondo link e, come configurazione dobbiamo compilare una scheda simile a questa
Cliccando su Anteprima possiamo vedere l’aspetto del widget prima di inserirlo. Ovviamente si clicca su Salva e si posiziona con il mouse. Una cosa analoga vale per gli Ultimi Articoli e per gli Ultimi Commenti
Ho inserito questi gadget nel blog che ho usato come test dell’Effetto Sfoglia-Pagina. Avevo colpevolmente dimenticato di illustrare questi gadget che mi sono stati opportunamente ricordati da un post di Tuttovolume.
Pubblicato il 03/07/09 - aggiornato il | 4 commenti :
Creare il widget degli articoli recenti con FeedBurner.
Entrare nel vostro account di FeedBurner e andate nella scheda Publicize > Headline Animator e scegliete
1)La dimensione del widget
2)Il Titolo
3)La larghezza del testo, i colori e le dimensioni dei caratteri
Cliccate su Activate per salvarlo, sarà sempre possibile eliminarlo in un secondo tempo. Adesso scegliete un servizio di blogging al quale aggiungerlo e procedete su Next
Nel caso di Blogger si potrà comunque spostare successivamente con il mouse nella posizione desiderata
Conviene togliere il titolo e andare su aggiungi widget che mostra ad intermittenza gli ultimi cinque articoli pubblicati.
Se si sceglie Email Signature viene aggiunto anche un bottone di sottoscrizione dei feed via email. Il codice relativo in questo caso può essere copiato in un file di testo ed incollato alla fine di ogni articolo per invogliare i lettori alla sottoscrizione del feed.
Pubblicato il 06/06/09 - aggiornato il | 35 commenti :
Come inserire in modo orizzontale il widget degli ultimi articoli con miniature nell’header del blog.
</script>
<script src="http://tinyurl.com/pntst6" type="text/javascript"></script>
Per quanto riguarda la possibilità di personalizzazioni vi rimando all’articolo citato. Su precisa richiesta di un commento riporto anche il codice per inserire il widget in modo orizzontale sotto l’header del blog o anche al posto dell’header. Basta sostituire l’URL della ultima riga del codice dello script colorato di rosso con quest’altro URL
<tr>
<td style="margin-left: 20px; margin-top: 10px;" align="left"><script language="JavaScript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 900;
cellspacing = 7;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 113;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts =6;
home_page = "http://miosito.blogspot.com/";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontalisommario.js" type="text/javascript"></script>
</td>
</tr>
</table>
<div style="font-size:70%;text-align:right"><p> <a href="http://is.gd/22ilw">Install widget</a> </p></div>
In questo caso il risultato è più compatto. I dati in rosso devono essere modificati a seconda delle esigenze del nostro modello.
- 900 è la larghezza del widget
- 113 e 100 sono la larghezza e l’altezza delle miniature
- 6 è il numero di post che si vuole mostrare
- #ffffff è il colore dello sfondo, in questo caso bianco
- 7 è lo spazio in pixel tra le varie miniature
Se volete visualizzare solo le immagini senza titolo del post e sommario sostituite l'URL
http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontalisommario.js
con il seguente
http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontali1.js
Pubblicato il 03/06/09 - aggiornato il | 18 commenti :
Come inserire il widget degli ultimi articoli corredati da miniature delle immagini in un blog su Blogger.
Adesso per coloro che hanno particolarmente a cuore l’aspetto del proprio blog su Blogger e amano i widget colorati presento una diversa opzione che sono sicuro piacerà parecchio specialmente alle donne.
Non occorre minimamente cambiare il modello, dobbiamo solo stare attenti alle dimensioni del nostro template.
Andate su Layout > Aggiungi un gadget > HTML/Javascript ed inserite il codice riportato qui sotto nell’elemento. Mettete pure un titolo del tipo Ultimi Articoli
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page ="http://miosito.blogspot.com/";
</script>
<script src="https://sites.google.com/site/ideepercomputeredinternet/script-1/scriptarticolirecentiminiature.js" type="text/javascript"></script>
Posizionate con il mouse l’elemento nel punto che desiderate quindi Salvate il tutto.
Ovviamente prima ci sono le personalizzazioni da fare
- Le righe di codice che vanno da imgr[0]=”URL_immagine”; a imgr[4]=”URL_immagine”; rappresentano le immagini che vengono visualizzate nel caso non ce ne fossero negli articoli del blog. Ho raccolto e caricato 5 immagini di alba e tramonto, quindi ne ho acquisito l’URL, infine l’ho accorciato con TinyURL. Ovviamente potete caricare nel Web le immagini che preferite e sostituire gli URL contrassegnati di rosso con quelli delle vostre immagini
- La larghezza e l’altezza delle immagini l’ho scelta width=”120” e height=”100” in pixel. Naturalmente potete adattare le misure al vostro modello
- Il numero di post recenti da visualizzare l’ho inserito uguale a cinque e ovviamente si può cambiare numero a seconda delle esigenze
- Lo script del widget si trova a questo indirizzo e se volete potete copiarlo e hostarlo su un vostro account
- Al posto di miosito.blogspot.com inserite l’indirizzo del vostro blog. Mi raccomando di mantenere la slash (/) finale
- In questo caso il Titolo del post viene posto alla destra della Miniatura. Si può anche metterlo sopra o sotto agendo sullo script di cui al punto 4). Se interessa magari posso tornare sull’argomento
- Se volete vedere come funziona il widget date uno sguardo ad un mio blog che avevo abbandonato da molto tempo e che mi è servito da cavia – Photosvideosandmore – In questo caso non ci sono foto o immagini negli ultimi post quindi si vedono le miniature di cui al punto 1). Il widget si trova in alto a destra e mostra anche il numero dei commenti per ciascun post.
Ho testato il widget con Internet Explorer 8, Firefox e Chrome e funziona con tutti e tre. L’unico problema che potreste incontrare è quello delle dimensioni delle miniature ma penso che dovrebbe andare tutto bene. Inoltre c’è da dire che il lavoro per installarlo e, eventualmente, disinstallarlo è davvero piccolo visto che si tratta solo di un gadget e non si opera sul template.
Aggiornamento: In questo nuovo articolo ho illustrato come presentare il widget in modo orizzontale e ho quindi cambiato aspetto al blog Photos and Videos.