Trop belle

Admin Messages : 131 Date d'inscription : 12/07/2010 Age : 29

Alors d'abord et avant tout, vous devriez avoir un forum pour l'hébergé. Sur forumactif, vous allez dans le panneau d'administration, modules, html & javascript et gestion des pages HTML. Ensuite vous crée un nouvelle page et vous collez ce code :
Code:

Code:: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">

.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
position: relative;
width: 505px;
height: 600px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
background-image:url(http://farm4.static.flickr.com/3634/3346431062_0f7db7be6b_o.jpg);
text-align: justify;
-moz-box-shadow:0px 0px 4px #766b4f;
-webkit-box-shadow:0px 0px 4px #766b4f;
border-radius: 10px;
}

.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
position: absolute;
background-image:url(http://farm4.static.flickr.com/3634/3346431062_0f7db7be6b_o.jpg);
visibility: hidden;
width: 505px;
text-align: justify;
overflow: auto}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
width: 450px;
border-top-width: 0;
font-family:time new roman;
font-size:25px;
letter-spacing:-2px;
font-weight:bold;
font-style:italic;
text-shadow:0 0 3px black;
color:#7C8BC2;
text-transform:lowercase;
padding-left:25px;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
padding-left:2px;
padding-right: 1px;
padding-top:4px;
float: left;
display: block;
border:none;
color:#C9001A;
}

.fadecontenttoggler a:hover{
color:#f5f4e7;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
}

.staffbig {
background-color: white;
padding: 5px;
-moz-box-shadow:0 0 4px #766b4f;
-webkit-box-shadow:0 0 4px #766b4f;
border-radius: 10px;
width: 400px;
height: auto;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

.titre {display:block;
font-family:time new roman;
letter-spacing:-2px;
text-transform:uppercase;
font-weight:bold;
text-align:right;
font-size:24px;
color:#C9001A;
text-shadow:0 0 1px #000000;
border-bottom: #C9001A 2px dotted; }

.soustitre {display:block;
font-family:time new roman;
text-transform:uppercase;
text-align:right;
font-size:14px;
color:#C9001A;
text-shadow:0 0 1px #000000;
border-bottom: #C9001A 2px dotted; }

.soustitre1 {display:block;
font-family:time new roman;
font-variant: lowercase;
text-align:right;
font-size:14px;
color:#C9001A;
text-shadow:0 0 1px #000000;
border-bottom: #C9001A 2px dotted; }

.text {color:#666455;
font-family:Verdana;
font-size:10px;
text-align:justify;}

.box{
border: 2px solid #F6F6F6;
background-image: url(http://i62.servimg.com/u/f62/14/52/86/28/sans_t24.png);
text-align: justify;
width: 400px;
height: 200px;
-moz-box-shadow: 0px 0px 4px #000000;
margin-left: 10px;
overflow: auto}

.box1{
border: 2px solid #F6F6F6;
background-image: url(http://i62.servimg.com/u/f62/14/52/86/28/sans_t24.png);
text-align: justify;
width: 220px;
height: 200px;
-moz-box-shadow: 0px 0px 4px #000000;
margin-left: 10px;
overflow: auto}

</style>

<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/8523569648528239/jquerypack.js"></script>

<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/8523569648528239/contentfader.js">

/***********************************************
* Fade In Content Viewer script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>
</head>

<BODY><div id="whatsnew" class="fadecontentwrapper"><div class="fadecontent"></br>

<center><img class="staffbig" src="http://25.media.tumblr.com/tumblr_lqlxr17wtt1r1b3tno1_500.jpg"/></br>
<font class="text">© ALLES </font>

</br></br>
<font class="titre" style="text-align:center;">• .pseudo. •</font>
</br><table><tr><td><div class="box">
<font class="soustitre">description de votre personnage</font>
<font class="text"> description de votre personnage</font></div></td></tr></table>
<font class="text">fiche © ocean lounge</font></center>

</div><div class="fadecontent"></br>
<center><img class="staffbig" src="http://27.media.tumblr.com/tumblr_lqp1czmU3c1r2si0ho1_500.jpg"/></br>
</br>
<font class="titre" style="text-align:center;">• mes liens féminins•</font></br>

<table><tr><td><div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du liens</font></div></td><td>
<div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; amis proche</font>
<font class="text">description du lien</font></div></td></tr></table></br>

<table><tr><td><div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du liens</font></div></td><td>
<div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; amis proche</font>
<font class="text">description du lien</font></div></td></tr></table></br></div>

<div class="fadecontent">
<center></br><img class="staffbig" src="http://27.media.tumblr.com/tumblr_lqp1czmU3c1r2si0ho1_500.jpg"/></br>
</br>
<font class="titre" style="text-align:center;">• mes liens masculins•</font></br>

<table><tr><td><div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du liens</font></div></td><td>
<div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du lien</font></div></td></tr></table></br>

<table><tr><td><div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du liens</font></div></td><td>
<div class="box1"><center>
<img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"><img src="http://i304.photobucket.com/albums/nn189/gaa-morph/iosix.png"></center>
<font class="soustitre1">nom&prénom ; relation</font>
<font class="text">description du lien</font></div></td></tr></table></br></div>

</div><div id="whatnewstoggler" class="fadecontenttoggler">
<a href="#" class="toc">• votre personnage •</a>
<a href="#" class="toc"> liens féminins •</a>
<a href="#" class="toc">liens masculins •</a>
</div>

<script type="text/javascript">
//SYNTAX: fadecontentviewer.init("maincontainer_id", "content_classname", "togglercontainer_id", selectedindex, fadespeed_miliseconds)
fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400)
</script>
</BODY>
</html>

ensuite, afin de l'insérer dans un post, vous utiliserez de code :
Code:

Code:: <center><iframe src="URL DE LA PAGE" style="background: none repeat scroll 0% 0% transparent; height: 650px; width: 550px; -moz-background-inline-policy: continuous;" ;="" frameborder="no" scrolling="no"></iframe></center>