Changer l’apparence de la boîte de souscription à la newsletter de Feedburner

By
Advertisement


Kameyoko avait avec insistance demandé comment avoir une boîte de souscription à la Newsletter offerte par Feedburner différente de celle proposée.

Après quelques recherches, je puis aujourd’hui lui offrir la solution pour assouvir son besoin (et celui de ceux que ça va intéresser), solution inspirée de ce blog.

Voici à quoi ressemble le code pour la boîte de souscription à Feedburner


<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=Your feed ID here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=Your feed ID here" name="url"/><input type="hidden" value="blog name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

1) Changer la couleur de fond :

Pour cela, ajouter background: #00BB11; juste après text-align:center; (N.B. : Vous pouvez remplacer le code couleur 00BB11 par celui de votre couleur préférée. Voir pour les autres codes ici)

Le code devrait alors ressembler à quelque chose comme ceci :

<form style="border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;"

2) Ajouter une image de fond

Pour cela, ajouter background: url(http://urldevotreimage); juste après text-align:center;

Remplacer l’urldevotreimage par l’url de votre image.

Le code devrait avoir maintenant avoir cette apparence :

<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://urldevotreimage);"

3) Changer la longueur de la case de texte (celle où on écrit l’email)

Il suffit pour cela de reduire ou d’augmenter le chiffre de width:140px . Mettre un autre chiffre à la place de 140.

Dans cet exemple, on a mis 250 à la place de 140

<input type="text" style="width:250px" name="email"/>


4) Ajouter un texte par défaut dans la case de texte (celle où on écrit l’émail)

Pour accomplir cette petite prouesse, enlever la partie suivante :

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>



Remplacez le par :

<input type="text" style="width:240px" name="email" value="Mettre votre adresse e-mail ici" onfocus="if(this.value==this.defaultValue)this.value='';
"onblur="if(this.value=='')this.value=this.defaultValue;"/>

Vous pouvez mettre un autre texte, à la place de « Mettre votre adresse e-mail ici »

5) Changer la largeur de la case de texte :

Il suffit pour cela d’ajouter height:22px; juste après style="width:255px; et mettre le chiffre de votre choix à la place du 22.

Nous aurons alors quelque chose du genre : style="width:255px;height:22px;.....................


6) Changer la couleur et la taille du texte

Pour changer la couleur et la taille du texte, mettre la ligne suivante font-size:15px;color:#AA33FF juste après le style="width:255px; en oubliant pas de mettre la taille désirée à la place de 15 et la couleur désirée à la place de AA33FF (Voir pour les autres codes ici)


Le code devrai alors ressembler à ceci dans la partie modifiée :

style="width:255px;height:22px;font-size:15px;color:#000000.....

7) Changer le style du bouton « Suscribe » (s’abonner)

Pour cela, il faut mettre un bout de code dans le html de votre blog.

1. Allez sur modifier le code html
2. Chercher ]]></b:skin>
3. Mettre le code ci-dessous juste avant ]]></b:skin>

.boutton { background-color: #cc0000; font-size: 80%;font-family:Tahoma; font-weight: bold;color:#ffffff; }


4. Enregistrer le modèle
5. Faire une petite modification dans le code feedburner:

Remplacer ce bout de code

<input type="submit" value="Subscribe" />

Par

<input type="submit" value="Subscribe" class="boutton"/>

Vous pouvez changer la taille, l’apparence et la couleur du bouton dans


8) Enlever le texte 'Delivered by Feedburner' :

Très simple. Effacer cette ligne

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>


Bon voilà, avec ça vous pouvez avoir un votre boîte d’abonnement à la newsletter qui s’intègre complétement à votre blog.

Moi, je suis allé un peu plus loin et ajoutant un gros bouton de souscription juste à côté de la boîte.

Pour cela, il m’a suffit d’utiliser le code pour mettre un article sur deux colonnes. J’ai mis le code pour la boîte dans la colonne droite et le code pour le bouton dans la colonne gauche.

Voici le code pour le bouton RSS :

<a href="http://urldevotreflux"><img border="0" alt="Abonnement à votre blog" width="90" src="http://i321.photobucket.com/albums/nn397/rodney2006_2008/johncow_rss.gif" height="89"/></a>

A+


4 commentaires:

  1. Merci pour ce superbe article. je vais le tester de suite sur mon blog test.

    J'ai honte! Cet article m'était destiné et je suis passé à côté! Trop la loose pour moi.

    En tout cas merci pour cet article qui j'espère en intéressera d'autre que moi.

    Allez let's go pour la phase de test.

    Mon prochain défi trouver comment rendre plus "beau" et "ergonomique" la possibilité de suivre par email ou flux RSS les commentaires d'un article.

    C'est fou ce qu'on peut s'amuser avec Blogger pour personnaliser son blog.

    Encore une fois merci et désolé de n'avoir pas vu plus tôt cet article.

    Bonne continuation Rodney

    RépondreSupprimer
  2. Cher Rodney,
    c'est la panique! Je sais que vous avez compris les ficelles de ce satané Feedburner, la preuve ci-dessus, alors peut-être allez-vous pouvoir m'aider: j'ai un blog (dans lequel j'ai cité le vôtre, d'ailleurs!), et j'aime bien aller voir les noms de mes nouveaux subscribers et leur nombre, ça me réchauffe le coeur de voir que je n'écris pas dans le vide; bref, aujourd'hui, argh, horreur: 0 subscriber! ils ont tous "disparu", plus de noms, plus d'adresses mail, rien de rien! Pouvez-vous m'expliquer cet horrible phénomène? J'imagine que c'est un "bug" de leur côté, car on ne passe pas d'un certain nombre à zéro en une seule journée mais tout de même, quelle frayeur... Merci!
    IC

    RépondreSupprimer
  3. Bonjour Rodney.
    Je configure feedburner mais le bouton d'abonnement à la Newsletter n'apparait pas.
    Est-ce du au modèle dynamique que j'utilse?
    Merci d'avance de vos conseils.

    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