Pubblicato il 23/08/12 - aggiornato il  | 22 commenti :

Slideshow verticale degli ultimi articoli con miniatura

Il widget dello slideshow verticale che mostra gli Ultimi post insieme alle miniature della prima immagine che vi è stata pubblicata.
Questo bel widget per Blogger si deve al blog malese Tutorial Untuk Blog. Si tratta di uno slideshow verticale che mostra gli ultimi articoli corredati da miniature. Se non sono presenti immagini da cui ricavarle ne verrà mostrata una di default.

Ho apportato qualche modifica al codice originale e poi ho caricato lo script su un mio spazio. Per l'installazione non occorre modificare il modello ma basta utilizzare un semplice elemento pagina.

   

Andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito questo codice

<style type="text/css">
#verticalslide{height:452px;}
#verticalslide li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#verticalslide a{color:#00000;}
#verticalslide .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#verticalslide img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('K 11(u){6.4(\'<e l="h">\');G(7 i=0;i<12;i++){7 3=u.N.3[i];7 E=3.J.$t;7 x;8(i==u.N.3.w)I;G(7 k=0;k<3.p.w;k++){8(3.p[k].10==\'Y\'){x=3.p[k].q;I}}7 9;Z{9=3.16$17.15}13(14){s=3.o.$t;a=s.v("<B");b=s.v("A=\\"",a);c=s.v("\\"",b+5);d=s.X(b+5,c-b-5);8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){9=d}f 9=\'F://V.T.D/U/W/R/Q/d/1o.1n\'}6.4(\'<j l="n-J 1k">\');6.4(\'<a q="F://1l-1m.1p.D/" z="1j"><B A="\'+9+\'"/></a>\');6.4(\'<a q="\'+x+\'" z ="1b">\'+E+\'</a><1c>\');8("o"C 3){7 2=3.o.$t}f 8("y"C 3){7 2=3.y.$t}f 7 2="";7 M=/<\\S[^>]*>/g;2=2.1a(M,"");8(2.w<O){6.4(\'<m l="n-P">\');6.4(2);6.4(\'</m>\')}f{6.4(\'<m l="n-P">\');2=2.H(0,O);7 L=2.18(" ");2=2.H(0,L);6.4(2+\'...\');6.4(\'</m>\')}6.4(\'</j>\')}6.4(\'</e>\')}K 19(){r=$(\'e#h j:r\').1d().1h();$(\'e#h\').1i(r);$(\'e#h j:1g\').1e("1f")}',62,88,'||postcontent|entry|write||document|var|if|thumburl|||||ul|else||verticalslide||li||class|span|news|content|link|href|last|||json|indexOf|length|posturl|summary|target|src|img|in|com|posttitle|http|for|substring|break|title|function|quoteEnd|re|feed|numchars|text|hLjqmEbdtkw|AAAAAAAADMA||ggpht|_xcD4JK_dIjU|lh3|SnamIh0KTCI|substr|alternate|try|rel|rpthumbnt|numposts|catch|error|url|media|thumbnail|lastIndexOf|rpnewsticker|replace|_top|br|hide|slideDown|slow|first|remove|prepend|_blank|clearfix|tutorial|gif|noimagethumb|blogspot'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="verticalslide">
<script style="text/javascript">
var numposts = 6;
var numchars = 0;
</script>
<script src="https://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Cliccare su Salva e posizionare il widget mediante il trascinamento del mouse. L'altezza del widget è stata calcolata in 452 pixel se si vogliono mostrare gli ultimi 6 articoli. Nel caso volessimo modificare tale numero occorre cambiare anche tale parametro. E' possibile operare delle configurazioni sui codici dei colori, sulle dimensioni dei caratteri, sui colori e stili dei bordi,  sulla velocità di scorrimento (var speed) e sulla durata della pausa (var pause). E' essenziale sostituire l'URL di questo blog colorato di viola con quello del vostro sito. Ecco come si presenta il widget

slideshow-verticale

I colori dei link dei titoli saranno quelli ereditati dal blog. Se avete un dominio personalizzato scaricate il javascript colorato di blu e caricatelo su Dropbox o su un vostro spazio personale. Sono sicuro che questo gadget dello slideshow verticale degli ultimi post incontrerà parecchi estimatori.

AGGIORNAMENTO:Il codice che prima era stato caricato su Google Sites adesso è stato aggiunto nativamente senza bisogno di caricarlo da siti esterni


22 commenti :

  1. Ciao Ernesto, grazie per questo slideshow, molto carino.
    L'ho messo in questo blog: http://lecreazionidiveggie.blogspot.it/ ed è venuto molto carino. L'unica cosa che non mi piace è che appena si entra nella pagina i riquadri scorrono di dimensioni maggiori della sidebar.
    Volevo chiedere 2 cose, la prima è se è possibile modificare la larghezza dei riquadri in maniera che siano leggermente più piccoli della sidebar, la seconda invece è che nel mio sito principale non sono riuscita a mettere il widget, secondo te è possibile che sia in conflitto con l'altro?
    Pensi che prima di installarlo devo rimuovere l'altro?
    Ti metto il link del blog: http://www.lareginadelsapone.com/
    Grazie (anche della pazienza)
    Veggie

    RispondiElimina
  2. ho provato ad inserire il tuo codice come indicato nella guida ma non mi funziona, ovvero riesco a vedere lo spazio nella colonna ma non vedo le finestre che roteano....

    RispondiElimina
    Risposte
    1. Hai tolto l'indirizzo di Ernesto dal codice e hai messo il tuo?
      Scusa può sembrare una cosa scontata ma alle volte ci si può dimenticare!

      Elimina
  3. Io ho seguito la tua guida cambiando l'url ma mi da l'effetto ma il titolo del post esce fuori dal rettangolino della miniatura e se clicco sulla miniatura mi da errore dove ho sbagliato?

    RispondiElimina
  4. Ma se non si volesse l'immagine ma solo il testo potrebbe essere possibile?

    RispondiElimina
  5. @ Veggie
    @ Benzene
    @FabrizioPinzaglia
    Darò una risposta cumulativa che spero sia esauriente.
    1)Quando si utilizzano due widget con JSON con lo stesso indirizzo può essere che diventino incompatibili. Si può provare a togliere uno per poi reinstallarlo (Veggie)
    2)Quando si installano widget di questo tipo la cosa migliore è copiare esattamente tutto il codice così com'è per vedere se è compatibile con il modello e successivamente provare a inserire i nostri dati (Link e non solo). Se si vede tutto bianco è nel 99% dei casi perché non si è stati troppo attenti a sostituire i parametri
    3)Si può provare a togliere le miniature. Però non ho testato (Benzene). Al posto di
    width:55px;height:55px;

    prova a mettere
    width:0px;height:0px;
    4)Per modificare la larghezza è un problema visto che prende tutto lo spazio (Veggie). Prova a modificare la seconda riga in questo modo
    #verticalslide{height:452px; width:250px !important;}
    ma non so se funzionerà

    RispondiElimina
    Risposte
    1. Grazie Ernesto, oggi farò queste prove (in particolare la prima) perché vorrei inserirlo sul blog principale.
      A presto
      Veggie

      Elimina
    2. Grazie. Vedo cosa riesco a combinare senza incasinare il tutto :-)

      Elimina
  6. Niente da fare.. purtroppo temo che ci sia un'incompatibilità con il mio vecchio template.
    In un blog (template recente) funziona, mentre nell'altro si vede solo lo spazio bianco e il link sottostante Install this widget.
    Ho rimosso completamente l'altro widget prima di inserire questo, ma proprio non gli piace sob sob..
    Veggie

    RispondiElimina
  7. ciao!
    carinissimo, appena inserito :))
    grazie!

    RispondiElimina
  8. Bellino, mi piacerebbe farlo funzionare per una sola etichetta.
    Ho provato a modificare http://nomeblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt aggiungendo /-/etichetta dopo default ma non mi funziona più.
    Sai dirmi se è possibile farlo e come modificarlo?
    Grazie

    RispondiElimina
    Risposte
    1. @MarcoRinaldi
      Al posto di http://nomeblog.blogspot.com/feeds/posts/default?orderby...
      devi mettere
      http://nomeblog.blogspot.com/feeds/posts/default/-/etichetta?orderby...
      se non funziona significa che hai un altro widget che utilizza lo stesso URL dei feed

      Elimina
  9. Carinissimo l'ho appena inserito. Grazie!
    http://uncinettinastyle.blogspot.it/

    RispondiElimina
  10. se lascio la tua url vedo il widget con il mio non funziona

    RispondiElimina
    Risposte
    1. Hai un blog gratuito del tipo Blogspot? Se è così metti il .com al posto del .it nell'indirizzo in questo modo
      http://nomeblog.blogspot.com/feeds/posts/default?orderby...
      Se continua a non funzionare è probabile che tu abbia un aotro widget che mostra gli ultimi post e che usa lo stesso feed. In questo caso togli quel widget, installa questo e poi reinstalla quello tolto
      @#

      Elimina
  11. No continua a non funzionare e non mi funziona neanche la pagina "mappa del blog". Mi funziona con la tua url o con quelle di altri per cui sembrerebbe un problema con la mia url

    RispondiElimina
  12. Ciao Ernesto da ieri sera è sparito questo gadget dal mio blog:ti risulta essere una cosa momentanea?Mi era utie

    RispondiElimina
    Risposte
    1. È stata colpa mia che ho aggiornato Google Sites alla nuova versione che non supporta più lo schedario. Vedrò di risolvere in qualche modo. Mi spiace 😒
      @#

      Elimina
    2. Nessun problema...Allora aspetto e non lo tolgo

      Elimina
    3. Ho aggiornato il codice. Adesso dovrebbe funzionare. Basterà cambiare l'URL colorato di blu
      @#

      Elimina
    4. caricato su drive e messo nel template ma il gadget non lo vedo

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy