Cara Pasang Widget Floating Slider Tombol Share Melayang

Tips baru cara membuat / memasang widget floating slider tombol bookmark (melayang) atau media sosial button for share like facebook, google plus, twitter..dll, di samping kiri / kanan halaman blog agar tampil profesional, gaya dan elegant. Tapi ini agak berbeda dgn cara pasang tombol floating media sosial biasa yg sederhana seperti kemaren sy posting, tapi sama juga, anda bebas utk memasang dan menambah tombol berbagi / share / follow yg diinginkan sesuai keperluan blog.
Contohnya yg sekarang di pake di Blog Saya, keren kan !?

Yuk kita mulai.. login ke blog > Design > Edit HTML > centang Expand widget templates.

Lalu cari kode ini <data:post.body/>, jikanya ada 2 atau 3 kode yg sama, simpan kode berikut di atas <data:post.body/> yang pertama.
Tapi silahkan ganti dulu ID-Twitter nya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<!-- Google+1 Button -->
<!-- Place this tag where you want the +1 button to render -->
<div class='wdt'><g:plusone size='tall' expr:href='data:post.url'/></div>

<!-- Tweet Button -->
<div class='wdt'><a class='twitter-share-button' data-count='vertical' data-via='ID-Twitter' href='https://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<!-- Facebook Like (XFBML) -->
<div class='wdt'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='lucida grande' height='65' layout='box_count' send='false' show_faces='false' width='55'/></div>

<!-- sharefb Button -->
<div class='wdt'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

<!-- StumbleUpon -->
<div class='wdt'><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></div>

<!-- Digg -->
<div class='wdt'><a class='DiggThisButton DiggMedium'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script></div><br/>
<div style="clear: both;font-size: 9px;text-align:center;"><a href='http://blogseotest.blogspot.com/2012/02/pasang-widget-floating-slider-tombol.html' target='_blank' title='Pasang Widget Floating Slider Tombol Bookmark Melayang'><font color="blue"><blink>Get Widget</blink></font></a></div>
</div></b:if>

Selanjutnya cepat cari kode ini ]]></b:skin> lalu simpan kode JQuery terbaru berikut tepat di bawahnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>

Catatan: Jika anda sudah memiliki kode JQuery versi lama, silahkan ganti / timpa dgn kode di atas. Jangan pake keduanya.

Kemudian, tambahkan kode berikut di atas kode ]]></b:skin>

#sharebox {
float: left;
margin-left: -80px;
background: #992211;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

Catatan:
- Untuk merubah posisi widget di sisi kanan, silahkan ganti huruf warna merah left dgn right

- Untuk mengatur jarak antara widget floating slider dgn pinggiran halaman, silahkan ganti angka berwarna biru - margin-left: -80px;

- Untuk menyesuaikan warna tampilan background agar serasi dgn template blog, silahkan ganti angka berwarna hijau - background: #992211; dgn klik di sini kode warna HTML

Langkah terakhir, cari kode </head>, simpan kode berikut tepat di atasnya.

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

Save template. Silahkan lihat hasilnya di halaman posting blog anda.

Jika ada masalah dlm cara memasang widget floating slider melayang utk tombol share, bookmark dan media sosial lainnya, jangan sungkan utk isi via komentar. Semoga berguna.