Perlu Sobat ketahui, sebelumnya Saya sudah posting juga mengenai widget sosial bookmark, Sobat bisa membacanya
di sini, tapi pada widget kali ada dua pertambahan yaitu, youtube dan pinterest yang memungkinkan menambah kecantikan widget ini.
Baiklah, buat Sobat yang tertarik untuk membuat widget ini, silahkan ikuti langkah-langkah berikut:
1. Untuk yang pertama ini, masuk ke akun blogger
2. Di halaman dasbor, pilih template => Edit HTML
3. Selanjutnya, copy kode di bawah ini dan paste-kan tepat di atas kode:
]]></b:skin>
4. Untuk meletakkan kode jquery-nya, copy kode di bawah ini dan paste di atas 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(){
$('.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>
_____________________
Ket: Kode yang berwarna
biru, jika pada template Sobat sudah ada, maka kodenya bisa dihapus
5. Untuk menampilkan widgetnya, letakkan kode di bawah 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>
Untuk kode yang berwarna
merah, ganti dengan id sosial bookmark Sobat.
6. Terakhir, simpan templatenya.
Cukup sekian cara memasang widget sosial bookmark di blog, kode script
di atas Saya ambil dari blognya maskolis, Sobat bisa mengunjunginya
di sini untuk lebih jelasnya. Dan yang tak kalah pentingnya adalah komentar dari Sobat tentang artikel di atas.
Read more:
http://se-cara.blogspot.com/2013/05/efek-easing-pada-widget-sosial-bookmark.html#ixzz2W014Zwf0
Anda telah membaca artikel tentang Efek Easing Pada Widget Sosial Bookmark Dengan Kode Jquery dan anda juga bisa menemukan artikel Efek Easing Pada Widget Sosial Bookmark Dengan Kode Jquery ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/efek-easing-pada-widget-sosial-bookmark.html.Anda boleh menyebarluaskan atau mengcopy artikel Efek Easing Pada Widget Sosial Bookmark Dengan Kode Jquery ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.
