cara memasanag sheren media social melayang

Sahabat

cara membuat atau memasanag sheren media social melayang di sebelah cakep deh coba sahabat lihat gambarnya

kalau seneng  silahkan sahabat mau menggunakannya untuk mengcopy pastekan  di blog sahabat.
berhubung waktu sudah magrib jadi g usah basa basi lagi langsung ajja ikuti tutorialnya sahabat.

temukan kode </body>
dan letakan di atasnya  kode tersebut

<style type='text/css'>
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;  
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -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;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN1aPA0L_V9WBq9cgdLgU7AzRC4XG8ZYre6LYF80rY3VE5-atXssubKfQ4W-S1TN3wCXyeRiE2nBM1sUxWbSWCs4IA3GKcHN6Gzwiwbp9LISHJb9volecWb9SU21z7rT87O9Uasx8NiqU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYuttmLjfZYJwf19Z12_p74IuHMaB8CedYG9U97METrzntcOoz5wSU9MtEHFNItbNyWCO10w4dzPpu1bR8e03M8PacpA57VMpiG64E6tqYDQBsDjSya03SCykxuLw31dFyeSuZuW-mfo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPl5iN-1jDgLzWggD0OAyjNwgBr5wUFhR1bxEhhS7PHjKAm32PRMXojTRcIYcli3bnvnh-l8njvXtraug1kitUan-MAvMIx64aYfbLh0vXBby9gU-uXwPSyqDMvxs7XZQSitx6OS7lzc/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5RbuW2lLAUMxN4xOqXiPxrZnmo7zlWXUHQi7lYX6vlPu1byZLkX0Z-WhreJoVjydVjd6Dp97IVMfvDuKMIzv_7UDzDpeobYLFsv3AFWVSzMkkifENw02uFAy9UaxtRIdTNENfdE4Btg/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsoqRdZ-sFUnKLx4cH3ak7eqO0SAMurjj1yaglJcq7WQMVZxG8mQOrJDKGHdU4PonEi-zCebEAzb14X4umfQQYfpY1GD-7OHWicT-esY0lWdMAO1gp51Lh3XKn5n-ogl4K5d-cWXL61dU/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
$(function () {
    $(&#39;#social a&#39;).stop().animate({
        &#39;marginLeft&#39;: &#39;-85px&#39;
    }, 1000);

    $(&#39;#social &gt; li&#39;).hover(
        function () {
            $(&#39;a&#39;, $(this)).stop().animate({
                &#39;marginLeft&#39;: &#39;-2px&#39;
            }, 200);
        },
        function () {
            $(&#39;a&#39;, $(this)).stop().animate({
                &#39;marginLeft&#39;: &#39;-85px&#39;
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='https://twitter.com/desalinggajati1' title='Twitter'/></li>
 <li class='googleplus'><a href='https://plus.google.com/103936483444691797511' title='Google Plus'/></li>
 <li class='facebook'><a href='https://www.facebook.com/desa.linggajati/' title='Facebook'/></li>
 <li class='rss'><a href='#' title='Rss'/></li>
 <li class='pinterest'><a href='https://id.pinterest.com/desalinggajati/' title='Pinterest'/></li>
</ul>

selesai des sahabat