–HTML–

Du coté du HTML, il n’y a rien de vraiment compliqué. Placer uniquement le code de votre publicité dans l’endroit indiqué et faite un lien direct vers le Jquery.js,Jquery.cookie.js et la feuille de style style.css

     <link rel="stylesheet" href="css/style.css" type="text/css" charset="iso-8859-1"/>
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/jquery.cookie.js"></script>

     <div id='slidepub'>  

                 <!-- Placez Votre pub ici -->

     </div>

–CSS–

Pour la feuille de style il vous faut placez les dimmentions de votre publicité directement dans les propriétés width: et heigh:.N’oublier pas d’ajouté une marge sur votre width: pour que les internautes puisse ouvrir votre slide-in. Choisiser par la suite la couleur de votre marge avec la propriété background-color: et déterminer la hauteur de votre slide-in sur le navigateur avec la propriété bottom:.

Note importante:La détection de coin arrondie n’est pas géré par Explorer par défaut le slide-in sera carré.

#slidepub {
    position: fixed;
    margin: 0px;
    padding: 0px;
    bottom: 50px; /* hauteur de votre publicité dans le navigateur */
    left: -300px; /* Placez ici la longueur au négatif de votre publicité en pixel */
    z-index:99999;  /* placement de l'image en n'avant plan */
    display: block;
    width: 325px;  /* Placez ici la longueur de votre publicité avec une marge en pixel exemple 300px + marge de 25px= 325px*/
    height: 250px;  /* Placez ici la hauteur de votre publicité en pixel*/
    opacity: 1.0;
    background-color:#d0d9e6; /* Couleur de votre marge */
    background-repeat:no-repeat;
    background-position:center;
    border:1px solid #999;
    -moz-box-shadow: 2px 2px 2px #aaa;
    -webkit-box-shadow: 2px 2px 2px #aaa;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

–Javascript–

Le script utilise les cookies pour déterminé si le slide-in doit apparaitre ou non.
Il se divise en 2 sections, si l’internaute visite le site pour la première fois, le script créera un cookie d’un temps déterminé et déclanchera l’animation du slide-in.Si l’internaute revien sur la même page avant la supprimation du cookie il ne déclanchera pas le slide-in

Premièrement, corriger les {‘marginLeft’:’300px’} si votre pub mesure plus de 300px
Deuxièment, donner un nom à votre cookie (‘Nom_du_cookie’)
Troisièment, règler le temps que le cookie durera date.setTime(date.getTime() + (0 * 1 * 0 * 0 * 0));

<script type='text/javascript'> 

$(document).ready(function() {			   

                $('#slidepub').hover(
                    function () {
                        $(this).stop().animate({'marginLeft':'300px'},200); // position fermé si le curseur est non détecté
                    },
                    function () {
                        $(this).stop().animate({'marginLeft':'0px'},200); // position ouvert si le curseur est détecté
                    }
                );       

       if ($.cookie('Nom_du_cookie') == null) { // si le cookie est non présent il crée le cookie avec une durée de 1 heure 

		  var date = new Date();
   		  date.setTime(date.getTime() + (0 * 1 * 0 * 0 * 0)); // jour * heure * minute * seconde * miliseconde */
   		  $.cookie('Nom_du_cookie', { path: '/', expires: date }); // si le cookie est non présent il active notre animation suivante 

	    $('#slidepub').delay(2000).animate({'marginLeft':'300px'}); // le slide-in est directement placé en position fermé avec un delai de 2 secondes 

            $('#slidepub').delay(5000).animate({'marginLeft':'0px'},1000); // le slide-in est directement placé en position ouvert avec un delai de 5 secondes 

                $('#slidepub').hover(
                    function () {
                        $(this).stop().animate({'marginLeft':'300px'},200); // position fermé si le curseur non détecté
                    },
                    function () {
                        $(this).stop().animate({'marginLeft':'0px'},200); // position ouvert si le curseur est détecté
                    }
                );
      }

});

</script>