DickeyMaru DickeyMaru
DickeyMaru v7 200k IDR
Guest
Book

Floating Social Bookmark

Author: HarisKhan 05.03 0 Comments
Halo sobat Cahaya ilmu selamat malam sekarang saya akan share tutorial Floating Social Bookmark dengan Efek Easing
floating social bookmark


Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak.sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
1.Login ke Blogger
2.Masuk ke Template >> Edit HTML (centang expand widget templates)
3.Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.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/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/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;}
4.Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut 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>
Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
5.Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini 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 masing-masing jangan sampai keliru dengan ID tetangga.Terakhir, Save Templates
Nah itu tadi tutorial membuat floating social bookmark dengan efek easing sekian semoga bermanfaat ^_^
Share and Backlinks
About Hariskhan
Awalnya cuman iseng main blog lama-lama jadi Gimana gitu saya senengngotakngatik,udah aboutnya sekian aja jangan kepo, pliss komentar di Artikel ini Terimakasih
You Might Also Like This

Tidak ada komentar:

Posting Komentar

COMMENTS SOBAT :D

Labels

Like (y)

Pengikut

Hariskhanishaq

© 2008-2013 DickeyMaru v7 | design by Dark Ard ???? RedesignHarisKhan | Some Rights is Reserved
Selamat datang! di blog cahaya ilmu semoga artikel disini bermanfaat ^_^ ~