Afficher un pop-up avec option d'abonnement sur Blogger

By
Advertisement

Êtes-vous déjà tombé sur un site ou blog qui affiche un pop-up vous proposant de vous abonner à celui-ci ? Je crois que la réponse doit-être oui. 

Sachez que si vous avez envie de faire la même avec votre blog hébergé sur Blogger, ce n'est pas impossible. Quelques codes (html et css) fournit par Visal Chum de The Blogger Design et le tour sera joué.



Voici les étapes à suivre afin de réaliser cette petite prouesse : 

1. Connectez vous à votre compte blogger, cliquez sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”. Cochez ensuite sur “Développer les modèles de Gadgets”.

2. Trouvez la balise suivante:  

]]></b:skin>

3. Mettez le code css suivant juste avant la balise ci-haut : 

#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:300px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

4. Trouvez maintenant le code suivant : 

 </body>

5. Mettez le code suivant juste avant la balise  </body>

 <div id="popupContact">

<a id="popupContactClose">x</a>
<h1>Mettez le titre de votre pop-up ici</h1>
<p id="contactArea">

Mettez le contenu de votre pop-up ici

</p>

</div>
<div id="backgroundPopup"></div>

Pour le contenu de votre pop-up, vous pouvez mettre le code HTML de Feedburner pour l'inscription à votre newsletter ou simplement l'utiliser pour autre chose.

Je vous donne en exemple ce que j'ai fait pour Blogger au bout du doigt où j'ai aussi ajouté la possibilité de  rejoindre la page de fan sur Facebook :




<div id="popupContact">

<a id="popupContactClose">x</a>
<h1><center>Abonnez-vous à ce blog</center></h1>
<p id="contactArea">


<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerAuBoutDuDoigt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<iframe style="border-bottom: medium none; border-left: medium none; width: 292px; height: 70px; overflow: hidden; border-top: medium none; border-right: medium none" src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blogger-au-bout-du-doigt/206699899069&amp;width=292&amp;height=70&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;appId=214975651918972" frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe>

<p><b>Rejoignez les </b><a href="http://feeds.feedburner.com/BloggerAuBoutDuDoigt"><img width="90" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/BloggerAuBoutDuDoigt?bg=CCCCCC&amp;fg=000000&amp;anim=0&amp;label=Abonnés" height="26" /></a> <b>de Blogger au bout du doigt</b></p>

<center><input class='follow-by-email-address' name='email' placeholder='Mettez votre Email ici ...' type='text'/></center>
<p><center><b>Votre adresse Email ne sera pas divulguée. Nous aussi nous détestons les spams.</b></center></p>
<input name='uri' type='hidden' value='BloggerAuBoutDuDoigt'/>
<input name='loc' type='hidden' value='fr_FR'/>
 <p><center><input class='follow-by-email-submit' type='submit' value='Je rejoins'/> </center></p>


</form>

</p>

</div>
<div id="backgroundPopup"></div>


Dans le code ci-haut, il suffit de changer l'identifiant en bleu par celui de votre blog sur Feedburner, l'url en rouge par celle de la page Facebook de votre blog et le nom en vert par le nom de votre blog.


6. Trouvez la balise suivante :

</head>

7. Mettez ce code juste avant </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>   
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
     var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $(&quot;#backgroundPopup&quot;).css({
            &quot;opacity&quot;: &quot;0.7&quot;
        });
        $(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
        $(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
        popupStatus = 1;
    }
}

//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
        $(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
        popupStatus = 0;
    }
}

//this code will center popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $(&quot;#popupContact&quot;).height();
    var popupWidth = $(&quot;#popupContact&quot;).width();
    //centering
    $(&quot;#popupContact&quot;).css({
        &quot;position&quot;: &quot;absolute&quot;,
        &quot;top&quot;: windowHeight/2-popupHeight/2,
        &quot;left&quot;: windowWidth/2-popupWidth/2
    });
    //only need force for IE6    
    $(&quot;#backgroundPopup&quot;).css({
        &quot;height&quot;: windowHeight
    });
    
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie(&quot;anewsletter&quot;) != 1) {    
        //centering with css
        centerPopup();
        //load popup
        loadPopup();    
    }        
    //CLOSING POPUP
    //Click the x event!
    $(&quot;#popupContactClose&quot;).click(function(){
        disablePopup();
        $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Click out event!
    $(&quot;#backgroundPopup&quot;).click(function(){
        disablePopup();
        $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 &amp;&amp; popupStatus==1){
            disablePopup();
            $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
        }
    });
});
</script>


8. Enregistrez votre modèle et le tour est joué. 

Notez que dans le code de l'étape 7, il est indiqué que le pop-up ne puisse s'afficher qu'une fois tous les  7 jours. Vous pouvez modifier cela, en changeant les { expires: 7 } en { expires: 3 } ou en { expires: 20 } afin que le pop-up ne s'affiche qu'une fois tous les 3 ou 20 jours pour chaque visiteur.

Avec cette astuce, n'importe qui peut maintenant afficher un pop-up avec option d'abonnement sur Blogger.

@+


14 commentaires:

  1. slt, est-il possible de ne pas afficher ses catégories sur la page d'accueil ? Merci par avance

    RépondreSupprimer
  2. @Peggy : va voir cet article, tu y trouvera la réponse

    http://blogger-au-bout-du-doigt.blogspot.com/2008/01/limiter-laffichage-dun-widget-certaines.html

    RépondreSupprimer
  3. slt, merci de ta réponse mais je vois qu'en faite je me suis mal exprimée.
    En faite je souhaiterai voir sur ma page d'accueil uniquement mes articles qui n'ont pas de libellés (ou de catégories). Ou alors je cherche tjrs à choisir mes libellés que je veux voir uniquement sur ma page d'accueil. Est-ce possible de le faire ou pas ? merci par avanc par avance

    RépondreSupprimer
    Réponses
    1. Je crois que pour faire ça, cela va demander beaucoup de gymanastique. Il faudra configurer le widget des messages (articles) afin qu'il ne s'affiche pas en page d'accueil, mettre des wigets flux dans lesquels tu mettra les flux des libellés que tu désire afficher à l'accueil, le mettre ce gadget juste en dessous de celui des messages et configurer lesdits gadgets afin qu'ils ne s'affichent qu'à la page d'accueil. Donc, tu devra nécessairement attribuer un libellés à ces articles qui n'ont pas de catégorie et si tu affiche le widget libellés, tu pourra le configurer afin que les libellés que tu affiche à la page d'accueil n'y figurent pas.

      Comme je le disais, trop de gymnastique.

      Supprimer
  4. oui effectivement...
    bon c'est pas grave je retourne dans ancien service de blogger.
    bonne continuation

    RépondreSupprimer
  5. Excellent work man.Great informative article..

    RépondreSupprimer
  6. Wow, awesome job, wonderful blog, thanks a lot for the share, keep it up please!

    RépondreSupprimer
  7. Its impressive Post! I found good knowledge from here.

    RépondreSupprimer
  8. Bonjour

    Est-il possible d'ajouter un formulaire d'autorépondeur à la place de l'abonnement au blog ? Si oui, ou insérer le code ?

    Merci

    RépondreSupprimer
  9. Salut
    j'ai un souci avec cette pop up.
    J'arrive à la faire apparaitre mais elle est coincée au centre gauche de mon écran. Le X pour quitter est complètement à gauche.
    Et une dernière chose, mon blog est sur fond noir, je sais pas si c'est à cause de ca mais la fenêtre est transparente et du coup on voit que dalle.
    Aurais tu une solution pour centrer la pop up au milieu de la page et pour que le fond soit blanc.
    Merci

    RépondreSupprimer
  10. Wonderful site and I wanted to post a note to let you know, ""Good job""! I’m glad I found this blog. Brilliant and wonderful job ! Your blog site has presented me most of the strategies which I like. Thanks for sharing this.

    RépondreSupprimer
  11. Wonderful site and I wanted to post a note to let you know, ""Good job""! I’m glad I found this blog. Brilliant and wonderful job ! Your blog site has presented me most of the strategies which I like. Thanks for sharing this.

    RépondreSupprimer
  12. merci
    www.tutoriel-iphone.fr

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT