Cara Membuat Floating Social Bookmark Dengan Efek Easing

Cara Membuat Floating Social Bookmark Dengan Efek Easing. Itulah judul artikel hari ini. Dengan menggunakan Widget ini, anda dapat menambah fasilitas blog, mempercantik blog, tanpa perlu menguras tempat lebar-lebar.

Dibawah ini adalah gambar demo Floating Social Bookmark Dengan Efek Easing, dan dibawahnya adalah demo blog-nya.

DEMO

Cara Membuat Floating Social Bookmark Dengan Efek Easing

1. Login Ke Blogger

2. Masuk Ke Template >> Edit html

3. Cari kode  [[></b;skin> (untuk mempercepat pencarian 
    tekan Ctrl+f)

4. Letakkan kode dibawah ini diatas kode   [[></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/AVvXsEgQw8tnxX-YXPXM3lRH5Uczvuq7XtGpvWuhx4ra1JZN5tgmIpiHwiGG-9a17j3gEcXrVJY_zDytpD4tCkSapKLpUNA-mcTv1dStgW-DjKbYkPx-hmAEyk7SznRzLKktiU8MeEpbRCBF9zc/s1600/floating+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. Berikutnya penambahan Jquery dan Javasript, masih di Edit html. Letakkan kode dibawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(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>

6. Dan lalu letakkan kode dibawah ini sebelum kode </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 kode warna Your FB/Your twitter/Your G+/Your ID diatas dengan ID anda, ingat jangan sampai keliru lho...

7. Klik Save Templates

Jika anda belum tahu dimana letak kode ]]></b;skin>, klik Ctrl+F, dan jika masih belum 
ketemu, silahkan anda lihat gamabr dibawah ini

Letak Kode [[></b;skin>

 

Klik 1x


Itulah Cara Membuat Floating Social Bookmark Dengan Efek Easing dari saya, jika anda ingin Tutorial Blog lainnya, silahkan buka alamat URL dibawah ini
http://3defit.blogspot.com/search/label/Tutorial

Jika anda kuarng maksud silahkan tinggalkan komentar....
Sekian dari saya, semoga beruntung, dan sebelum nya, saya mengucapkan terima kasih telah membaca artikel ini. 
Salam, 3defit blog <'_'>