Cara membuat floating social bookmark dengan efek easing

         Assalamualaikum, bagaimana kabar kalian, semoga sehat selalu ya. di sore hari ini setelah lelah bersekolah akhirnya saya dapat memenuhi keinginan saya yang dari kemarin tidak kesampain karena kepala pusing yang menganggu akhirnya sekarang dapat menuliskan artikel ini, eeh malah curhat saya, maaf ya mohon dimaklumi karena yang nulis ga punya temen curhat hehehe. ok langsung ke topik, jika kalian berkunjung ke suatu blog apakah kalian pernah melihat ada tombol social media di samping blog, jika iya berarti penulis mengharapkan kepada pembaca untuk mengikutinya ata membagikan artikelnya di social media kalian dengan harapan artikel blognya dapat yang banyak membacanya dan blognya pun dapat tampil di posisi pertama karena dapat mengundang pengunjung lain. 

nah diatas itulah adalah screenshootnya, tombol social bookmark ini dapat mengikuti kita ke bawah jika kita menggesernya ke bawah. jadi seperti kucing yah, mengikuti kemana kita sesuai perintah kita.
saya mendapatkan cara ini setelah saya berkunjung ke blog yang sudah terkenal yaitu blog Creating Website punya maskolis yang sampai sekarang saya belum tau seperti apa mukanya, ok lanjut ke pembahasan. nah tetapi kali ini saya ingatkan jika kalian sudah terlalu banyak menggunakan javascirpt saya sarankan tidak usah menggunakan efek ini karena nanti code javascirpt nya juga terlalu panjang, bisa bisa blog kalian tidak akan di indeks oleh search enggine terutama google, karena google lebih memilih blog yang sederhana dan tidak terlalu banyak kode javascirpt yang bertujuan agar pembaca dari mesin pencari google lebih puas dengan hasil pencarian google yang tidak terlalu berat untuk dimuat pada saat pengunjung mengeklik blog kita. Masih yakin mau memasang widget ini, jika masih ikuti caranya berikut ini

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnb67y31NozJqIrmW9osY0rHeNcuFXj1-xwSVwkSl8kMu_ofg_rm5XOEzl9xGjxKoXeQ_U9eSmU_EfjOZhiYK2fXnIUUGV9P-YRIV5hisLKwooW1X_l3qCRWQmajYHujxyvEkWbTwCDY/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, untuk 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.

 

       6.Terakhir, Save Templates. dan selesai, coba lihat hasilnya.

 

 Nah itulah caranya untuk membuat efek tombol social media di samping blog. Ok sekian yang dapat saya sampaikan. Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.

Sekian dan semoga ada manfaatnya