Slideshow degli Ultimi Articoli per Blogger con Easy Slider.

Vado a presentare un interessantissimo widget per Blogger di grande impatto grafico basato su librerie JQuery. Si tratta del celebre effetto Easy Slider, adattato a Blogger, e che mostra lo slideshow delle immagini estratte dagli Ultimi Post con relativo link. In una area della immagine con background scuro è visibile anche il titolo dell'articolo e il suo incipit. Lo scorrimento è automatico ma si arresta dopo un certo periodo di tempo che la pagina è stata aperta. Si può continuare a scorrere gli ultimi post pubblicati attraverso degli strumenti di navigazione. Ho pubblicato questa

• Demo degli Articoli Recenti con Easy Slider -

Il widget può essere inserito in una sidebar, sopra all'area del post o nel footer. Se si installa nell'header, in alcuni modelli non saranno visibili i titoli dei post ma solo il loro inizio. Il widget è funzionante con Firefox e con Chrome mentre ha delle difficoltà con Internet Explorer ma solo con alcuni modelli.

 

Passiamo alla installazione. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga ]]></b:skin> e, immediatamente sopra, si incolla questo codice

• Stile per Easy Slider -

Poi si cerca la riga </body> e, subito sopra, si incolla quest'altro codice

<!-- EASY SLIDER INIZIO -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<noscript><a href='http://goo.gl/Zpo8Z' target='_blank'><span style='font-size: x-small;'>Easy Slider</span></a></noscript>
<!-- EASY SLIDER FINE -->

Si salva il modello. Si va su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si inserisce questo ultimo codice

<div id="slider">
<script style="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/EasySlider-script.js"></script>
<script style="text/javascript">
var numposts_gal = 10;
var numchars_gal = 150;
var random_posts = false;
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=9999"></script>
</div>

Si salva l'elemento e si posiziona con il mouse. Si inserisce l'URL del blog di cui vogliamo visualizzare gli articoli più recenti e il loro numero (10). Se in un post non ci sono foto si vedrà questa immagine

Oggettivamente è piuttosto scarsa esteticamente ma sto andando di fretta. Chi ci sa fare con la grafica può scaricarsi il file

https://sites.google.com/site/scriptperilblog/widget-1/EasySlider-script.js

e sostituire questa immagine, il cui URL si può ricavare cliccandoci sopra, con un'altra. Osservazioni conclusive. Se ci sono dei problemi con Internet Explorer si può provare a caricare i javascript, che in questo momento sono su Google Sites, cioè il precedente e quest'altro

https://sites.google.com/site/scriptperilblog/widget-1/EasySlider.js

su DropBox per vedere se si riesce a risolvere il problema. Io non posso caricare gli script su DropBox perché altrimenti esaurirei la banda visto che sono in molti che usano i miei widget e per questo ringrazio. Se non vi piace il background scuro, in cui vengono visualizzati i titoli dei post e il loro riassunto, modificate questa immagine di sfondo

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAywhiBnxUXRpLB_rT9ic8qntYSSOtiVnc8Xzo0TBRmr_-5BZXqCKXW92QxnBTlNgtN_8tX5JLqLb0BtVIz1j1jiMQTrLejPGlnLRLpi9fuG-uefG6-HuoCrjVR3jluiJNBiBEJm-DrI/

con un'altra più adatta ai colori del vostro blog ma sempre trasparente in formato PNG. Si può provare anche a modificare le dimensioni del widget stando attenti a farle rimanere coerenti tra di loro. Nel CSS ho colorato di rosso i parametri più facilmente modificabili.