CARA MEMASANG SOSIAL MEDIA '' SLIDE OUT '' KEREN DI BLOG

Hey sobat! Hari ini saya akan berbagi Media Sosial widget yang mengagumkan untuk di pasang blog anda. Pada hari-hari ini popularitas sosial media sangat penting bagi sebuah blog karena popularitas media sosial membawa pandangan banyak orang dan.Widget ini saya pasang di kiri dan memiliki lima sifat media sosial yaitu Facebook, Twitter, RSS, Google plus dan Pinterest. dan jika mouse di gerakkan ke widget tsb, maka akan muncul dengan efek slide out...ok langsung aja bro...cekidot

• buka blog sobat
• klik TATA LETAK
• klik TAMBAH GADGET
• klik HTML/JAVASCRIPT
• Copas kode di bawah

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    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/AVvXsEjFvv-fndr7BE1NWqyadiwDaHSAZrHm6MiKjb_5_nZWtIUmHXPbCI8B75B0Vxm5mRSWrjha2tSMqcZUvKtSwWzfOYwXzjoHAjKMN9_VgfjftdfYtKriVetHIAkUHHTBPaxz4ydNSDSwg7s/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21ysggKEzQgXSCWOVt1E5LF6HLU8DmzXyA9Qyuxe6Vesw2W9p_u7R6u7KpUHat6xkxGttqyLpntiX-hi0b9ZhPJ-MfQ5cIDZKP_ueKxVvARvVYcZ4knbnRzJOraTm1BjKabmxw3eUU4I/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q8MhUDexjH44_pnSci9QkFsnJGDqgIM5asNONdwK4JLtWUJMWYVJlWeEDZVY4PIHf5lB_SljX_YuXRz5DBkOnnMVSflhXsEioQulokQNYGVSxkR6cDQ0kwJ70Lyv4JAfYQXTao5ZIFc/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDK5SxrcG6SLgxb_fQc9fTtiWXIJkqFCTpOPboWdYK8KGRw2xlGktNVBpNIYQX_7pmpUKvm_AJ_MVdOtuklEeo9Gjk4i_5Cz1fexGJ98di_G18KK0GFnyGlGejNnDfrpo04y0LeKUcBQ/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrKfhlx8tVxnFeUNiJPjoTIQxb7ukaZd4RG8rWQnzGuV-NQzGqXp3cLIPjlOKf1ztVlhGK4K0tw1xn5PuQlQIheaglSow66iJK7tf4WtAcaNZ3SVcMlSDjgtD5DPTAKToM1tJlB3SQANs/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>
<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>

• ganti warna orange dengan sosmed sobat
• terakhir klik simpan / save

>>> SELAMAT  MENCOBA <<<