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. Di
samping efek easing yang saya tambahkan pada widget ini, juga jenis
social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
- Login ke Blogger
- Masuk ke Template >> Edit HTML (centang expand widget templates)
- Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
- 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(){
$('.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>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> :
Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga. - Terakhir, Save Templates
Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan.
Jika masih ada yang kurang jelas kebangeten.. eh 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
Post a Comment
Post a Comment
This Blog is DOFOLLOW, Well Please Comment and are not included in spam Thank You..
Cheers,
Admin