Insertion onglet gmail facebook...

coubisouspel Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Salut à tous j'aurais aimé mettre des onglets sur mon site comme sur la photo, savez vous comment faire ?
[URL=http://www.hostingpics.net/viewer.php?id=367273Sanstitre111.jpg][IMG]http://img15.hostingpics.net/pics/367273Sanstitre111.jpg/IMG[/URL]


Merci
A voir également:

1 réponse

Réponse 1 / 1
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut
sur le site que tu donne c est fait ici
https://www.addthis.com/

mais les adblock vont le bloquer !! il vaut mieux le faire soit meme !

il faut juste mettre la div (onglet) ou tu mettra les images et liens vers tes sociaux en position fixed !

exemple tres simple 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
<!--
    #content {
    width:500px;
    margin:auto;
    border: thin solid #0A0000

    }
    #onglet{
    position:fixed;
    width:70px;
    height: auto;
    margin-top: 200px;
    border: thin solid #0A0000;
    background-color: #FF9E9E;

    }

    -->
    </style>
  </head>
  <body>
    <div id="onglet">tu met tes images lien ici</div>
    <div id="content">
      <p>
        Lorem ipsum dolor sit amet consectetuer tincidunt Curabitur Curabitur tristique et. Vestibulum nunc turpis elit
        Integer penatibus risus lorem massa elit lobortis. Pretium Morbi convallis elit neque massa Duis nibh cursus
        Fusce iaculis. Ac venenatis id suscipit wisi Ut Nunc Curabitur In metus ac. Integer justo lacinia wisi at orci
        laoreet leo cursus Aenean est. Felis metus nascetur condimentum Vivamus consectetuer eros sed In enim sapien.
      </p>
      <p>
        Et Cum Pellentesque rutrum et tortor pulvinar elit dis ultrices elit. Ac nibh nisl Curabitur mauris dui Donec
        orci ligula fames hac. Justo nisl parturient Curabitur tristique mauris ut urna ac risus Morbi. Ligula at dolor
        est dolor congue tincidunt sagittis malesuada Vestibulum augue. Condimentum Sed semper urna dignissim convallis
        convallis quis mus congue augue. Gravida non Aenean tincidunt Aliquam urna Aenean nibh ac Nulla.
      </p>
      <p>
        Accumsan Vivamus mauris quis sapien tristique Vivamus pellentesque aliquam accumsan Pellentesque. Fringilla id
        magna dui orci at metus cursus dui nunc Quisque. Lorem et quis Vestibulum urna eros quis at iaculis felis non.
        Id id sapien mollis nunc Nunc id fringilla ac et Pellentesque. Tortor Phasellus ut platea Aliquam sagittis Ut
        amet Vestibulum Maecenas vestibulum. Id consequat quis ante Nunc nec semper lacus a quis.
      </p>
      <p>
        Hendrerit sem ut Mauris tempor pede Vestibulum Nam elit lacinia Phasellus. Donec ac augue vitae quis tempor
        elit pede leo quis amet. Habitasse Curabitur pretium nisl vel pede eget tincidunt Curabitur justo ante. Massa
        sit semper adipiscing et turpis mauris est penatibus metus Vestibulum. In metus consequat tincidunt sem in
        neque morbi orci consectetuer ornare. Faucibus fames semper fringilla hendrerit vel pharetra interdum porta
        pretium purus. Urna nisl vitae.
      </p>
      <p>
        Adipiscing nec et risus semper Donec est nec et consequat elit. Tellus eu wisi Suspendisse leo vel venenatis
        Vestibulum wisi pellentesque a. Vestibulum cursus enim tempus netus Fusce Cum nulla id sem enim. Wisi vitae ut
        In congue ac quis interdum hendrerit laoreet convallis. Consequat quam fermentum Curabitur fames natoque
        fringilla et convallis tempor urna. Cursus pellentesque sit condimentum nec lorem ut quam et id at. Lacinia.
      </p>
      <p>
        Justo tellus tincidunt faucibus ac tortor elit et non elit semper. A risus ut ligula ac dignissim a elit Nullam
        Quisque malesuada. Ullamcorper ipsum aliquet condimentum et ante tristique eros congue vel elit. Curabitur
        metus ligula eros sed quis Nunc Aenean Nullam convallis mauris. Vel ut dui volutpat et Morbi est eu condimentum
        Mauris orci. At molestie libero hac urna id mus auctor Vestibulum Aenean tellus. Sed felis.
      </p>
      <p>
        Nunc accumsan Curabitur Vivamus justo molestie hendrerit justo Donec porttitor Sed. Id Vestibulum nunc
        tincidunt elit neque porttitor risus porttitor sed consequat. Amet aliquet nascetur tortor faucibus magna
        Aenean tincidunt leo vitae pretium. Platea mus Curabitur Vestibulum rhoncus cursus Vestibulum et tincidunt diam
        malesuada. Pede vitae wisi Vestibulum urna Sed ipsum ac wisi id at. Augue ac vitae ut eget sed mattis commodo
        Aenean habitasse at. Habitant nibh dui.
      </p>
      <p>
        Mi justo tempor eu risus Curabitur nunc ac ut mus wisi. Vitae penatibus sagittis ligula a Sed id eros sed mi
        elit. Nulla a Donec est habitant Pellentesque interdum Lorem Curabitur nibh pretium. Ac laoreet In et
        Pellentesque Nam accumsan eget dolor cursus et. Mi Phasellus consectetuer turpis massa Sed turpis elit tellus
        venenatis pellentesque. Convallis id risus mattis ipsum Proin porttitor id condimentum laoreet lacinia. Diam.
      </p>
      <p>
        Feugiat sed habitasse Vivamus enim Quisque eros purus Nam et nec. Quis lacus dapibus Curabitur vel vitae
        accumsan sapien fermentum Ut urna. Sed iaculis leo odio libero sed pretium vitae Phasellus interdum tellus.
        Vestibulum egestas tortor pellentesque Integer ac a laoreet auctor suscipit Vestibulum. Tortor interdum Vivamus
        Suspendisse lacus Vestibulum laoreet diam nec cursus accumsan. Ut semper nulla et at id dolor id Phasellus
        interdum auctor. Donec risus.
      </p>
      <p>
        Adipiscing magna fringilla elit euismod leo sed sem In ut nec. Id morbi tellus Phasellus quis eu egestas vitae
        condimentum sed Nam. Nibh nisl nonummy interdum a tincidunt In tortor tempus ridiculus congue. Tellus augue
        interdum sed Aliquam suscipit Aliquam sapien leo libero et. Vestibulum metus Cum Ut leo pede laoreet Maecenas
        cursus Nullam pede. Tincidunt ligula Phasellus pellentesque consectetuer urna quis Vestibulum hendrerit mauris
        interdum.
      </p>
      <p>
        Dui In sem mauris accumsan lacinia volutpat Curabitur et iaculis eu. Pellentesque Curabitur augue eu non sit
        facilisi consequat Lorem convallis id. Malesuada nibh Aenean massa congue ante non facilisi ornare diam vel.
        Massa sit porta et dictumst Curabitur sit wisi turpis ullamcorper malesuada. Et lacinia egestas Ut diam
        fringilla felis porttitor gravida magnis tellus. Nunc Curabitur pretium lorem vitae laoreet Pellentesque
        condimentum parturient ante.
      </p>
      <p>
        Condimentum lacus pellentesque adipiscing tincidunt dolor tellus pretium Vestibulum quis semper. Ut sapien Sed
        In neque tellus ipsum libero eget ullamcorper metus. Amet leo lobortis tempus interdum hendrerit lacinia ut Sed
        condimentum massa. Dignissim laoreet cursus neque consectetuer elit vel in sit vitae augue. Justo laoreet a
        ligula dui sagittis Proin senectus mattis sem nisl. Elit lacus Vestibulum Morbi convallis commodo tempor
        dapibus commodo Vivamus vitae. Id auctor.
      </p>
      <p>
        Euismod nec Vestibulum tellus habitant lacus leo felis Pellentesque enim et. Tempus nibh elit Phasellus tortor
        id sollicitudin eget Sed sem enim. Libero pretium egestas Mauris ligula Sed accumsan Integer tempor aliquam
        turpis. Cras quis dignissim elit Nam justo turpis id Vestibulum Donec eget. Nibh enim nunc pede porttitor non
        Mauris Proin convallis pulvinar pretium. Adipiscing felis urna ut nonummy Aliquam natoque velit faucibus ante
        mauris. Vestibulum pellentesque.
      </p>
      <p>
        Morbi dolor consectetuer hac elit sed ante volutpat nibh mollis ac. Praesent wisi est turpis elit a faucibus
        senectus Nam porta Sed. Risus at enim malesuada tellus dui orci mauris tristique amet lorem. Pellentesque
        mollis In tempus convallis eu velit eros enim dui venenatis. Elit vitae consectetuer Vestibulum Nunc et id
        Vivamus Vestibulum vitae porttitor. Consequat felis convallis sit molestie ipsum ac orci lacinia nibh
        penatibus. Phasellus condimentum convallis.
      </p>
    </div>
  </body>
</html>


ou plus sympa avec jquery et le meme principe "fixed" 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
<!--
        #content {
    width:500px;
    margin:auto;
    border: thin solid #0A0000

    }
    .social {
      position: fixed;
      top: 140px;
      left: 0;
      display: none;
      background: #000000;
      border: 1px solid #111111;
      -webkit-border-radius: 0px 50px 50px 0px;
      -moz-border-radius: 0px 50px 50px 0px;
      border-radius: 0px 50px 50px 0px;
      width: 70px;
      height: auto;
      padding: 30px 30px 30px 30px;
      filter: alpha(opacity=85);
      opacity: .85;
    }

    a.bouton{
      position: fixed;
      text-decoration: none;
      top: 80px;
      left: 0;
      font-size: 14px;
      letter-spacing: -1px;
      font-family: verdana, helvetica, arial, sans-serif;
      color: #fff;
      padding: 20px 40px 20px 15px;
      font-weight: 700;
      background: #333333 url(images/plus.png) 85% 55% no-repeat;
      border: 1px solid #444444;
      -webkit-border-radius: 0px 20px 20px 0px;
      -moz-border-radius: 0px 20px 20px 0px;
      border-radius: 0px 20px 20px 0px;
      display: block;
    }

    a.bouton:hover{
      padding: 20px 40px 20px 20px;
      background: #222222 url(images/plus.png) 85% 55% no-repeat;
      border: 1px solid #444444;
      -webkit-border-radius: 0px 20px 20px 0px;
      -moz-border-radius: 0px 20px 20px 0px;
      border-radius: 0px 20px 20px 0px;
    }

    a.active.bouton {
      background: #222222 url(images/minus.png) no-repeat 85% 55%;
    }
    -->
    </style>
  </head>
  <body>
    <div class="social">
      <p>
        <a href="http://#"><img src="images/facebook.png" width="64" height="64" alt=""></a>
      </p>
      <p>
        <a href="http://#"><img src="images/twitter.png" width="64" height="64" alt=""></a>
      </p>
      <p>
        <a href="http://#"><img src="images/skype.png" width="64" height="64" alt=""></a>
      </p>
    </div><a class="bouton" href="#">Follow Me</a>
    <div id="content">
      <p>
        Lorem ipsum dolor sit amet consectetuer tincidunt Curabitur Curabitur tristique et. Vestibulum nunc turpis elit
        Integer penatibus risus lorem massa elit lobortis. Pretium Morbi convallis elit neque massa Duis nibh cursus
        Fusce iaculis. Ac venenatis id suscipit wisi Ut Nunc Curabitur In metus ac. Integer justo lacinia wisi at orci
        laoreet leo cursus Aenean est. Felis metus nascetur condimentum Vivamus consectetuer eros sed In enim sapien.
      </p>
      <p>
        Et Cum Pellentesque rutrum et tortor pulvinar elit dis ultrices elit. Ac nibh nisl Curabitur mauris dui Donec
        orci ligula fames hac. Justo nisl parturient Curabitur tristique mauris ut urna ac risus Morbi. Ligula at dolor
        est dolor congue tincidunt sagittis malesuada Vestibulum augue. Condimentum Sed semper urna dignissim convallis
        convallis quis mus congue augue. Gravida non Aenean tincidunt Aliquam urna Aenean nibh ac Nulla.
      </p>
      <p>
        Accumsan Vivamus mauris quis sapien tristique Vivamus pellentesque aliquam accumsan Pellentesque. Fringilla id
        magna dui orci at metus cursus dui nunc Quisque. Lorem et quis Vestibulum urna eros quis at iaculis felis non.
        Id id sapien mollis nunc Nunc id fringilla ac et Pellentesque. Tortor Phasellus ut platea Aliquam sagittis Ut
        amet Vestibulum Maecenas vestibulum. Id consequat quis ante Nunc nec semper lacus a quis.
      </p>
      <p>
        Hendrerit sem ut Mauris tempor pede Vestibulum Nam elit lacinia Phasellus. Donec ac augue vitae quis tempor
        elit pede leo quis amet. Habitasse Curabitur pretium nisl vel pede eget tincidunt Curabitur justo ante. Massa
        sit semper adipiscing et turpis mauris est penatibus metus Vestibulum. In metus consequat tincidunt sem in
        neque morbi orci consectetuer ornare. Faucibus fames semper fringilla hendrerit vel pharetra interdum porta
        pretium purus. Urna nisl vitae.
      </p>
      <p>
        Adipiscing nec et risus semper Donec est nec et consequat elit. Tellus eu wisi Suspendisse leo vel venenatis
        Vestibulum wisi pellentesque a. Vestibulum cursus enim tempus netus Fusce Cum nulla id sem enim. Wisi vitae ut
        In congue ac quis interdum hendrerit laoreet convallis. Consequat quam fermentum Curabitur fames natoque
        fringilla et convallis tempor urna. Cursus pellentesque sit condimentum nec lorem ut quam et id at. Lacinia.
      </p>
      <p>
        Justo tellus tincidunt faucibus ac tortor elit et non elit semper. A risus ut ligula ac dignissim a elit Nullam
        Quisque malesuada. Ullamcorper ipsum aliquet condimentum et ante tristique eros congue vel elit. Curabitur
        metus ligula eros sed quis Nunc Aenean Nullam convallis mauris. Vel ut dui volutpat et Morbi est eu condimentum
        Mauris orci. At molestie libero hac urna id mus auctor Vestibulum Aenean tellus. Sed felis.
      </p>
      <p>
        Nunc accumsan Curabitur Vivamus justo molestie hendrerit justo Donec porttitor Sed. Id Vestibulum nunc
        tincidunt elit neque porttitor risus porttitor sed consequat. Amet aliquet nascetur tortor faucibus magna
        Aenean tincidunt leo vitae pretium. Platea mus Curabitur Vestibulum rhoncus cursus Vestibulum et tincidunt diam
        malesuada. Pede vitae wisi Vestibulum urna Sed ipsum ac wisi id at. Augue ac vitae ut eget sed mattis commodo
        Aenean habitasse at. Habitant nibh dui.
      </p>
      <p>
        Mi justo tempor eu risus Curabitur nunc ac ut mus wisi. Vitae penatibus sagittis ligula a Sed id eros sed mi
        elit. Nulla a Donec est habitant Pellentesque interdum Lorem Curabitur nibh pretium. Ac laoreet In et
        Pellentesque Nam accumsan eget dolor cursus et. Mi Phasellus consectetuer turpis massa Sed turpis elit tellus
        venenatis pellentesque. Convallis id risus mattis ipsum Proin porttitor id condimentum laoreet lacinia. Diam.
      </p>
      <p>
        Feugiat sed habitasse Vivamus enim Quisque eros purus Nam et nec. Quis lacus dapibus Curabitur vel vitae
        accumsan sapien fermentum Ut urna. Sed iaculis leo odio libero sed pretium vitae Phasellus interdum tellus.
        Vestibulum egestas tortor pellentesque Integer ac a laoreet auctor suscipit Vestibulum. Tortor interdum Vivamus
        Suspendisse lacus Vestibulum laoreet diam nec cursus accumsan. Ut semper nulla et at id dolor id Phasellus
        interdum auctor. Donec risus.
      </p>
      <p>
        Adipiscing magna fringilla elit euismod leo sed sem In ut nec. Id morbi tellus Phasellus quis eu egestas vitae
        condimentum sed Nam. Nibh nisl nonummy interdum a tincidunt In tortor tempus ridiculus congue. Tellus augue
        interdum sed Aliquam suscipit Aliquam sapien leo libero et. Vestibulum metus Cum Ut leo pede laoreet Maecenas
        cursus Nullam pede. Tincidunt ligula Phasellus pellentesque consectetuer urna quis Vestibulum hendrerit mauris
        interdum.
      </p>
      <p>
        Dui In sem mauris accumsan lacinia volutpat Curabitur et iaculis eu. Pellentesque Curabitur augue eu non sit
        facilisi consequat Lorem convallis id. Malesuada nibh Aenean massa congue ante non facilisi ornare diam vel.
        Massa sit porta et dictumst Curabitur sit wisi turpis ullamcorper malesuada. Et lacinia egestas Ut diam
        fringilla felis porttitor gravida magnis tellus. Nunc Curabitur pretium lorem vitae laoreet Pellentesque
        condimentum parturient ante.
      </p>
      <p>
        Condimentum lacus pellentesque adipiscing tincidunt dolor tellus pretium Vestibulum quis semper. Ut sapien Sed
        In neque tellus ipsum libero eget ullamcorper metus. Amet leo lobortis tempus interdum hendrerit lacinia ut Sed
        condimentum massa. Dignissim laoreet cursus neque consectetuer elit vel in sit vitae augue. Justo laoreet a
        ligula dui sagittis Proin senectus mattis sem nisl. Elit lacus Vestibulum Morbi convallis commodo tempor
        dapibus commodo Vivamus vitae. Id auctor.
      </p>
      <p>
        Euismod nec Vestibulum tellus habitant lacus leo felis Pellentesque enim et. Tempus nibh elit Phasellus tortor
        id sollicitudin eget Sed sem enim. Libero pretium egestas Mauris ligula Sed accumsan Integer tempor aliquam
        turpis. Cras quis dignissim elit Nam justo turpis id Vestibulum Donec eget. Nibh enim nunc pede porttitor non
        Mauris Proin convallis pulvinar pretium. Adipiscing felis urna ut nonummy Aliquam natoque velit faucibus ante
        mauris. Vestibulum pellentesque.
      </p>
      <p>
        Morbi dolor consectetuer hac elit sed ante volutpat nibh mollis ac. Praesent wisi est turpis elit a faucibus
        senectus Nam porta Sed. Risus at enim malesuada tellus dui orci mauris tristique amet lorem. Pellentesque
        mollis In tempus convallis eu velit eros enim dui venenatis. Elit vitae consectetuer Vestibulum Nunc et id
        Vivamus Vestibulum vitae porttitor. Consequat felis convallis sit molestie ipsum ac orci lacinia nibh
        penatibus. Phasellus condimentum convallis.
      </p>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
    <script type="text/javascript">
$(document).ready(function(){
    $(".bouton").click(function(){
        $(".social").toggle("slow");
        $(this).toggleClass("active");
        return false;
    });
    });
    </script>
  </body>
</html>


comme le code est trop long en base 64 voila les images de cet exemple !


a+
0