Widget Social Bookmark Dengan Efek Floating

Dewa Teknik
http://bacilkeren.blogspot.com
Pada kesempatan kali ini saya akan berbagi ilmu tentang dunia Blogger. Artikel sebelumnya tentang Cara Membuat Tulisan Admin membuat saya tertarik pada dunia blogger dan ingin mendalaminya. Saat ini saya jarang-jarang share tentang games atau software dikarenakan Web Hosting pada saat ini banyak yang mengalami masalah seperti dihapusnya suatu part file. Keadaan tersebut membuat saya ingin meninggalkan dunia games dan beralih di blogger.
Okee, kita kembali ke permasalahan semula. Jika kita ingin memperindah sebuah tampilan blog, saya sarankan agar menambahkan widget di dalamnya. Sekarang saya ingin share bagaimana membuat sebuah floating widget di sebelah kanan tampilan dengan efek easing.
Langsung saja kita meluncur ke tutorial berikut:
1. Log in ke akun blog sobat. Klik Disini bila belum login


2. Klik Rancangan --> Edit HTML --> Tambah Gadget --> Centang kotak kecil di samping tulisan Expand tempalte Widget (untuk tampilan blogger lama)


3. Klik menu DropDown di samping kiri tulisan "View Blog" --> Template --> klik "Edit HTML" --> Ctrl + A (untuk mengeblok semua tulisan) --> Ctrl + C (untuk mengcopy semua tulisan --> Ctrl + V (untuk paste kembali kode HTML) (untuk tampilan blogger baru)


4. Letakkan kode css dibawah ini tepat diatas kode ]]></b:skin> .

Klik show untuk melihat
.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;
}


5. Letakkan kode jquery dan javascript dibawah ini sebelum kode </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 berwarna biru, jika sudah terdapat dalam template sobat, hapus salah satu dan letakan kode diatas tanpa JQuer berwarna biru.


6. Letakkan kode javascript dibawah ini tepat sebelum kode </body> .

Klik show untuk melihat
<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>


Catatan:
  • "your FB" ganti kode berwarna biru tersebut dengan ID facebook sobat misalnya: www.facebook.com/arief.bachrul
  • "your twitter" ganti kode berwarna merah tersebut dengan ID Twitter sobat misalnya: https://twitter.com/ariefbachrul
  • "your G+" ganti kode berwarna pink tersebut dengan ID Google Plus sobat misalnya: http://plus.google.com/107171146441889632562
  • "your ID" ganti kode berwarna hijau tersebut dengan ID Pinterest sobat. Misalnya: http://www.pinterest.com/ariefbachrul/
  • "your ID" ganti kode berwarna orange tersebut dengan ID Youtube sobat misalnya: http://www.youtube.com/channel/UCC0BR8elDf38gL242TonN2Q
  • "your feed" ganti kode berwarna kuning tersebut dengan ID Google Plus sobat misalnya: http://feeds.feedburner.com/bacilsoft
7. Sebelum sobat klik "Save" alangkah lebih baiknya sobat melakukan pratinjau terlebih dahulu dengan meng-klik "Preview"

Sekian dulu yang dapat saya sampaikan. Kita ketemu lagi pada postingan berikutnya sobat.
Dewa Teknik