Blogger Book

Un ticker è come una barra delle notizie in cui i titoli scorrono in un marquee. Il suo scopo principale è mostrare ai lettori i post più importanti, anche se nel nostro caso lo useremo per visualizzare automaticamente gli ultimi post del blog, così non dovremo aggiungere continuamente voci o modificare nulla. Creeremo 

il nostro ticker di notizie con jQuery, e so che qualcuno potrebbe dire : "Ma come, possiamo farlo con il tag MARQUEE! "

Ticker automatico per gli ultimi post del blog.

Possiamo certamente farlo con MARQUEE, ma quell'elemento non è uno standard e il suo scorrimento è solitamente molto approssimativo, il che rende spesso il testo difficile da leggere. 

Potremmo farlo anche con animazioni CSS, ma non funzionerebbe nei browser più vecchi, quindi useremo jQuery per creare l'effetto marquee. Potremo anche scegliere la velocità e la direzione di scorrimento.

Usando jQuery per creare l'effetto marquee.

E poiché l'abbiamo reso automatico in modo che non dobbiate faticare con le modifiche, lo faremo anche in un unico passaggio, quindi installarlo sarà solo questione di copia e incolla. Per farlo, copiate il codice seguente, andate su Design | Aggiungi un gadget | HTML/Javascript e incollatelo lì.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Colore di sfondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
posizione:assoluta;
}
#titoli .freccia_destra {
padding:0 38px 0 110px;
display:blocco;
sfondo:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m-Q6Cjy6f2Jgo8e2IfFCNjPcpZXopSas5F6WoII 1SrooCIXTLbcWOL5HqNAPYL0iqA7tIRZLMZcYL6knvF77v_bY1EuJiJAz5UvdXDNBR13ysrF4QstlouTxzTe3SaQxiNKayfNyZBhg/s41/arrow.png) no-repeat destra centro;
altezza:46px;
altezza riga:46px;
posizione:assoluta;
sinistra:0;
alto:0;
}
#ticker_post {
posizione:relativa;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Larghezza dell'area in cui vengono visualizzate le voci */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Dimensione del testo */
color: #FFF; /* Colore del testo */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Colore del separatore delle voci */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Ultime notizie</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http:// nome-del-mio-blog .blogspot.com";
var number_post = 10; // Numero di post da visualizzare
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Direzione del cursore, usa sinistra o destra
duration: 25000, // Velocità
pauseOnHover: true,
duplicated: true
});
});
</script>

Come personalizzare il widget.

Non dimenticare che il ticker mostra gli ultimi post del blog indipendentemente dal tag. Se vuoi che mostri gli ultimi post di un tag specifico, devi modificare il file ticker.js e aggiungere ciò che è mostrato in rosso:

var voci;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feed/posts/default /-/Nome-Tag ";

Dove sta meglio? Dipende dal gusto personale e dal design di ciascun template. I ticker delle notizie sono solitamente posizionati sopra o sotto l'intestazione, o sopra i post, ma come ho detto, dipende dal gusto personale.

Scarica i file