Fiche de pub Multicolor
Voici une fiche de pub faite suite à la demande de Narakye.
Pour voir l'aperçu : cliquez ici.
Ce tutoriel est en 2 étapes :
> Création de la page html.
> Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.
Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.
Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
1. Page HTML
Premièrement, nous doit créer une page HTML. Pour cela, on va dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des pages HTML
Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :
Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON
Dans le contenu, nous allons mettre notre page de pub.
- Code:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<title>Fiche de pub</title>
<style type="text/css">
/*Enleve les marges inutiles*/
body {
margin: 0px;
}
/*Liens de la fiche*/
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #000000;
}
/*Cadre de la fiche*/
.pub_cadre {
width: 738px;
height: 770px;
margin: auto;
background-image: url('http://img11.hostingpics.net/pics/571798cadre.png');
padding-top: 72px;
text-align: center;
font-family: arial;
font-size: 13px;
color: #545454;
}
/*Image du haut de la fiche*/
.pub_image_top {
position: relative;
width: 450px;
height: 310px;
margin: auto;
border-radius: 105px 105px 0px 0px;
box-shadow: 0px 0px 10px #353535;
z-index: 1;
}
/*Corps de la fiche*/
.pub_body {
position: relative;
background-image: url('http://img11.hostingpics.net/pics/367932fond.png');
width: 450px;
height: 365px;
margin: auto;
padding-top: 15px;
text-align: center;
z-index: 2;
}
/*Bloc avec image qui glisse*/
.pub_bloc1 {
position: relative;
width: 400px;
height: 86px;
margin: auto;
border: 2px solid white;
background-color: white;
border-radius: 5px;
text-align: left;
overflow: hidden;
}
/*Texte derrière image qui glisse*/
.pub_bloc1_text {
width: 390px;
height: 76px;
background-color: #dfdfdf;
padding: 5px;
overflow: auto;
text-align: justify;
}
/*Image qui glisse*/
.pub_bloc1_img {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 86px;
border-radius: 5px;
transition: all 1s;
-webkit-transition: all 1s;
}
/*Glissement de image*/
.pub_bloc1:hover .pub_bloc1_img {
left: 450px;
}
/*Fond bleu du bloc qui change de contenu*/
.pub_bloc2 {
position: relative;
width: 404px;
height: 209px;
background-image: url('http://img11.hostingpics.net/pics/130557fond2.png');
border-radius: 5px;
margin: auto;
}
/*Bloc qui change de contenu*/
.contenu_pubonglet {
position: absolute;
top: 15px;
left: 15px;
width: 363px;
height: 169px;
background-color: #dfdfdf;
border-radius: 4px;
padding: 5px;
text-align: justify;
overflow: auto;
display: none;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/*Barre bleu du bas*/
.pub_bloc3 {
width: 450px;
height: 35px;
margin: auto;
background-color: #3f87e1;
text-align: center;
}
.pub_bloc3 a {
display: inline-block;
font-size: 20px;
font-family: monotype corsiva;
margin: 8px;
margin-left: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<script type="text/javascript">
//<!--
function change_pubonglet(name)
{
document.getElementById('pubonglet_'+anc_pubonglet).className = 'pubonglet_0 pubonglet';
document.getElementById('pubonglet_'+name).className = 'pubonglet_1 pubonglet';
document.getElementById('contenu_pubonglet_'+anc_pubonglet).style.display = 'none';
document.getElementById('contenu_pubonglet_'+name).style.display = 'block';
anc_pubonglet = name;
}
//-->
</script>
<div class="pub_cadre">
<img src="URL_DE_IMAGE_DU_HAUT" alt="Image haut" class="pub_image_top" />
<div class="pub_body">
<div class="pub_bloc1">
<div class="pub_bloc1_text">
Texte derrière l'image.
</div>
<img src="URL_DE_IMAGE_DU_MILIEU" alt="Image milieu" class="pub_bloc1_img" />
</div>
<span class="pubonglet_1 pubonglet" id="pubonglet_Initial" onmouseover="javascript:change_pubonglet('Initial');"></span>
<img src="http://img11.hostingpics.net/pics/436524histoire.png" alt="Image histoire" class="pubonglet_0 pubonglet" id="pubonglet_Histoire" onmouseover="javascript:change_pubonglet('Histoire');" />
<img src="http://img11.hostingpics.net/pics/396239staffstats.png" alt="Image staff" class="pubonglet_0 pubonglet" id="pubonglet_Staff" onmouseover="javascript:change_pubonglet('Staff');" />
<img src="http://img11.hostingpics.net/pics/598703merci.png" alt="Image merci" class="pubonglet_0 pubonglet" id="pubonglet_Merci" onmouseover="javascript:change_pubonglet('Merci');" />
<div class="pub_bloc2">
<div class="contenu_pubonglet" id="contenu_pubonglet_Initial">
Passez sur les mots pour voir leur contenu ~
</div>
<div class="contenu_pubonglet" id="contenu_pubonglet_Histoire">
Contenu de l'onglet Histoire.
</div>
<div class="contenu_pubonglet" id="contenu_pubonglet_Staff">
Contenu de l'onglet Staff
</div>
<div class="contenu_pubonglet" id="contenu_pubonglet_Merci">
Contenu de l'onglet Merci
Crédit : Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
</div>
</div>
</div>
<div class="pub_bloc3">
<a href="LIEN_DU_REGLEMENT" target="_blank">
Règlement
</a>
<a href="LIEN_DES_PREDEFINIS" target="_blank">
Prédéfinis
</a>
<a href="LIEN_DE_NOUS_REJOINDRE" target="_blank">
Nous rejoindre
</a>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_pubonglet = 'Initial';
change_pubonglet(anc_pubonglet);
//-->
</script>
</body>
</html>
Une page HTML peut être modifiée en tout temps et les modifications qui y sont apportées sont aussi apportées là où vous avez posté l'iframe de la page HTML.
2. Iframe
Nous avons maintenant une page HTML contenant une fiche de pub. Sauf que si on la laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondrons mettre la fiche de pub, on va mettre un iframe contenant le lien de notre page HTML.
Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de votre page HTML.
Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
- Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" style="margin: auto; display: block; border: none; width: 738px; height: 842px;"></iframe>
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".
À plus !
Dernière édition par Onyx le Mer 1 Mar 2017 - 7:19, édité 2 fois
merci !
