Pubblicato il 16/12/12e aggiornato il

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



modulo-newsletter-blogger

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

iscrizione-via-email-feedburner

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.




20 commenti :

  1. bellissimo widget!
    qual'è il codice per cambiare il colore del testo "fai click per avere..etc"? grz

    RispondiElimina
    Risposte
    1. non c'è modo anche di modificare il testo del bottone "invia richiesta" ? grazie

      Elimina
    2. @GaiaVincenzi
      Il bottone "Invia" dipende dalla lingua usata nel browser. Infatti non c'è Invia nel codice. Il codice del colore è invece ereditato dal blog quindi si vedrà lo stesso colore del testo dei post.

      Elimina
    3. fatto tutto ma con il mio feed http://feedburner.google.com/fb/a/mailverify?uri=IconaDeiRonchi , al momento della sottoscrizione poi si apre una pagina Feedburner: "The feed does not have subscriptions by email enabled" quando invece il gadget ufficiale di sottoscrizione via email di blogger con feedburner funziona correttamente...mhà.........

      Elimina
    4. rettifico:
      il mio url di feedburner corretto è : http://feeds.feedburner.com/IconaDeiRonchi
      e la finestrella che viene di Feedburner al momento della registrazione dice "HTTP method POST is not supported by this URL Error 405"

      Elimina
    5. @GaiaVincenzi
      Prova a sostituire
      ideepercomputeredinternet/zUQN
      con
      IconaDeiRonchi

      Elimina
    6. grazie funziona ;)
      l'unica cosa che non capisco è come mai questo widget "passi sopra" al mio corpo del blog, ma non alla colonna laterale (che quindi gli va sopra..)... bhà..

      Elimina
    7. @GaiaVincenzi
      Dopo
      #slider{
      prova a aggiungere questa stringa
      z-index:9999;
      in questo modo
      #slider{ z-index:9999; position:fixed; ....

      Elimina
  2. ciao Ernesto in merito alla newsletter di feedburner io ho posizionato il riquadro per richiedere gli aggiornamenti delle ricette nella sidebar del mio blog , è possibile posizionarlo invece alla fine di ogni post? grazie!

    RispondiElimina
    Risposte
    1. @ Caterina Pili
      Cerca nel modello la riga
      <div class='post-footer'>
      e incolla il codice subito sopra dopo aver messo all'inizio e alla fine dello stesso i tag condizionali per mostrarlo solo nei post
      http://www.ideepercomputeredinternet.com/2012/06/i-tag-condizionali-e-i-domini.html

      Elimina
    2. grazie tantissimo, ci provo subito!

      Elimina
    3. l'inserimento è riuscito alla perfezione ,grazie ancora!

      Elimina
  3. Ciao Ernesto, grazie per le tue indicazioni preziosissime, per la tua competenza e gentilezza. Ti volevo sottoporre un problema: nei giorni scorsi ho provato a seguire questo tuo post e ad inserire il modulo di iscrizione alla newsletter al top del blog e, per farlo, ho nascosto la navbar come tu suggerivi. Poi ho deciso di fare altrimenti e ho ripristinato la navbar come in precedenza. Ora non compare più la notifica di Google: “Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico….” Come posso fare?

    RispondiElimina
    Risposte
    1. La notifica di Google non ti compare perché forse hai cliccato su OK. Il sito è questo?
      http://gmzavattaro.blogspot.it/
      Incolla nel browser il link seguente
      http://i.imgur.com/fr0b4xT.png
      @#

      Elimina
    2. Grazie di cuore Ernesto. Sì il sito e quello. E' tutto a posto.

      Elimina
  4. Ciao Ernesto ho provato ad inserire il codice come tu hai spiegato e funziona ma vorrei che nella sidebar mi apparisse il gadget come bottone dove cliccandoci, è possibile l'iscrizione alla newsletter... ora invece mi appare statico

    RispondiElimina
    Risposte
    1. Salvo il tuo commento perché mi pare che ci siano difficoltà in questo widget
      @#

      Elimina
    2. Segui questa versione aggiornata
      http://www.ideepercomputeredinternet.com/2016/06/blogger-iscrizione-newsletter.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.