Visualizzazione post con etichetta articoli recenti. Mostra tutti i post
Visualizzazione post con etichetta articoli recenti. Mostra tutti i post

Pubblicato il 02/05/12 - aggiornato il  | 33 commenti :

Widget degli Ultimi Articoli per Blogger con icona.

Una rassegna degli Ultimi Post pubblicati sono un dato essenziale per informare il navigatore del tipo di argomenti trattati dal nostro sito. Questo serve per cercare di far rimanere il più a lungo possibile il visitatore nel blog inducendolo a aprire almeno un altro post. Una diminuzione della frequenza di rimbalzo può avere ripercussioni molto positive sul posizionamento delle nostre pagine.

Ci sono moltissimi gadget che mostrano gli ultimi articoli. Si va da quello che fa vedere tutti i post a quello che permette di visualizzare solo quelli per una singola etichetta, dal widget orizzontale con le miniature a quello verticale sempre con miniature, dallo slideshow dei titoli dei post allo slideshow delle immagini degli ultimi articoli.

Ci sono alternative estremamente sofisticate e scelte più minimaliste. Passo a illustrare quale potrebbe essere una via di mezzo presentando il gadget degli Articoli Recenti in un elenco verticale ma con uno stile particolare che ci permetta di inserire una piccola icona prima di ciascun titolo.



Pubblicato il 24/04/12 - aggiornato il  | 124 commenti :

Slideshow degli Ultimi Post con immagini e bottoni di navigazione.

Aggiornamento

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.

Chi ha un blog su Wordpress ha l'imbarazzo della scelta tra una grande quantità di plugin a disposizione. La maggior parte di questi sono creati utilizzando la libreria JQuery. Per gli utenti di Blogger bisogna invece trovare il codice adatto da incollare nel modello e nell'elemento HTML/Javascript.



Pubblicato il 17/03/12 - aggiornato il  | 109 commenti :

Widget degli Ultimi Post con Miniature per Blogger.

Avevo già presentato un gadget che mostrasse gli Ultimi Articoli insieme alle Miniature completamente personalizzabile ma ultimamente su Blogger stanno cambiando parecchie cose. Il widget continua a funzionare per quelli che lo avevano installato ma, se si tenta di farlo nuovamente, si avrà la brutta sorpresa che non riusciremo a installarlo.

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

Su questo sito ci sono anche altre alternative a questo gadget, ne ricordo un paio, la prima in stile elenco e la seconda con il sommario oltre alle miniature. Vediamo però come installare un nuovo gadget degli Articoli Recenti con Miniature che è personalizzabile fino nei dettagli che ho realizzato basandomi sull'eccellente lavoro di Blogger Plugins. Cliccate sulla icona seguente



Pubblicato il 13/02/12 - aggiornato il  | 25 commenti :

Widget degli Articoli Recenti con Miniature per Blogger.

Ecco un'altra proposta per un widget che mostra gli Ultimi Post con Miniature per utenti di Blogger. Ne ho già presentati altri anche di grande successo come questo gadget degli Articoli Recenti ma i blog hanno le più svariate esigenze e poter scegliere tra varie opzioni è sempre meglio. 

Questo gadget mi risulta essere stato sviluppato da Webaholic e non differisce poi molto dalle altre versioni presenti in rete. La presenza delle miniature accanto al titolo di ciascun post è molto utile per i blog che fanno delle immagini il loro punto di forza. Le personalizzazioni applicabili riguardano però anche la possibile eliminazione della miniatura dall'elenco degli Ultimi Post. Ho tradotto il widget inserendo le iniziali dei mesi in italiano e modificato il javascript per mostrare la data secondo il nostro stile e non nel modo americano che prevede di scrivere prima il mese e poi il giorno.



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.

L'inserimento dei commenti recenti nel modello di Blogger ho riscontrato essere possibile solo in determinati template e con procedimento reiterato. Con il widget degli Ultimi Articoli non ho invece riscontrato alcun problema, nel caso si presentassero vi prego di comunicarmelo.
Questo metodo di inserimento dei widget serve per due ragioni
  1. Velocizzare il caricamento della pagina visto che non si richiedono indirizzi esterni
  2. Evitare problemi di blackout del sito in cui sono stati caricati gli script
Il procedimento è semplicissimo. Si va su Layout > Modifica HTML e dopo aver salvato il modello completo si cerca la riga
</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

<!--ULTIMI ARTICOLI INIZIO-->
<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-->
come mostrato dal seguente screenshot
ultimi-articoli
Adesso andate in Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e in Sezione del sito incollate questo codice
<script>
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>
Le personalizzazioni riguardano
  1. Il numero di articoli da visualizzare (8)
  2. Se si vuole mostrare anche la data del post (false non si mostra true invece sì)
  3. L'opzione di mostrare il sommario del post (false non si visualizza con true invece sì)
  4. Il numero dei caratteri del sommario (100) nel caso si sia scelto true alla riga precedente
  5. Ovviamente l'URL del blog evidenziato di rosso
Dopo aver inserito il Titolo del widget si clicca su Salva e con il drag & drop si posiziona andando su Layout > Elementi pagina. La realizzazione può essere vista nel post demo dedicato agli articoli recenti.
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
        image         ultimi-articoli-3       ultimi-articoli-3


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

  1. var numposts = 8; - rappresenta il numero degli articoli da mostrare nel widget
  2. var showpostdate = false; - se si vuole mostrare la data dell'articolo si inserisce true invece di false
  3. var showpostsummary = false; - se oltre al titolo si vuole mostrare anche il sommario del post si mette true invece di false
  4. var numchars = 100;  - sono i numeri di caratteri massimi del titolo. Se si supera il limite si vedrà il link "leggi".
  5. 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.
  6. 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.

ultimi-articoli-etichetta

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.

Qualche giorno fa ho presentato il widget degli ultimi articoli con miniature in senso verticale, qualche giorno prima quello degli articoli recenti con miniature in orizzontale, adesso voglio proporre un'alternativa che è personalizzabile più facilmente e si presta a ulteriori sviluppi come vedremo nel post successivo.

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


<script type="text/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 = 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
  1. 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
  2. showRandomImg = true; se si vogliono mostrare le immagini casuali altrimenti sostituire true con false. Nel caso di blog con immagini in tutti i post.
  3. tablewidth = 280; rappresenta la larghezza del widget
  4. cellspacing = 1;  è la distanza tra le celle della tabella verticale
  5. borderColor = "#ffffff";  è il colore del bordo
  6. bgTD = "#ffffff";  è il colore di sfondo del widget
  7. imgwidth = 120;  è la larghezza della miniatura
  8. imgheight = 120;  è l'altezza della miniatura
  9. fntsize = 12;  è la dimensione dei caratteri del Titolo del post
  10. acolor = "#191919";  è il colore del testo del Titolo del post
  11. aBold = true; significa che il titolo è in grassetto, se non si vuole in grassetto bisogna sostituire true con false
  12. 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
  13. text = "Commenti";  è il testo che sarà visualizzato accanto al numero dei commenti. Se non vogliamo nessun testo basta lasciare text = " "; 
  14. summaryPost = 70;  rappresenta il numero dei caratteri del sommario del post
  15. summaryFontsize = 10;  è la dimensione dei caratteri del sommario
  16. summaryColor = "#242424";  è il colore del testo del Sommario dell'articolo
  17. numposts = 6;  è il numero degli articoli che si vogliono visualizzare nel widget
  18. 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
Dopo aver fatto tutte le modifiche andate su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito, mettete come titolo una cosa tipo "ULTIMI ARTICOLI" o "ARTICOLI RECENTI" e cliccate su Salva.


articoli-recenti


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"

recent-post

Cliccate sul pulsante di ricerca o premete Invio; avrete un solo risultato che sarà mostrato nella finestra successiva

widget

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

 widget

Le personalizzazioni riguardano

  1. Altezza del widget
  2. Numero degli articoli da mostrare
  3. Mostrare o non mostrare le miniature
  4. Mostrare o non mostrare il sommario dei post
  5. Numero di caratteri del sommario
  6. Mostrare o non mostrare la data
  7. Mostrare o non mostrare il numero dei commenti
  8. Mostrare o non mostrare il link read more
  9. 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

picasaphotostream        tweets          recentposts         recentcomments

  1. Picasa PhotoStream – per visualizzare nel blog gli album pubblici caricati su Picasa
  2. Twitter Updates – per mostrare il proprio stato su Twitter
  3. Recent Posts – si vedono gli ultimi articoli
  4. 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

  1. Aggiungi Picasa Photostream -
  2. Aggiungi Twitter Updates -
  3. Aggiungi Recent Posts -
  4. Aggiungi Recent Comments -

Se si clicca per esempio sul primo collegamento si aprirà una finestra di questo tipo

aggiungi-widget

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

picasa-photostream

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

image

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

 

ultimi articoli                     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.

Mi sono già occupato del widget degli ultimi articoli o articoli recenti che dir si voglia. Questa è un’altra opzione di inserimento piuttosto semplice e carina.
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

Scegliete inoltre se inserire o meno anche la data. A fondo pagina sarà presente l’anteprima del widget che avete creato
widgwt
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
 image
Nel caso di Blogger si potrà comunque spostare successivamente con il mouse nella posizione desiderata
image
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.

In un precedente articolo ho presentato un widget che inserisce le miniature degli ultimi post nella sidebar del blog e mette i titoli degli articoli sulla destra delle miniature delle immagini. Le ultime due righe del codice ricordo che erano queste
</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
http://tinyurl.com/ovhkxw
Eventualmente si può intervenire anche sulla dimensione delle immagini mettendo imgwidth = 120 e imgheight = 90. In numposts si deve scegliere il numero che è più adatto al nostro layout.



Se il widget si inserisce in una tabella  il codice cambia un po’. Per farlo si va su Layout > Aggiungi un gadget > HTML/Javascript e si può anche tralasciare di inserire il titolo. In Sezioni del sito si incolla
<table style="background-color: #ffffff;">
<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
Per vedere come è il risultato in questo caso date uno sguardo al mio blog cavia Photosvideosandmore.
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.

In questo blog ho già parlato di come aggiungere il widget degli articoli recenti e l’ho pure inserito nella sidebar di destra.
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
widget_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
  1. 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
  2. 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
  3. Il numero di post recenti da visualizzare l’ho inserito uguale a cinque e ovviamente si può cambiare numero a seconda delle esigenze
  4. Lo script del widget si trova a questo indirizzo e se volete potete copiarlo e hostarlo su un vostro account
  5. Al posto di miosito.blogspot.com inserite l’indirizzo del vostro blog. Mi raccomando di mantenere la slash (/) finale
  6. 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
  7. 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 – PhotosvideosandmoreIn 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.