Modulo per iscriversi alla newsletter inserito al top del blog.

Come mostrare nella parte alta della pagina un modulo con effetto slide che inviti i navigatori a iscriversi alla newsletter di FeedBurner.

Feedburner offre agli utenti un discreto servizio di newsletter nel senso che coloro che si iscrivono possono ricevere nella loro casella di posta elettronica tutti gli articoli pubblicati da un determinato sito. Essendo Feedburner di proprietà di Google al pari di Blogger, è stata creata una sinergia che consente agli utenti di quella piattaforma di inserire un widget nativo per la newsletter denominato Follow by Email che può anche essere personalizzato nei colori e nella forma.

Se abbiamo iscritto un sito a Feedburner otterremo un URL a cui saranno reindirizzati i feed originali e che avrà la stessa sintassi per tutti i blog: feeds.feedburner.com/ideepercomputeredinternet/zUQN in cui la parte in rosso è quella che varia mentre quella in blu è la stessa per tutti i siti.

Vediamo come creare un modulo originale che può essere visualizzato nella parte alta del blog solo se il navigatore cliccherà su un testo che invita a sottoscrivere i feed

Per la realizzazione di questo modulo si utilizza JQuery e per usarlo è opportuno nascondere la navbar. Per la sua installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice

<style type='text/css'> /*<![CDATA[*/ #navbar-iframe { display: none !important; } #slider{     position:fixed;    top:-125px;    right:0px;    height:120px; 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:110px;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.0em;   } #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>

in cui la riga evidenziata di giallo serve per nascondere la navbar e, se non fosse già presente, si può togliere mentre la riga evidenziata di verde è la libreria JQuery. Anche in questo caso si può tralasciare se JQuery fosse già utilizzata nel template. L'ID di Feedburner è quello di questo blog e deve essere sostituito con quello del vostro sito nelle sue due occorrenze.

Si possono personalizzare anche i colori agendo sui loro codici esadecimali e si possono cambiare le frasi visibili al navigatore che sono state colorate di blu. Se si inserirà un indirizzo email e si cliccherà su Invia verrà visualizzata una finestra popup di conferma della iscrizione alla newsletter

Dovrà essere superato il controllo visivo di una captcha e si dovrà cliccare sul link di verifica del messaggio che verrà inviato alla email digitata. Un modo originale per invitare a iscriversi alla newsletter.