Bonjour à tous, je vous propose donc une fiche de pub pré remplie, ils vous suffira donc je changer ce qui vous intéresse soit dans la partie html ou bien le css pour utiliser cette fiche, il vous faut être fondateur de votre forum.
Ce que ça donne une fois fini en direct :
En image : https://2img.net/r/hpimg11/pics/478447sans.jpg
Il va falloir crée une page Html rien de compliquer je vous rassure c'est tout simple d'abord ouvrez votre panneau d'administration puis allez dans module puis pages Html ensuite cliquez sur crée une page Html.
Puis coller le code de la fiche en entier:
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub</title>
<style type="text/css">
body {
margin: 0px;
}
.titre-forum
{
font-family: "palatino linotype",palatino,serif;
color: #545D5E;
margin-top: -60px;
margin-bottom: 15px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-shadow: 3px 3px 1px #cccccc;
filter: dropshadow(color=#cccccc, offx=3, offy=3);
}
.header {
border-bottom:ridge 1px #161616;
margin: auto;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
width: 560px;
height: 80px;
-moz-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-webkit-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-khtml-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-moz-box-shadow: 2px 4px 4px #8a8a8a;
-webkit-box-shadow: 2px 4px 4px #8a8a8a;
box-shadow: 2px 4px 4px #8a8a8a;
}
.back {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top, rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-top: 3px solid #cccccc;
border-bottom: 2px solid #cccccc;
}
.titre {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
}
.lier {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}
.stat {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}
.lien a {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}
.lien a:hover {
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgb(226,226,226) 0%, rgb(219,219,219) 50%, rgb(209,209,209) 51%, rgb(254,254,254) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(226,226,226)), color-stop(50%,rgb(219,219,219)), color-stop(51%,rgb(209,209,209)), color-stop(100%,rgb(254,254,254))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* IE10+ */
background: linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}
.bod {
background-color: #aaaaaa;
min-height: 58px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.para {
display: block;
float: left;
margin-left: 10px;
margin-top: 3px;
position: absolute;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}
.para1 {
display: block;
position: absolute;
float: left;
margin-top: 3px;
margin-left: 280px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}
.para2 {
display: block;
position: absolute;
float: left;
margin-left: 10px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}
.para3 {
display: block;
position: absolute;
float: left;
margin-left: 280px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
margin-bottom: 50px;
}
.second {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
height: 330px;
margin: auto;
border: 1px dotted #000;
text-align: justify;
color: #eae9e9;
font-size: 13px;
}
.troisième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}
.quatrième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}
.border {
border: 1px dotted #000;
width: 555px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
.qeel_infos {
color: #000;
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgb(245,246,246) 0%, rgb(219,220,226) 21%, rgb(184,186,198) 49%, rgb(221,223,227) 80%, rgb(245,246,246) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,246,246)), color-stop(21%,rgb(219,220,226)), color-stop(49%,rgb(184,186,198)), color-stop(80%,rgb(221,223,227)), color-stop(100%,rgb(245,246,246))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* IE10+ */
background: linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
width: 500px;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="10" class="back">
<tr>
<td>
<div class="header"></div>
<div class= titre-forum> Ton Forum </div>
</td>
</tr>
<tr>
<td>
<div class="border">
<div class="bod">
<table width="100%" border="0" cellspacing="5" cellpadding="0" style="height: 58px;">
<tr>
<td width="83" align="center" valign="middle" class="lien">
<a href="http://" target="_blank">Lien</a>
</td>
<td width="83" align="center" valign="middle" class="lien">
<a href="http://" target="_blank">Lien</a>
</td>
<td width="83" align="center" valign="middle" class="lien">
<a href="http://" target="_blank">Lien</a>
</td>
<td width="83" align="center" valign="middle" class="lien">
<a href="http://" target="_blank">Lien</a>
</td>
<td width="83" align="center" valign="middle" class="lien">
<a href="http://" target="_blank">Lien</a>
</td>
</tr>
</table>
</div>
</div>
<div class="second">
<table width="100%" border="0" cellspacing="10">
<tr>
<div class="para"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div class="para1"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div class="para2"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div class="para3"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
</tr>
</table>
</div>
<div class="troisième">
<table width="100%" border="0" cellspacing="10">
<tr>
<td class="pub" width="90%" valign="top">
<span class="lier"> Nous lier ?</span><br /><br />
<a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a><br /><br />
<textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a></textarea><br /><br />
<a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a><br /><br />
<textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a></textarea><br /><br />
<a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a><br /><br />
<textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a></textarea>
</td></tr></table></div>
<div class="quatrième">
<table width="100%" border="0" cellspacing="10">
<tr>
<td class="stats" width="90%" valign="top">
<span class="stat">Quelques Stats</span><br /><br />
<div class="qeel_infos">Nous avons <strong><span class="FORUMCOUNTUSER">0</span></strong> utilisateurs enregistrés.<br />
Nos membres ont postés un total de <strong><span class="FORUMCOUNTPOST">0</span></strong> messages.<br />
Dernier membre à nous avoir rejoints. <strong><span class="FORUMLASTUSER">Klash</span></strong>.<br />
</div><br />Mise en page et codage par © <a href="http://www.never-utopia.com/">Never-Utopia</a></td></tr></table></div></td></tr></table>
</body>
</html>
Ensuite validez et là vous aurez votre page html de créé.
Le lien vous servira pour votre fiche de pub, donc copiez le. Le lien de la pub sera à insérer comme suit :
- Code:
<iframe src="votre lien de page html" style="width: 610px; height: 1175px; margin: auto; border: none;"></iframe>
Merci de laisser le crédit un petit merci aussi serait sympa, enjoy if you like it.
EDIT : Vous trouverez également d'autres modèles ici.
Dernière édition par Klash le Ven 29 Juil 2016 - 18:49, édité 1 fois
