Come mostrare in Blogger una barra flottante con gli ultimi post o commenti scorrevoli.

Come inserire in un modello di Blogger o in un gadget HTML/Javascript un widget che mostra in modo flottante i titoli degli ultimi post o l'incipit degli ultimi commenti.

Mi ricordo di aver illustrato qualche mese fa la procedura per installare gli Ultimi Articoli e gli Ultimi Commenti scorrevoli in una barra orizzontale. Vediamo adesso come fare un ulteriore passo e mostrare questo widget in modo flottante tanto da lasciarlo visibile anche quando si scorre la pagina verso il basso. Inoltre sarà inserita una icona di chiusura per dare la possibilità al lettore di nasconderlo nel caso gli desse fastidio.

Il widget può essere installato nel modello scegliendo il punto di visualizzazione o attraverso un gadget HTML/Javascript per posizionarlo nel Layout compresa la sidebar. È inoltre possibile configurare il numero dei post visualizzati, la velocità dello scorrimento e anche il verso di quest'ultimo.

Mostrerò solo come inserire il widget nel modello visto che per utilizzare un gadget basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il codice in Sezioni del sito.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga

<div class='region-inner header-inner'>

e, subito sopra o subito sotto, si incolla questo codice

<!-- Widget barra flottante Inizio -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/><script src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/stickybar.js' style=''/>
<script src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/stickybar2.js'/>
<style>
#md-stickybar{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvzzm4ZE_eSTTHI083BuY2SNRpNay5uVYUbETWGiP4F2T-j42QnLLGXzC8qhV-nTXdPkvrYWJjxYP5O7Yf0CvDtSqfWgey5fEB0Qf1JScAlPIDyPw9QhUwJUbCGEzDrsGWFA40kwn0Bc/w1-h30-no/bkgr-stickybar.png) repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;top:0px;
color:#F40045;
border-bottom:2px solid #000;
-webkit-box-shadow:#666 0px 1px 3px;  /* Ombreggiatura */
-moz-box-shadow:#666 0px 1px 3px;
box-shadow:#666 0px 1px 3px;
z-index:999;
display:none;
height:28px;
position:absolute;
line-height:1.85em;
vertical-align:baseline;
letter-spacing:1px;
}
#md-stickybar a{
text-decoration:none;
color:#FFF;
font-size:13px;
font-weight:bold;
font-family:Georgia;
line-height:24px;
}
#md-stickybar a:hover{
text-decoration:underline;
}
#md-stickybar p{
margin:0;
list-style:none;
}
#md-stickybar img{
vertical-align:middle;
margin-right:6px;
}
#mdclose{
padding:0px;
float:right;
cursor:hand;
cursor:pointer;
color:#ddd !important;
}
</style>
<div id='md-stickybar'><script>
var nMaxPosts = 12;
var nWidth = 95;
var nScrollDelay = 175;
var sDirection = &quot;left&quot;;
var sOpenLinkLocation = &quot;N&quot;;
var sBulletChar = &quot;&gt;&gt;&quot;;
</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=12' style=''/><a href='#' id='mdclose' onclick='return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSmxgoC8c2Z_akxDRayUMHbipp49hEhQ2DN-r7HJ4NvM6RsCAsDWT1ZnBi0iInl4fUO_81zVX9eEgd-8usTHlbQRedy72kVn8UGHmcc0FDkRLA7FlLapwNeaoo6Dc871F8scV75mmqDw/w17-h16-no/close.png'/></a></div>
<!-- Widget barra flottante fine -->

Si salva il modello. I parametri più importanti da modificare sono stati colorati di rosso e riguardano i codici dei colori e lo stile dei bordi oltre a aspetti più specifici che elenco brevemente

1. Il numero dei post da visualizzare (sono proposti 12 in due occorrenze)
2. L'intervallo dello slide (175). Aumentando il numero si rallenta la velocità
3. La direzione (left) che può essere sostituita da right
4. I simboli che precedono i titoli >> che parsati diventano &gt;&gt;
5. L'URL del sito da sostituire a quello di questo blog. Ricordarsi di usare il canonico .com al posto del locale .it quando si sostituisce l'URL dei feed.

Si può usare un altro URL di feed come quello dei commenti. Inserendo per esempio questo URL

http://www.ideepercomputeredinternet.com/feeds/comments/default

al posto di quello colorato di viola si visualizzerà una barra orizzontale con gli ultimi commenti scorrevoli

In entrambi i casi dei titoli e dei commenti quando si punta con il mouse un elemento oltre a fermarsi lo scorrimento si visualizza una sottolineatura dello stesso dovuta a text-decoration:underline;. La larghezza del widget è configurata al 100% e quindi si adatterà a quella del blog o a quella della sidebar. Se si opta per l'inserimento nel modello si può scegliere un'altra posizione al posto di quella proposta.

Aggiornamento: Vista la difficoltà di installare il widget in una sidebar conviene spezzarlo in due tronconi in questo modo. Si va su Modello > Modifica HTML e si cerca </head>. Subito sopra a questa riga  si incolla

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/><script src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/stickybar.js' style=''/>

<script src='//googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/stickybar2.js'/>

<style>#md-stickybar{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvzzm4ZE_eSTTHI083BuY2SNRpNay5uVYUbETWGiP4F2T-j42QnLLGXzC8qhV-nTXdPkvrYWJjxYP5O7Yf0CvDtSqfWgey5fEB0Qf1JScAlPIDyPw9QhUwJUbCGEzDrsGWFA40kwn0Bc/w1-h30-no/bkgr-stickybar.png) repeat-x; width:100%; margin:0 auto; text-align:center; padding:0px 0;top:0px; color:#F40045; border-bottom:2px solid #000; -webkit-box-shadow:#666 0px 1px 3px; /* Ombreggiatura */-moz-box-shadow:#666 0px 1px 3px; box-shadow:#666 0px 1px 3px; z-index:999; display:none; height:28px; position:absolute; line-height:1.85em; vertical-align:baseline; letter-spacing:1px; } #md-stickybar a{ text-decoration:none; color:#FFF; font-size:13px; font-weight:bold; font-family:Georgia; line-height:24px; } #md-stickybar a:hover{ text-decoration:underline; } #md-stickybar p{ margin:0; list-style:none; } #md-stickybar img{ vertical-align:middle; margin-right:6px; } #mdclose{ padding:0px; float:right; cursor:hand; cursor:pointer; color:#ddd !important; }  </style> <script> var nMaxPosts = 6; var nWidth = 95; var nScrollDelay = 175; var sDirection = &quot;left&quot;; var sOpenLinkLocation = &quot;N&quot;; var sBulletChar = &quot;&gt;&gt;&quot;; </script>

Si salva il modello. Poi si va su Layout > Aggiungi un gadget > HTML/Javaxscript e in Sezioni del sito si incolla questo secondo codice

<div id='md-stickybar'> <script src='http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=6' style=''/><a href='#' id='mdclose' onclick='return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSmxgoC8c2Z_akxDRayUMHbipp49hEhQ2DN-r7HJ4NvM6RsCAsDWT1ZnBi0iInl4fUO_81zVX9eEgd-8usTHlbQRedy72kVn8UGHmcc0FDkRLA7FlLapwNeaoo6Dc871F8scV75mmqDw/w17-h16-no/close.png'/></a></div>

Si salva e si posiziona a piacere. Le personalizzazioni da compiere sono le stesse. Nel caso di una sidebar particolarmente stretta conviene diminuire il numero di post mostrati (6 nel codice proposto). Per verificare che il codice funzioni incollatelo così com'è per poi modificarlo in un secondo tempo.