AccueilDernières imagesRechercherS'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.


    Fiche de pub Multicolor

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 20 Déc 2014 - 23:43




    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



    Anonymous
    Invité

    Dim 21 Déc 2014 - 12:07

    Ca pour être coloré, c'est coloré ! XD
    J'aime beaucoup, sympa et synthétique, merci du partage ^^
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Dim 21 Déc 2014 - 14:41

    Merci <3
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Lun 22 Déc 2014 - 13:16

    C'est joli comme tout !



    Romann
    Romann
    FémininAge : 30Messages : 183

    Jeu 1 Jan 2015 - 16:58

    sympa ! Very Happy merci !



    Fiche de pub Multicolor Unicor11
    smily
    smily
    FémininAge : 25Messages : 66

    Jeu 1 Jan 2015 - 19:15

    Merci *^* !
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Sam 10 Jan 2015 - 17:29

    Merci :)
    Mimio
    Mimio
    FémininAge : 30Messages : 191

    Jeu 15 Jan 2015 - 6:24

    Trop boooooo *q* Merci



    Fiche de pub Multicolor 134914Signazael2
    Sinon
    Sinon
    FémininAge : 25Messages : 68

    Sam 17 Jan 2015 - 17:56

    Merci beaucoup^^!
    Jenova
    Jenova
    MasculinAge : 30Messages : 153

    Dim 25 Jan 2015 - 13:32

    Non mais please c'est trop classe ! Dommage que ce ne soit pas mes couleurs mais bravo !



    Fiche de pub Multicolor I3k3
    Moon Heart
    Moon Heart
    FémininAge : 24Messages : 37

    Sam 7 Fév 2015 - 21:28

    merci c'est trop beau ^^
    Scandalucia
    Scandalucia
    FémininAge : 33Messages : 255

    Sam 14 Fév 2015 - 19:43

    Je la trouve trop trop stylée ! Merci beaucoup du partage !
    Viou
    Viou
    FémininAge : 35Messages : 181

    Lun 16 Fév 2015 - 11:14

    Très coloré tout en restant beau, j'aime. Beaucoup merci
    Zélya
    Zélya
    FémininAge : 35Messages : 190

    Lun 16 Fév 2015 - 17:00

    elle est magnifique merci du partage



    Fiche de pub Multicolor 891727signaNanmoue
    CECILE362
    CECILE362
    FémininAge : 35Messages : 198

    Sam 21 Fév 2015 - 16:48

    Merci pour le partage :)
    Dark Fairy
    Dark Fairy
    FémininAge : 26Messages : 244

    Dim 8 Mar 2015 - 13:01

    Merci!
    Pikabouh
    Pikabouh
    FémininAge : 23Messages : 123

    Sam 4 Avr 2015 - 11:53

    J'adore *^* Un code plus que magnifique ♥
    Calypso Luciano
    Calypso Luciano
    FémininAge : 33Messages : 333

    Mer 8 Avr 2015 - 14:39

    Merci ^^
    Akiyuki
    Akiyuki
    MasculinAge : 26Messages : 89

    Mar 28 Avr 2015 - 20:17

    Ca m'interresse, merci beaucoup ! **
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Mer 29 Avr 2015 - 17:59

    Jolie ! Merci ^^



    Fiche de pub Multicolor 878302signaturevegeta
    Kitty Kat.
    Kitty Kat.
    FémininAge : 30Messages : 86

    Lun 4 Mai 2015 - 15:40

    J'aime beaucoup ! Very Happy
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Lun 11 Mai 2015 - 13:14

    Vraiment magnifique~
    Merci^^
    Haniwa
    Haniwa
    FémininAge : 30Messages : 206

    Dim 17 Mai 2015 - 0:34

    Merci
    Litonya
    Litonya
    FémininAge : 23Messages : 149

    Lun 25 Mai 2015 - 11:25

    merci
    Lunaryss
    Lunaryss
    FémininAge : 25Messages : 24

    Mer 10 Juin 2015 - 11:10

    Respect ! C'est juste... Waouh !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:23