cara membuat floating sosial bookmark dgn efek easing

zaidan-nah kembali ane share trik baru yaitu "cara membuat floating sosial bookmark dgn efek easing"yaitu sosial bookmarking yg ada di sebelah kanan blog dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit dan tentu saja ringan


jika agan arahkan cursor kesana maka secara perlahan namun pasti dia akan keluar dgn mantapnya,keren kan 

gmn cara masangnya??
  • masuk ke blogger
  • ambil template
  • ambil EDIT HTML
  • nah karna tampilan edit HTML udah baru,jadi nyari harus buka dulu tanda panahnya 

  • nah setelah itu cari kode ]]></b:skin> 
  • nah letakan kode css ini tepat di ATASNYA
.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;
}

  •  berikutnya lanjut pada penambahan efek jquery dan javascript,letakan kode dibawah sebelum </head>
<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>
note:apabila kode berwarna biru sudah ada di template agan tinggalkan aja


  • selanjutnya memasang widget tsb,letakan kode dibawah sebelum </body> 
<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>
Ganti tulisan warna biru diatas, dengan ID anda masing2.


  • simpan deh template agan
  • nah keren kan
semoga artikel diatas bermanfaat bgi agan2
sbg tanda terima kasih cukup agan klik tombol  g+ di sidebar blog ini
terima kasih
thanks to:maskolis



5 comments:

Adhi Blogz said...

wuih...keren tipsnya thanks...

Saiful Anas said...

Kerennn...


Jangan Lupa Koment Back ya Sobat...

Oiya Jangan Lupa Klik G+ nya ya Makaish Sebelumnya....

wulan adeseptiani said...

gan, pake template apa?
mohon bocorannya.. kalo bisa sekalian berbagi... heheeee
terima kasih

zaidan Xzanderz said...

maaf gan ng bisa bagi ^_^

Mahadil Amin Mahfullah said...

Thanks gan

Post a Comment

hy agan&sista,terima kasih telah membaca postingan saya,saya harap agan2&sista memenuhi peraturan dibawah ini

1.terima kasih telah membuka kotak komentar
2.komen agan&sista adalah penyemangat saya dlm men-update postingan
3.saya mohon jgn nge-SPAM,link hidup(LIVE LINK)
4.saya harap komen agan sgt revelan/nyambung dengan postingan
5.dan saya minta maaf karna dihilangkannya openid dan url karna link external terlalu byk
6.1x terima kasih udah komen di blog saya

terima kasih