Membuat menu social media tooltip hanya dengan css3

Ekhem..... lagi - lagi css3..

    Hallo sobat blogger. hehe, kali ini ane berhasil ngemodif ni menu footer, yang tentunya gak kalah keren ama menu-menu yang laennya.. :D, menu ini simple bro, ngeditnyapun enteng, untuk liat demonya klik disini.

nah untuk tutorialnya, sebagaimana ane ngasih tutorial, gak perlu ribet, gak perlu edit2 HTML segala macem yang mungkin sobat keblinger, atau males ngeditnya, langsung aje pasang ni menu dengan cara add gadget, klik add html/javascript, pastekan kode dibawah ini, jangan lupa, edit alamatnya sama punya ente yaah, kalo bingung gimana ngeditnya, sobat perhatikan markup yang ini 

<li><a href="#" class="dribble"><small>Dribble</small></a></li>

Nah, hapus tanda pagarnya dan pastekan linknye disitu yeh.. hihi.

   oke, ini scriptnya. 

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: #fff url(pattern_40.gif) top left repeat;
    margin: 0;
    padding: 0;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
}

#masterpanel {
    background-color:#161616;
    background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
        background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
    -moz-box-shadow:0 1px 10px #00c6ff;
    -webkit-box-shadow: 0 1px 10px #00c6ff;
    box-shadow:0 1px 10px #00c6ff;
    position:fixed;
    bottom:0;
    left:0;
    z-index:999;
    width:100%;
}
#masterpanel ul {
    padding:0;
    margin:0;
    float:left;
    width:80%;
    margin:0 10%;
    list-style:none;
    font-size:1em;
}

#masterpanel ul li {
    padding:0;
    margin:0;
    float:left;
    position:relative;
    border-right:1px solid #555;
}

#masterpanel ul li:first-child { border-left:1px solid #555; }

#masterpanel ul li a {
    margin:5px;
    margin-left:20px;
    margin-right:20px;
    float:left;
    height:36px;
    width:36px;
    text-decoration:none;
    color:#333;
    position:relative;
}

a.dribble { background:url(http://png-4.findicons.com/files/icons/2419/socialshift/32/dribble.png) no-repeat; width:26px;}
a.forrst     { background:url(http://png-5.findicons.com/files/icons/2398/home_archive_freebies_about_contact_rss_twitter_social_media_sleek_icons/32/forrst.png) no-repeat; }
a.facebook      { background:url(http://png-2.findicons.com/files/icons/524/web_2/32/facebook.png) no-repeat;}
a.twitter     { background:url(http://png-5.findicons.com/files/icons/524/web_2/32/twitter.png) no-repeat;}
a.google     { background:url(http://png-3.findicons.com/files/icons/2684/social_media_icons/32/google_plus.png) no-repeat;}
a.linked    { background:url(http://png-2.findicons.com/files/icons/832/social_and_web/32/linked_in.png) no-repeat;}
a.yahoo    { background:url(http://png-4.findicons.com/files/icons/2229/social_media_mini/32/yahoo.png) no-repeat;}
a.myspace    { background:url(http://png-1.findicons.com/files/icons/524/web_2/32/myspace.png) no-repeat;}



#masterpanel a small {
    background:#000;
    text-align:center;
    width:70px;
    padding:5px;
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
    border-radius:3px;
    display:none;
    color:#fff;
    font-size:0.8em;
    text-indent:0;
}

#masterpanel a:hover small {
    display:block;
    position:absolute;
    top:0px;
    left:50%;
    margin:-40px;
    z-index:9999;
    -moz-animation:mymove .25s linear;
    -webkit-animation:mymove .25s linear;
}
@-moz-keyframes mymove {
    0%{ -moz-transform:scale(0,0); opacity:0;}
    50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
    75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
    100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
    0%{ -webkit-transform:scale(0,0); opacity:0;}
    50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
    75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
    100%{ -webkit-transform:scale(1,1); opacity:1;}
}
</style>
</head>
<body>

<footer id="masterpanel">
    <ul id="mainpanel">
    <li><a href="#" class="dribble"><small>Dribble</small></a></li>
    <li><a href="#" class="forrst"><small>Forrst</small></a></li>
    <li><a href="#" class="facebook"><small>Facebook</small></a></li>
    <li><a href="#" class="twitter"><small>Twitter</small></a></li>
    <li><a href="#" class="google"><small>Google+</small></a></li>
    <li><a href="#" class="linked"><small>LinkedIn</small></a></li>
    <li><a href="#" class="yahoo"><small>yahoo</small></a></li>
    <li><a href="#" class="myspace"><small>Myspace</small></a></li>
    </ul>
</footer>
</body>
</html>

Opsi : Jika sobat ingin menambahkan beberapa acount menu lagi,biar lebih mudah, sobat tinggal copas aja script bagian <li><a href="#" class="myspace"><small>Myspace</small></a></li> lalu ganti myspace nya dengan kesukaan sobat, inget, kalo dibagian kode class="janganadaspasiyah" tapi kalo dibagian <small>may space, boleh ada spaci, </smal>, karna ini yang nanti jadi hover mousenya. nah kalo udah, selanjutnya sobat copy lagi kode

a.myspace    { background:url(isi link icon) no-repeat;} kode a.myspace diganti dengan nama acount menu yang baru sobat tambahkan tadi. dan seterusnya seperti itu jika ingin menambahkan menu baru. :)

Dan untuk script yang berwana kuning diatas, itu merupakan warna hover tooltipnya, sobat bisa ganti sesukanya. :) 

Kalo masih bingung, koment aja dibawah, admin pasti bales :)

Dan kalo mau copas artikelnye, ane rasa sobat tau tentang etika copas :)

Happy blogging :)