Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Ajouter un beau formulaire d’inscription FeedBurner à votre blog

Màj le 13 mars 2015

Comment faire pour ajouter un beau formulaire d’inscription via Email de FeedBurner à votre blog WordPress ? Si vous cherchez à obtenir plus d’abonnés pour votre blog, ce formulaire va surement vous aider. C’est une forme d’abonnement qui offre aux lecteurs un accès instantané au contenu sur votre blog. Chaque fois qu’un visiteur s’abonne à votre blog RSS en utilisant ce formulaire délivré par Feedburner,  il recevra une alerte par email chaque fois que vous publiez un nouvel article.

Comment ajouter un formulaire d’inscription FeedBurner à Wordpress?

En général, ces formulaires sont créés pour des services de Flux RSS comme Aweber, Mailchimp etc, qui sont des services haut de gamme et qui ont besoin d’accéder à leurs membres fonctionnalités. Ici, nous avons créé un simple formulaire pour le service gratuit de google FeedBurner.

ajouter-sidebar-optin-form-wordpress Maintenant on va savoir comment ajouter ce formulaire en haut (voir l’image) à votre barre latérale (sidebar) ?

NB: Avant toute manipulation, il est fortement recommandé de faire une sauvegarde de votre thème.

  1. Connectez-vous à votre tableau de bord et accédez à la section des widgets.
  2. « Drag and Drop » le « Widget texte » dans la section de barre latérale primaire.
  3. Ajouter le code ci-dessous dans ce « widget texte » et l’enregistrer.
 <div id="optin-sidebar">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpcours', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="wpcours"><input type="hidden" value="en_US" name="loc">
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Name" placeholder="Enter Your Name">
<input type="text" id="email" name="email" onfocus="this.value=''" value="Enter Your Email Address" placeholder="Enter Your Email Address">
<input type="submit" value="Get Instant Access" id="submit" name="submit">
</form>
</div>

NB: Remplacez « Wpcours » par l’ID de votre Feedburner.

  1. Aller à Apparence > Editeur et éditez le fichier Style.css.
  2. Ajouter le code ci-dessous puis cliquez sur le bouton « Mise à jour du fichier ».
  3. Vous avez maintenant ajouté une CSS nécessaire à votre fichier style.css.

Maintenant il reste à télécharger les deux images ci-dessous et les mettre dans le dossier images de votre thème.

Nom – http://i.imgur.com/XrHTe.png

Email – http://i.imgur.com/2BCD0.png

#optin-sidebar {

background: #DDDDDD;

border-bottom: 1px dashed #CCCCCC;

padding: 15px 0;

text-align: center;

width: auto;

}

#optin-sidebar h4 {

font-weight: bold;

margin: 10px 0 20px;

}

#optin-sidebar input[type="text"]{

border: 1px solid #AAAAAA;

font-size: 13px;

margin: 0 0 15px 0;

padding: 10px;

width: 80%;

color:#888;

}

#optin-sidebar input {

box-shadow: 0 2px 2px #AAAAAA;

-moz-box-shadow: 0 2px 2px #AAAAAA;

-webkit-box-shadow: 0 2px 2px #AAAAAA;

}

#optin-sidebar input[id="name"] {

background: url("images/XrHTe.png") no-repeat scroll right center #FFFFFF;

}

#optin-sidebar input[id="email"] {

background: url("images/2BCD0.png") no-repeat scroll right center #FFFFFF;

}

#optin-sidebar input[type="submit"] {

background: #DF6001;

border: 1px solid #B63C00;

color: #FFFFFF;

cursor: pointer;

font-family: arial;

font-size: 16px;

font-weight: bold;

height: 40px;

margin-top: 5px;

padding: 8px 0;

text-shadow: -1px -1px #B63C00;

text-transform: capitalize;

width: 87%;

}

#optin-sidebar input[type="submit"]:hover {

background: none repeat scroll 0 0 #B63C00;

}

C’est tout, je vous laisse apprécier ce beau formulaire .


Vous aimerez également...

  • Comment intégrer une vidéo Facebook dans WordPress
  • 5 techniques pour augmenter vos revenus Adsense
  • Ajouter une icône de site (favicon) à WordPress facilement
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site
  • Lutter contre les commentaires spam sous wordpress sans plugin
  • Ajouter Google Authorship à votre site

Classé sous :Tutoriels Balisé avec :wordpress guide

Accueil / Tutoriels / Ajouter un beau formulaire d’inscription FeedBurner à votre blog

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact