Modulo per iscriversi alla newsletter nell'header di Blogger.

Come installare un link che mostrerà il modulo per iscriversi alla newsletter nella parte alta dei blog di Blogger.

Qualche anno fa avevo presentato un widget molto interessante che inseriva un link nella parte alta del sito su cui poteva cliccare il lettore per poi compilare il modulo di iscrizione alla newsletter creata tramite Feedburner. Un lettore mi ha fatto presente che il link era però scarsamente visibile e quindi poco utile ai lettori. Mi si chiedeva se fosse possibile sostituirlo con una immagine.

Questa personalizzazione avrebbe richiesto però una radicale modifica dello script. Ho quindi optato per rendere più evidente il link di iscrizione alla newsletter che potrà essere sempre modificato nei colori e nel testo. Per essere più chiari con questo widget verrà nascosta la Navbar presente nella parte alta dei blog di Blogger se il vostro modello non preveda già che venga nascosta. Il lettore vedrà una scritta del tipo "Fai click per avere aggiornamenti via email" che aprirà una barra orizzontale con il modulo di iscrizione alla newsletter. È chiaro che questo gadget funzionerà solo se avete già configurato Feedburner e avete già creato la newsletter per questo servizio. Se non lo avete ancora fatto seguite le istruzioni dei due post linkati ad inizio articolo.

Il lettore potrà digitare l'indirizzo di posta elettronica in cui ricevere i prossimi articoli. Dopo essere andato su Invia visualizzerà un'altra finestra in cui confermare la volontà di ricevere la newsletter inserendo anche la captcha di un controllo visivo. Per l'attivazione definitiva il lettore dovrà cliccare sul link di verifica che gli verrà recapitato all'indirizzo di posta digitato.

Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript, si può lasciare in bianco il titolo e, in Sezioni del sito, si incolla il codice seguente

<style type='text/css'> /*<![CDATA[*/ #navbar-iframe { display: none !important; } #slider{ z-index:9999; position:fixed;    top:-127px;    right:0px;    height:130px; width:100%;    background-color:#fff;    opacity:0.95;    -moz-box-shadow:    0px 0px 8px #ccc;    -webkit-box-shadow: 0px 0px 8px #ccc;    box-shadow:         0px 0px 8px #ccc;   }   .IPCEI_footer{margin-top:-10px;font-size:1.1em;} #slider #slider-shell{width:800px; height:120px;margin:10px auto;    position:relative;}   #slider #slider-tab{position:absolute; bottom:0px; right:0px;    width:400px; text-align:right; padding-right:10px;    cursor:pointer; font-size:1.6em; color:#f00 !important; font-weight:bold;} #IPCEI_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#IPCEI_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#IPCEI_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#IPCEI_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#IPCEI_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#IPCEI_embed_signup input[type=radio]{-webkit-appearance:radio;}#IPCEI_embed_signup input:focus {border-color:#191919;}#IPCEI_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#IPCEI_embed_signup .button:hover {background-color:#191919;}#IPCEI_embed_signup .small-meta {font-size: 11px;}#IPCEI_embed_signup .nowrap {white-space:nowrap;}     #IPCEI_embed_signup .clear {clear:none; display:inline;}#IPCEI_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#IPCEI_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:10px; width:58%; min-width:130px;}#IPCEI_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; }  /*]]>*/
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='IPCEI_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN' id='subscription-email-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><label for='IPCEI-EMAIL'>Per avere il prossimo articolo via email</label><input class='email' id='IPCEI-EMAIL' name='email' placeholder='Digita il tuo Indirizzo Email' required='required' type='email' /><div class='clear'><input class='button' id='subscription-email' style='background-color: #0066cc;' type='submit' /></div></form></div><div id='slider-tab'>Fai click per avere aggiornamenti via email</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('Nascondi...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Fai click per avere aggiornamenti via email')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})});  </script>

Si salva l'elemento e si posiziona a piacere nella sidebar. Queste le personalizzazioni più importanti:

1. La riga evidenziata di verde serve per nascondere la navbar
2. La riga evidenziata di giallo serve per installare la libreria jQuery e può essere tralasciata da chi la avesse già nel proprio template.
3. Per modificare l'aspetto del link visibile in alto si può operare sui valori. top:-127px;,  height:130px; e height:120px; che servono rispettivamente per il posizionamento in alto, per l'altezza della barra del modulo. Per esempio modificando gli ultimi due in height:135px; e height:125px; lo spazio in cui si visualizzerà il link sdarà più largo e si potrà aumentare la dimensione dei caratteri passando per esempio da font-size:1.6em; a font-size:1.7em;. Nella Demo è stata scelta questa soluzione aumentando la larghezza da 400 a 450 pixel.
4. I codici dei colori possono essere personalizzati. Il colore del link proposto è color:#f00;.
5. L'ID di Feedburner di questo sito colorato di viola dovrà essere sostituito dal vostro
6. Il testo visibile colorato di blu può essere modificato secondo le nostre esigenze. Ricordo di non usare apostrofi o caratteri speciali perché sarebbero interpretati come codice javascript. 

Demo
Clicca qui

Concludo ricordando che la scritta Fai click per avere aggiornamenti via email rimarrà sempre visibile nella parte alta del blog anche con lo scorrimento della pagina. Si tratta di mostrare ai lettori questa possibilità in un modo che non mi pare particolarmente invasivo.