Astuces de Blogueur

Une pop-up abonnement pour blogger avec JQuery




Un truc sympa (pour le blogger) que l’on trouve sur les blogs wordpress est l’apparition d’une fenêtre d’abonnement lors du premier chargement du blog.

Le but du jeu est bien sûr de faire grimper le nombre d’abonnés tout en ne soumettant pas la fenêtre à chaque passage de l’utilisateur.

Un peu de recherche et j’ai trouvé une solution à l’air sympathique pour faire de même sur blogger en utilisant JQuery.
L’article original (en anglais) se trouve ici.

Rappelons d’abord que JQuery est une bibliothèque javascript libre.

Pour réaliser cette pop-up, il faut bien sûr modifier le template de votre blog.
Avec la nouvelle interface Draft, il faut le télécharger et utiliser un éditeur adéquat (pour ma part j’utilise pspad).

Ensuite, vous devez ajouter le code suivant avant ]]>

#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:384px;
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;
}

Ajouter ensuite le code suivant avant la balise

x

;Pop-up title goes here

your pop-up content and subscription form … goes here

C’est le code de votre pop-up d’abonnement.Vous devez remplacer les champs en gras par les votres, comme dans l’exemple suivant:
         x

Subscription to SimplexDesign

        


                

Enter your email address:
                


                
                
                
            
        
    
    

Dans l’exemple, c’est l’emailing feedburner que l’on propose au visiteur.
Pour savoir comment créer un abonnement via feedburner just click.

Il faut maintenant rajouter le code JQuery qui va faire fonctionner la fenêtre, avant la balise

 

Cette pop-up apparaîtra lors de la première visite du lecteur et reviendra 7 jours plus tard (expires: 7).
La fréquence de réapparition peut être changée en modifiant justement le expires: 7 par expires: 6 par exemple.
La ligne setTimeout(“loadPopup()”,5000); permet de régler le délai d’apparition de la pop-up en millisecondes.

Je pense bientôt mettre en place ce type de pop-up.
Deux trois petites choses toutefois à modifier.
Tout d’abord l’histoire du expires. Je voudrais que la fenêtre ne s’affiche qu’une seule fois, et plus jamais. Genre expires: never. Il me manque la bonne syntaxe (-1?)
Dans les abonnements, j’aimerais promouvoir également ma fan page et je vais devoir étudier un peu plus la façon de faire…
 

Quitter la version mobile