Cara pasang Tombol Share Floating Slider di Blogger

Memasang tombol share floating slider untuk di pasang di samping posting blogger dan blogspot menyerupai plugin blog wordpress kini semakin mudah, juga berguna bagi pengunjung agar mempermudah dalam berbagi konten blog kita via media sosial. Saat ini saya sudah mencoba praktek bagaimana caranya supaya tombol berbagi selalu mengikuti halaman ketika pengunjung scroll page sampai ke bawah. Dan tentu saja disamping praktis juga akan mempercantik tampilan blog kita seperti blog/situs profesional seperti Mashable...dll.
Tidak ada salahnya juga jika anda pengguna blogger gratisan seperti saya, berusaha selalu mencoba hal kreatif yang terkadang memang agak menghabiskan waktu untuk dapat benar-benar berhasil 100%. Diperlukan kesabaran dan keuletan agar apa yang kita inginkan tercapai. Tricks ini saya pelajari dari blog Mashable, kemudian saya lihat sourcepage nya, kemudian di copy lalu saya modifikasi dari awalnya menggunakan plugin WP menjadi kode html/script fiture jQuery agar bisa digunakan di blogger atau blogspot. Anda bisa lihat hasilnya di blog ini Z-Set. Contoh gambar di bawah:

Floating Share Button Slider

Untuk bisa memasang tombol floating slider seperti di atas, ada 4 langkah yang harus anda lakukan agar hasilnya sempurna, tapi sebelumnya saya sarankan backup dulu template anda untuk menjaga hal-hal yang tak terduga :

1. Silahkan login ke blog anda, masuk ke Design > Edit HTML dan centang "Expand Widget Template". Lalu cari kode <data:post.body/> (gunakan CTRL+F), kemudian simpan kode di bawah ini tepat di atas <data:post.body/> :

<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='wdt'> Tweet Button </div>
<div class='wdt'> Facebook Share </div>
<div class='wdt'> StumbleUpon </div>
<div class='wdt'> Digg </div>
<div class='wdt'> Untuk Tombol berikutnya yg akan anda tambahkan </div>
</div>
</b:if>

Update : kalo mau copy kodenya, silahkan lihat Link di bawah.

Tambahkan kode script/html tombol berbagi media sosial anda di antara <div class='wdt'> Tambah Kode di Sini </div>. Lihat contoh hasil dibawah menggunakan kode share saya :

<div class='wdt'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

2. Langkah berikutnya menambahkan kode jQuery terbaru di bawah tepat setelah kode ]]></b:skin>.

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

Jika anda telah memiliki kode jQuery versi lama, anda cukup menggantinya dengan kode di atas, jangan gunakan keduanya.


3. Sekarang anda tambahkan bagian kode CSS, tambahkan kode di bawah tepat 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;
}

 Anda bisa mengatur jarak antara sisi widget dengan sisi halaman konten dengan mengganti angka di atas yang berwarna merah dan merubah warna background yang berwarna hijau agar sesuai dengan keinginan tampilan blog anda. Untuk mendapatkan kode warna yang cocok, anda bisa lihat di HTML Color Codes.

4. Langkah terakhir adalah menambahkan kode Javascript yang akan menampilkan tombol share floating slider yang berhasil saya modifikasi, cari code </head> dan tambahkan kode di bawah tepat di atas kode </head>.

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

Update : Ga bisa copy ? maaf, silahkan di > COPY.

 5. Simpan Template anda.

Jika anda tidak melihat contoh widget floating slider di blog Coerhat, itu karena tidak sesuai dengan template Coerhat yang 3 colum, cara yang sekarang di bahas akan efektif untuk blog bertemplate 2 collum. Yang saya gunakan sekarang adalah widget floating biasa yang paling mudah dan praktis.

Jika anda terbiasa dengan mengutak-atik kode CSS, anda bisa merubah tampilan baru widget tombol share floating slider, Selamat mencoba praktek cara pasang tombol share floating slider media sosial di Blogger anda.