Membuat Floating Social Bookmark dengan Efek Easing

Floating Social Bookmark dengan Efek Easing adalah widget sosial bookmark yang menempel disebelah kanan Blog, Floating Social Bookmark ini dibuat dengan jQuery. Fungsi dari jQuery pada Floating Social Bookmark ini menimbulkan efek slide dengan cara keluar dengan lembut apabila corsor diletakkan pada icon sosial media. Hal itu dikarenakan efek easing yang ada pada jquery-ui.min.

Demo

Apabila anda mescroll blog anda sampai kebawah Floating Social Bookmark ini akan mengikuti, untuk anda yang tertarik berikut ini langkah-langkah Membuat Floating Social Bookmark dengan Efek Easing

1. Login keakun Blogger

2. Pilih Template » Klik Edit HTML

3. Selanjutnya anda cari kode ]]></b:skin>

4. Kemudian anda letakkan kode dibawah ini diatasnya

.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/AVvXsEi-CB_rNiIjQC7gOsRxM5Aulpo7h2CEENS5UhafstwtgSza5SGhVuJO1IojrXNC8Gz6YjEn_ZnzSu2_S-aGeLQ3saMFlishsyL8dwBg4B4gfXLvnoTPdgDSqx3WOiziW7odTuotIDnBVIg/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. Selanjutnya penambahan jQuery dan Javascript, anda cari kode </head> kemudian anda letakkan kode di bawah ini diatasnya

$(window).load(function(){

$('.social-buttons .social-icon').mouseenter(function(){

$(this).stop();

$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});

});

$('.social-buttons .social-icon').mouseleave(function(){

$(this).stop();

$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});

});

</script>

Note :

Kode yang saya beri warna merah, jika ditemplate anda sudah terdapat kode tersebut anda lewatkan kode warna merah tersebut

6. Kemudian anda cari kode </body> dan anda terpakan kode dibawah ini diatasnya

<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>

<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>

Note :

Kode yang saya beri warna merah anda ganti dengan ID media sosial anda

7. Simpan Template

Demikian Membuat Floating Social Bookmark dengan Efek Easing , semoga bermanfaat!