floating sosial widget

moonroemoort

widget

7 December 2013

Belum ada komentar

berikan kesempatan pada pengunjung anda untuk berbuat baik dengan memberi tombol share

berbeda dengan css flying out menu kali ini moonroemoort akan share floating sosial widget
ini sangat cocok untuk anda yang mempunyai sidebar yang tidak luas ...
ikuti langkahnya

• masuk dashboard
• TATA LETAK > add gadget
• copy paste kode di bawah ini

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    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/AVvXsEho2r9xNqqM1hUIKJXeZyKSEbl24JWnLUiNSpv6TuNnlvBsSJLRQQUgBzf4oHf5ate6bhVwnoGuOxOFVag8R4hImEbhGvVbEL3u5_JxwQe2Eal6qNymjTNUY4_RA1_KHcMXZih-2nHsko0/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCoKz1EIChTUelDqqIlh6JOm7MrFIk84qUFGY0UMynRXHXNR8RpX4KdYhkW44A8oOjgqeUJGfOjSKyc8filJEi6SzPslesdw1r9GulHAOZBgGjAECQMM6eg3qYIVa7yWalM4ieI69ACn0/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIISqxUyP6h7dUUhPuz1eMJ6-YIa35APDuVnvLI4SQf9y5wR8YCtG3kjL_pts1RuNPLKLFKpJc9e1ZvfxCnUQw4NjdpRUGkdTDC0Ff1ufYB7Gv8c6naqmZVE8YG8Wa1xA1p9Y7mIKFu8/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKLsh84WpVqe8DVuVxYK7aMe_QxYzGC84fU0pALWk_E8kWvjZGTwNQkHJIexOjJZi8z5ZXw3UAV1j2xXTgAvIrmjxt42FQYh1o4Sk2uh2_MHn1FdDliFJD_BcYsssgcDOpNlD0zMSf0Uk/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAySeCtdvKobH2J_Ue2Ni5k7gRSBJWx2rAYgIVUj_FqA2vcAE4JJqzSQPHFwemkwGny1hxyYguXe51wFtxz7SxpXOw9Yrc-vg_Wp-HqGJol4kz1BzqIAxm3H3bCS4fk0C1mm9StrhSgck/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>
<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<br />
<ul id="social">
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="googleplus"><a href="#" title="Google Plus"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="rss"><a href="#" title="Rss"></a></li>
<li class="pinterest"><a href="#" title="Pinterest"></a></li>
</ul>

• klik simpan
• jika anda sudah punya kode jquery/ sudah ada kode jquery di blog anda hapus kode berwarna hijau
  lebih jelasnya hapus kode ini
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 keterangan : ganti tanda pagar [#] dengan url tujuan anda ...