Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Facebook
Accueil / Tutoriels / Ajouter un beau formulaire d’inscription FeedBurner à votre blog

Ajouter un beau formulaire d’inscription FeedBurner à votre blog

Màj le 13 mars 2015Laissez un commentaire

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 .


Share
Tweet
+1
Share
Pin it

Cela devrait aussi vous intéresser :

  • Trouver le nombre de visiteurs qui bloquent vos pub
  • 2 méthodes pour nettoyer votre base de données des tables inutilisées
  • Ajouter l’attribut nofollow aux liens externe de votre site
  • 14 méthodes pour améliorer la vitesse de votre site WordPress
  • Repositionner le Fil d’Ariane (Breadcrumb) pour Genesis
  • 15 codes pour optimiser votre fichier .htaccess

Catégorie(s): Tutoriels Mots clés : wordpress guide

Laisser un commentaire Annuler la réponse

Votre adresse de messagerie 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.com et recevez nos tutoriels Wordpress Gratuitement.

Articles récents

  • Ajouter ads.txt à votre site pour augmenter vos revenus Adsense
  • 9 Meilleurs plugins WordPress pour créer un Forum (comparatif)
  • Ajouter les fichiers SVG dans WordPress
  • Comment importer/exporter vos blocs WordPress Gutenberg en 2 étapes
  • Créer un bloc réutilisable dans WordPress Block éditeur (Gutenberg)

© 2019 ·wpcours.com · Privacy Policy · Contact