Pasang Sosial Network Melayang Baru Facebook, Twitter, Rss, Google+, Pinterest

Sebelumnya banyak sekali para blogger mencari banyak tentang cara mempercantik blog dengan mencari artikel diinternet. Tutorial ini membahas tentang bagaimana cara memasang widget sosial network melayang paling baru 2013 ini. Coba anda lihat pada bagian demo dibawah berbentuk gambar dan disana saya akan jelaskan bagaimana cara memasangnya.










Untuk memulainya anda bisa membuka blogger anda terlebih dahulu dan pastikan anda sudah dalam keadaan di bagian pengeditan template. Jika semua sudah tinggal kita lihat contoh yang sudah jadi dibawah ini.



 

Mari kita pasang dengan css dibawah ini :
Bila blogger anda sudah terpasang javascript ini, jangan menempelnya lagi (harus dihapus salah satunya).

(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

<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/AVvXsEinpwGcMiBI_abjEwK71e1ehHPJIp38Rs1ilketM-MzD1M-2L8XvCdF82m8cMpvQwSsSIMO6xWaCe4-AW8wUBeEo5DLSFGGPWZTf60geuf8GSmH3iGaNLQqxvR_a5LgO_JiY7a9KEG1MdQ/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3fOiRS5AvvtoHI1xj9xjExOpEGTUdTh3TtH5fYX_V1yslSS5WaydzUEuYPjNDz5GedtRbJ68-GuGZIU6kUSl-n2vack3UYh1Afe5dpEcRFwwkzALabHhqyA_XdZAqxmQU9MR8fwlAfs/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkAHb0SPuzdPVEYPBo_uxShY-2p32Wn4eCLCgwNNlqvapxatH04y059-ZI3aCUv-5OC18dXVpMAVjQ0i2pM-974or9SwrZvunVhVEDSDGA-rTsB4EhOf53mi4DuNjrHTRooDLjcvpezA/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjp-yFnd98Ix9N_s0oL70u831V388C9rz0jNEcgmHjHwFlNAD5M84LQ3RVaCKp6CpwZJf0BPm-cEEjI_ewer5sGshGKqh1UenkFIJ_FoVHOl3QPn9DmTK-tlGafc8jSVYSVFl5Tz58Eks/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwfL6sxUJnhs052PaKZqM2KMC2VMXjcGr8pnKOAM3bFaP2e6PVON5pisNXrQ2v_34t8O3bTucNQDyJ5pQz5IOAdTbiScgEOzMFe_1uQRNJvtJa8XpQT03I9kzAJsZwLxQra_X6tTfa8ck/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 # dengan url anda inginkan, seperti facebook twitter dan lainnya.
Hapus javascript yang ditandai warna putih jika sudah ada dalam blog anda.

Lihat hasilnya dan jangan lupa pembuatnya by Rifki Andrean. Terimakasih atas kunjungannya. SALAM BLOGGER !