Floating Social Bookmark dengan Efek Easing | Blog Krizeer

floating social bookmark

    Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Floating Social Bookmark dengan Efek Easing. 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. Untuk widget kali ini saya menambahkan 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/-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;
}
 4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut di atas tag </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>
5. Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
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>
6. Terakhir simpan template
referensi dari maskolis.com

12 komentar untuk "Floating Social Bookmark dengan Efek Easing | Blog Krizeer"

  1. blognya makin mantap \o/, keren kan tutorial dari kang ismet :-bd

    BalasHapus
  2. gan demonya gak bisa

    BalasHapus
  3. Faisalabad is one of the biggest cities in Pakistan and the hub of the textile industry. It is widely acknowledged as the Manchester of Pakistan due to its large industrial role. The quality of the fabrics produced in this city has no parallel. In fact, the fabric is something of a specialty of Faisalabad. Many people from all over the country flock to this city for a spot of cloth shopping. We aim to provide you all of the best of Faisalabad at our store.

    BalasHapus
  4. Thanks for the helpful advice!
    betpark

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top