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…
 

Taggé , , , , , , .Mettre en favori le Permaliens.

2 réponses à Une pop-up abonnement pour blogger avec JQuery

  1. Salut,
    je sais que c’est un article qui date mais j’aimerais tellement mettre cette putain de fenetre pop up sur mon blog.
    Le problème c’est que quand j’intègre la dernière partie, ben c’est en couille complet ya une erreur quelque part.
    j’ai recommencé plusieurs fois mais ya pas moyen, si il manque un ) ou un ” ou autre chose moi je le verrai pas, m’y connais pas.
    Peut être tu as une solution, si tu y es arrivé.
    Merci d’avance

  2. Rincevent dit :

    @maot: je viens de passer chez toi, ca avait l’air de marcher. Je pense l’utiliser bientot sur 2tout2rien.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.