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

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

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 -