AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-60%
Le deal à ne pas rater :
Samsung Disque Dur Portable SSD Portable T5 (1 TB)
169.99 € 419.90 €
Voir le deal

    Fiche de pub Multicolor

    Onyx
    Onyx
    FémininAge : 26Messages : 3312

    le Sam 20 Déc 2014 - 23:43

    Rappel du premier message :




    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



    Suisen
    Suisen
    FémininAge : 26Messages : 52

    le Ven 10 Juil 2015 - 22:05

    Merci beaucoup pour le partage ♥
    Nono-Chan
    Nono-Chan
    FémininAge : 22Messages : 273

    le Sam 18 Juil 2015 - 11:40

    Zoliiii
    mon-etoile
    mon-etoile
    FémininAge : 31Messages : 140

    le Lun 3 Aoû 2015 - 21:32

    Merci beaucoup
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2200

    le Lun 3 Aoû 2015 - 22:36

    Merci ( ̄ー ̄)
    Reystern
    Reystern
    FémininAge : 17Messages : 89

    le Mer 5 Aoû 2015 - 12:56

    Vraiment magnifique, merci beaucoup pour ce partage ♥
    EAVENN
    EAVENN
    FémininAge : 24Messages : 162

    le Mer 5 Aoû 2015 - 15:34

    merci
    Guift
    Guift
    FémininAge : 21Messages : 50

    le Mer 5 Aoû 2015 - 18:08

    Superbe *o* !



    Fiche de pub Multicolor - Page 2 Signa210
    rosebleudu10
    rosebleudu10
    FémininAge : 30Messages : 189

    le Jeu 6 Aoû 2015 - 18:08

    merci
    Spring
    Spring
    FémininAge : 18Messages : 113

    le Ven 7 Aoû 2015 - 13:32

    Merci, c'est super! **



    Fiche de pub Multicolor - Page 2 1469275904-1466279957-matae-sign
    Heavensky
    Heavensky
    FémininAge : 25Messages : 66

    le Ven 7 Aoû 2015 - 21:48

    Merci
    Célyo
    Célyo
    FémininAge : 28Messages : 41

    le Dim 9 Aoû 2015 - 12:23

    merci beaucoup pour la fiche Very Happy
    DarkMasamune
    DarkMasamune
    FémininAge : 27Messages : 63

    le Lun 17 Aoû 2015 - 15:42

    Merci ! C'est très beau ! Very Happy
    P'tit loup
    P'tit loup
    MasculinAge : 37Messages : 448

    le Ven 4 Sep 2015 - 14:21

    Thanks



    Fiche de pub Multicolor - Page 2 30xivrd
    Linoa
    Linoa
    FémininAge : 30Messages : 42

    le Dim 13 Sep 2015 - 18:11

    Merci beaucoup !



    Fiche de pub Multicolor - Page 2 Pdsm
    ~ If you come here... You'll find me. I promise ~
    avatar
    Brisyx
    FémininAge : 19Messages : 31

    le Lun 21 Sep 2015 - 21:45

    Genial , merci !
    Sakura-chan
    Sakura-chan
    FémininAge : 22Messages : 180

    le Dim 4 Oct 2015 - 21:06

    Waah, j'aime, merci beaucoup. c:
    Aile
    Aile
    FémininAge : 32Messages : 134

    le Lun 5 Oct 2015 - 11:10

    C'est hyper joli!!!



    Fiche de pub Multicolor - Page 2 799284Sanstitre1
    #FifuKing.
    #FifuKing.
    MasculinAge : 23Messages : 37

    le Mar 6 Oct 2015 - 10:07

    merci :BB
    Sakura Yuuki
    Sakura Yuuki
    FémininAge : 19Messages : 78

    le Dim 18 Oct 2015 - 11:56

    Merci!



    Fiche de pub Multicolor - Page 2 4njt
    Inoue Musaki
    Inoue Musaki
    FémininAge : 30Messages : 147

    le Sam 14 Nov 2015 - 15:42

    merci
    Sparryx
    Sparryx
    MasculinAge : 18Messages : 71

    le Dim 15 Nov 2015 - 19:38

    Merci
    Girly
    Girly
    FémininAge : 22Messages : 116

    le Sam 21 Nov 2015 - 12:58

    merci
    Yam'
    Yam'
    FémininAge : 26Messages : 75

    le Mar 24 Nov 2015 - 18:47

    merci!
    Nord
    Nord
    MasculinAge : 20Messages : 169

    le Dim 13 Déc 2015 - 12:28

    Merci beaucoup ! ^^
    EverLiam
    EverLiam
    FémininAge : 31Messages : 1034

    le Lun 4 Jan 2016 - 14:30

    super ^^



    Contenu sponsorisé


      La date/heure actuelle est Ven 5 Juin 2020 - 9:40