Pubblicato il 29/01/15 - aggiornato il  | 4 commenti :

Creare uno slideshow di notizie, avvisi, post o link per Blogger.

Come creare uno slideshow testuale di avvisi con link a pagine web da inserire in una sidebar o nel footer di Blogger.
Si sa che una delle problematiche più importanti da affrontare quando si gestisce un blog è quella della ottimizzazione dello spazio. Il layout spesso non consente di inserire troppi contenuti visto che alcuni widget come quello degli Ultimi Post e degli Ultimi Commenti e alcuni gadget dei social network sono imprescindibili.

Quando si voglia mostrare ai lettori una serie di avvisi, dei link a blog amici, una serie di eventi che il sito vuole pubblicizzare o comunque un testo che abbia un collegamento a una pagina esplicativa si può creare uno slideshow di contenuti solo testuali che potrebbe venire incontro a queste esigenze. Si tratta di un javascript quindi ricordo che nel testo non si possono inserire apostrofi e virgolette ed è inoltre sconsigliabile usare caratteri accentati o simboli strani.

slideshow-testo-link

Questi avvisi scorrevoli possono essere inseriti in una sidebar o nel footer di un blog su Blogger. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla

<style type="text/css">
#pscroller1{
width: 240px; /* Larghezza */
height: 100px; /* Altezza */
border: 1px solid #000; /* Bordo */
padding: 5px;
background-color:#FFFFDF;
}
#pscroller2{
width: 300px;
height: 20px;
border: 1px solid #000;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.titoli{
font-size: 22px;
font-style: oblique;
color:#036; /* Colore titolo */
}
.testo {
font-size: 13px;
color:#940F04; /* Colore testo */
}
.someclass { //classe eventuale per ulteriori personalizzazioni
}
</style>
<script type="text/javascript">
var pausecontent=new Array()
pausecontent[0]='<div class="titoli">Notizia 1: </div><div class="testo">Testo della prima notizia... </div><div align="right"><a href="#">Leggi tutto</a></div>'
pausecontent[1]='<div class="titoli">Notizia 2: </div><div class="testo">Testo della seconda notizia ... </div><div align="right"><a href="#">Leggi tutto</a></div> '
pausecontent[2]='<div class="titoli">Notizia 3: </div><div class="testo">Testo della terza notizia ... </div><div align="right"><a href="#">Leggi tutto</a></div> '
pausecontent[3]='<div class="titoli">Notizia 4: </div><div class="testo">Testo della quarta notizia ... </div><div align="right"><a href="#"> Leggi tutto</a></div> '
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
<script type="text/javascript">
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 3000)
</script>

Si salva e si posiziona l'elemento pagina. Le personalizzazioni più importanti riguardano i codici dei colori e le dimensioni dei caratteri di titoli e testo. Per rendere più semplice la realizzazione dello slideshow ho inserito quattro notizie con questa struttura 

pausecontent[0]='<div class="titoli">Notizia 1: </div><div class="testo">Testo della prima notizia... </div><div align="right"><a href="URL_COLLEGAMENTO">Leggi tutto</a></div>'

Questi avvisi ricordo che non possono avere apostrofi o altri caratteri strani. Invece che quattro se ne possono mettere di meno o anche di più mantenendo la stessa sintassi. La parte colorata di blu può essere naturalmente personalizzata a piacere. Al posto di URL_COLLEGAMENTO si mette l'indirizzo del post, della pagina web o del blog amico a cui si riferisce il testo.


 
Le notizie rimarranno visibili per 3000 millisecondi (3 secondi) e questa durata può essere modificata a seconda delle esigenze e della lunghezza delle stesse. Concludo ricordando che quando si passa con il cursore sopra a una notizia lo slideshow smette di animarsi.




4 commenti :

  1. Si può mettere un'immagine che occupi l'intero riquadro al posto del testo (e che quando ci si clicca sopra reindirizzi ad un determinato link? Non come sfondo perché ho già provato e non scorrendo non è quello che ho in mente di fare.
    Per quanto riguarda le dimensioni poi mi gestisco, quello che vorrei è solo che l'immagine occupi l'intero riquadro e stia al posto del testo (titolo, testo e link).
    Grazie

    RispondiElimina
    Risposte
    1. Sì si può fare anche se bisognerebbe trovare un modo per mostrare il testo sopra alla immagine. Si può risolvere creando le immagini con il testo incorporato. Per mostrare una immagine basta sostituire
      Notizia 1:
      con
      <a href="#"><img src="URL_IMMAGINE1"/></a>

      Notizia 2:
      con
      <a href="#"><img src="URL_IMMAGINE2"/></a>
      ecc

      @#

      Elimina
    2. Perfetto grazie!
      Io ho ingrandito il riquadro e la velocità dello scrolling è sempre la stessa. Si può fare in modo che l'animazione duri meno?
      Poi, ultima cosa, si può fare in modo che lo scorrimento delle notizie avvenga da destra a sinistra anziché dal basso verso l'alto?

      Elimina
    3. Metti
      {scrollerinstance.animateup()}, 100)
      e
      {scrollerinstance.setmessage()}, 200)
      per uno scroll più lento.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.