Ajouter un formulaire d’inscription FeedBurner sous vos articles

J’ai déjà publié un article sur comment Ajouter un beau formulaire d’inscription FeedBurner à votre blog, aujourd’hui on va savoir comment ajouter un large formulaire d’inscription à la Newsletter sous vos articles dans WordPress. On sait bien que le formulaire d’inscription est très important pour garder vos visiteurs liés à votre blog.

Ajouter un formulaire d’inscription à votre ‘Newletter’ sous vos articles

Pour installer ce formulaire c’est très simple, il suffit de suivre les étapes suivantes:

1. Connectez-vous à votre tableau de bord de WordPress, puis cliquez sur Apparence.
2. Éditez le fichier single.php de votre thème.
3. À la fin de single.php, ajouter le code ci-dessous  et cliquez sur le bouton « Mise à jour du fichier ».
4. Vous venez d’ajouter du code HTML au fichier single.php.

<div id="optin-single">
<h4>Like this Article ? Subscribe to Our Feeds</h4>
<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="Sign Up" id="submit" name="submit">
</form>
</div>

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

Maintenant passant à l’étape suivante:

1. Aller à Apparence > Éditeur 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-single {
background: none repeat scroll 0 0 #F7F7F7;
border-color: #DDDDDD;
border-style: solid;
border-width: 1px;
padding: 10px 10px 15px 20px;
width:95%;
margin:15px 0;
}
#optin-single h4 {
font-weight: bold;
margin: 0 0 10px 0;
font-size:16px;
}
#optin-single input[type="text"] {
box-shadow: 0 2px 2px #DDDDDD;
-moz-box-shadow: 0 2px 2px #DDDDDD;
-webkit-box-shadow: 0 2px 2px #DDDDDD;
border: 1px solid #CCCCCC;
font-size: 13px;
margin: 0 0 10px 0;
padding: 10px;
width: 35%;
color:#888;
}
#optin-single input.name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input.email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input[type="submit"] {
background: #DF6001;
border: 1px solid #B63C00;
color: #FFFFFF;
cursor: pointer;
font-family: arial;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
padding: 8px 0;
text-shadow: -1px -1px #B63C00;
text-transform: capitalize;
width:17%;
}
#optin-single input[type="submit"]:hover{
background: none repeat scroll 0 0 #B63C00;
}

Maintenant il vous reste de jeter un coup d’œil sur votre formulaire.