Floating Social Icon With Jquery

Obachti 95

Blogger friendly sharing

Floating Social Icon With Jquery

Jane Doe By Jane Doe 13
Dari banyaknya social icon yang bisa dipasang dipinggiran blog kamu, kayaknya social ini juga bagus dan patut koq kalo mau coba dipasang diblognya sahabat. Dengan jquery yang membuat float lebih halus saat easing menjadi kelebihan social icon satu ini. kalo kamu udah punya social icon yang dipasang di blog, coba bandingkan dengan dengan yang satu ini. Bagus mana?


Banyak sih kelebihan memasang social icon, blog kita jadi ada sebuah fanspage disitus besar. atau hanya sekedar menambah follower. saya sendiri juga tertarik dengan social icon, apalagi yang satu ini. kalo screenshot gambar diatas kurang memuaskan, saya sudah sediakan demonya diblog saya yang lain. Link demonya dibawah ini, silahkan dilihat!
Yang minat pasang social icon float satu ini, berikut bahan yang diperlukan ;

CSS

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Jquery dan JavaScript 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

 HTML

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Nah, untuk code yang saya beri warna biru. sudah jelas dong, kalo itu harus diganti dengan ID yang sesuai, kalo sobat misalnya belum punya akun pinterest dan malas membuat cukup hapus aja bagian pinterestnya.

Cara Memasang di Blog

  1. Letakkan kode CSSnya diatas tag ]]></b:skin>
  2. Jquery dan JavaScriptnya letakkan diatas tag </head>
  3. HTMLnya letakkan diatas tag </body>
Jika sudah berhasil memasangnya setidaknya jangan lupa lah untuk menyapa saya melalui kotak komentar, atau mungkin masih ada yang kurang jelas bisa langsung kritik di kotak komentar juga. Widget ini saya dapat dari blognya Maskolis, blognya dengan url http://www.maskolis.com/. Coba kamu main kesana, banyak blogger yang berkhutbah melalui blogger satu ini. Terima kasih Maskolis

13 comments

  1. Bisa dicoba nih kawan cara buat floating share untuk sosial iconnya

    ReplyDelete
  2. keren sob
    kapan-kapan bisa dicoba

    ReplyDelete
  3. It’s really a great and helpful piece of information. I’m satisfied that you shared this useful information with us. Please stay us informed like this. Thanks for sharing. Also check SMS Bomber Apk & ES File Explorer Pro.

    ReplyDelete
  4. Download Game Killer for iOS
    to hack Games on iPhones and iPads.
    Download IPTV Apk
    to watch TV on Phone.
    Download Xender for PC
    and use Xender app on your PC

    ReplyDelete
  5. This website is very helpful for me. Also check YoWhatsApp and Megabox HD Apk from my blog.

    ReplyDelete
  6. Nice Comment.

    If you want to repair PSt files then download the scanpstexe software.

    ReplyDelete

Post a Comment