Nom de la fonction : faire une newsletter
Quel est son but : faire une newsletter présentable à insérer dans votre communication par par mail.Voici un modèle de newsletter que vous pouvez intégrer à votre mailling.
J'en ajouterai d'autres si vous en avez besoin!
Vous pouvez y intégrer une bannière et une image, et vous disposez de deux blocs texte.
Il vous faudra toutefois disposer de:
- Soit un dossier newsletter à la racine de votre site.
- Soit avoir un éditeur de newsletter en ligne (option plus simple que j'ai choisi, gratuit et concluant).
Pour utiliser cet éditeur en ligne:
http://www.ymlp.comVoici le code à intégrer dans votre éditeur html
(en le faisant avec smultron, vous disposez de l'option Menu--> Apperçu pour le voir en ligne).
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" bgcolor="#f2f2f2">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2">
<tr>
<td valign="top" align="center">
<table width="551" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding:10px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
Images not displaying properly? Add <a href="mailto:info@yourcompany.com" style="color:#545454;">info@yourcompany.com</a> to your address book now<br>
or <a href="[SHOWEMAIL]" style="color:#545454;">view the online version here</a>.
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="border:1px solid #9c9c9c; padding:5px;">
<div style="border:7px solid #424242;">
<table width="525" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:25px 20px 20px 20px;">
<table width="485" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.servecake.com/newsletters/b5/i/logo.gif" alt="Yout Company Name" width="155" height="29"></td>
<td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#acabab;">MMMM DD, YYYY</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="border-bottom:1px solid #d6d6d6; border-top:1px solid #d6d6d6; padding-bottom:3px; padding-top:3px;">
<div style="background-color:#424242;">
<table height="39" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[SUBSCRIBE]" style="color:#e4e4e4;">Subscribe</a></td>
<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[UNSUBSCRIBE]" style="color:#e4e4e4;">Unsubscribe</a></td>
<td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[FORWARD]" style="color:#e4e4e4;">Forward to a friend</a></td>
<td> </td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table width="525" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table width="337" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:1px;"><img src="http://www.servecake.com/newsletters/b5/i/postcard.gif" width="335" height="269" alt=""></td>
</tr>
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; padding:20px; line-height:20px;">
<p style="margin:0 0 10px 0; font-size:18px; color:#0165ab;"><a href="#" style="color:#0165ab;">Lorem ipsum dolor sit amet</a></p>
<p style="margin:0 0 25px 0;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor.
</p>
</td>
</tr>
</table>
</td>
<td width="148" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; padding:30px 20px 0 20px; border-left:1px solid #afafaf; line-height:17px;" valign="top" bgcolor="#f6f6f6">
<p style="font-size:13px; margin:0 0 8px 0; color:#555555;"><b>Ut wisi enim ad minim</b></p>
<p style="margin:0 0 20px 0;">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat.
</p>
<p style="font-size:13px; margin:0 0 8px 0; color:#555555;"><b>Nam liber tempor</b></p>
<p style="margin:0 0 20px 0;">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-top:1px solid #d6d6d6; background-color:#f6f6f6; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; line-height:17px; padding:15px 0 15px 20px;">
<b>Your Company Name</b><br>
123 Your Address, Your City, State, Zip<br>
<a href="mailto:info@yourcompany.com" style="color:#4089bb;">info@yourcompany.com</a><br>
<a href="http://www.yourcompany.com" style="color:#4089bb;">www.yourcompany.com</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" style="padding:20px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
To ensure our newsletter always reaches your inbox, please add <a href="mailto:info@yourcompany.com" style="color:#545454;">info@yourcompany.com</a> to your<br>
address book. If you prefer not to receive news from Your Company Name in the future, you can<br>
<a href="[UNSUBSCRIBE]" style="color:#545454;">unsubscribe here</a>.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Et voici à quoi ressemblera votre newsletter:

Bien sûr, les champs personnalisés sont à modifier par vos soins (liens img et lien sites, email etc...)
Vous pouvez également modifier les couleurs et les dimensions des éléments, mais uniquement si vous êtes certain de votre manip!
