Pubblicato il 12/06/12e aggiornato il

Come creare un Ticker di notizie scorrevoli su Blogger.

Widget scorrevole per inserire notizie con Titolo, testo e link completamente personalizzabile.

Vi ricorderete certamente quando Facebook introdusse il Ticker scorrevole per visualizzare in tempo reale tutta l'attività degli amici. Per la piattaforma Blogger sono già disponibili dei widget scorrevoli verticali e orizzontali che mostrano gli ultimi post. Con questo articolo voglio introdurre una nuova opzione che permette di visualizzare appunto in un ticker scorrevole le ultime notizie che volete inserirvi. Ciascun elemento sarà composto da un titolo, un testo e un link con colori e sfondo completamente personalizzabili.

Ciascuna notizia resterà immobile per qualche attimo prima che venga mostrata la successiva. Se si passa con il mouse sopra al box, se ne blocca lo scorrimento e se ne può aprire il link

demo-ticker

E' anche possibile personalizzare le dimensioni in modo da poterlo inserire in una sidebar, nel footer o sotto l'header del blog.

ticker-per-blogger

L'installazione è semplicissima perché non è necessario modificare il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice seguente in Sezioni del sito

<style type="text/css">
#pscroller1{
width: 240px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color:#FFFFDF;
}
#pscroller2{
width: 300px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.titoli{
font-size: 22px;
font-style: oblique;
color:#003366;
}
.testo {
font-size: 13px;
color:#940F04;
}
.someclass { //class to apply to your scroller(s) if desired
}
</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 clicca su Salva e si posiziona con il mouse. Opzionalmente si può digitare anche un titolo per il widget. Le personalizzazioni sono numerose e riguardano le dimensioni del Ticker in larghezza e altezza. Se in pscroller1 inserite una altezza inferiore a 25px, il Ticker assumerà un aspetto di una sola riga.

Si possono anche personalizzare i colori del titolo (#003366) e del testo della notizia (#940F04) oltre al colore e allo stile del bordo. Il backround del box è dato dal codice #FFFFDF. Ho aggiunto le classi .titoli e .testo ma se ne possono dichiarare anche altre (vedi appunto .someclass ).

Ho inserito quattro notizie di esempio ma, usando la stessa sintassi, se ne possono aggiungere quante e vuole ricordandosi di inserire il numero naturale successivo. Ciascuno dei blocchi di codice

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

può essere personalizzato inserendo titolo, testo e anchor text del collegamento. Al posto del cancelletto (#) può essere incollato l'URL di una pagina. Con questo sistema si possono mettere in evidenza dei post del blog che riteniamo particolarmente interessanti e che crediamo possano interessare il lettore. Concludo ricordando che 3000 sono i millisecondi che ciascuna notizia rimane visibile prima di far posto all'altra. Tale valore può essere modificato secondo i nostri gusti.

Fonte | Pausing up-down Scroller





21 commenti :

  1. ciao Ernesto ho da chiederti una cortesia, mi sto scervellando su una cosa che sembrerebbe una cavolata ma di cui nn riesco a venirne a capo.. come si può manualmente, intervenendo nell'html, modificare width ed eight dell'immagine dell'header? grazie come sempre

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      La devi scaricare, ridimensionare e ricaricare. Se poi la vuoi ricentrare leggiti questo post
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html

      Elimina
  2. Risposte
    1. @MarcoParrilla
      Non è che non funzionasse, mi ero dimenticato di inserirlo :)

      Elimina
    2. cioè non appariva scusami nella pagina demo...appunto xke nn c'era :D...buona giornata

      Elimina
  3. Ciao Ernesto, non appena modifico Titolo e descrizione sparisce dal blog.

    RispondiElimina
  4. @graziano
    Forse perché nel titolo o nella descrizione metti degli apostrofi.

    RispondiElimina
    Risposte
    1. Grazie dell'indicazione,era proprio quello il problema.

      Elimina
    2. ...non accetta anche l'apostrofo. Bellissimo, comunque. Già installato!

      Elimina
  5. Ciao, grazie per questo gadget.
    Vorrei sapere come inserire un'immagine di sfondo nel ticker perchè non so come fare...
    Ho provato con " background: <img src='URL immagine' " e simili ma non ha funzionato.
    Grazie!

    RispondiElimina
  6. Ah, ho notato anche che quando lo inserisco la sidebar si allarga...Lo tolgo e ritorna tutto normale! :(

    RispondiElimina
  7. @MariaFelicia99
    Se il widget non entra bene nella sidebar prova a modificare le dimensioni per esempio width:220; e width:280 al posto di 240 e 300.
    Per quello che riguarda una immagine di sfondo, prova a sostituire la riga
    background-color:#FFFFDF;
    con
    background-image:url(Indirizzo Immagine);
    se la vuoi inserire che si ripeta come una trama

    oppure con
    background-image:url(Indirizzo Immagine);
    background-repeat:no-repeat;
    se non vuoi che si ripeta

    RispondiElimina
  8. Grazie!
    Ora è tutto risolto, solo che non so cosa sia successo con la sidebar, perchè lo sfondo della sidebar in cui c'era il ticker era nei margini, poi tutti gli altri gadget si ingrandivano senza motivo. Boh!

    RispondiElimina
  9. @Domenico....
    Il codice di esempio si vede? Se la risposta e' sì allora vuol dire che hai scritto delle frasi con degli apostrofi

    RispondiElimina
    Risposte
    1. ho scoperto il problema...testo di descrizione troppo lungo

      Elimina
  10. Ciao Ernesto,
    bellissimo questo widget, perchè a differenza di una normale textarea permette anche di cliccare sui link delle notizie!
    Solo una domanda: non riesco a capire a cosa si riferisce la voce #pscroller2{ perchè anche provando a modificarne i parametri non succede nulla

    Grazie ^^

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      E' il contenitore esterno con il bordo. Puoi modificare lo stile del bordo come il colore, lo spessore e renderlo tratteggiato (dashed) o punteggiato (dotted) invece che solid

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
  11. Ciao Ernesto.
    Complimenti per questo utilissimo widget, versatile e ben funzionante.
    Personalmente preferirei rendere visibili 6-8 anteprime contemporaneamente, sempre con scorrimento singolo dell'anteprima, come sovente troviamo nei giornali online.
    Puoi suggerire come modificare?
    Grazie.

    RispondiElimina
    Risposte
    1. Io mi sono fermato qui. Non so se altri miglioreranno questo widget o se lo abbiano già fatto senza che lo sappia
      @#

      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.