Menambahkan Floating Share Button di Blogger

Menambahkan Floating Share Button di Blogger/Blogspot. Anda sebagai pengguna blog pasti sudah mengetahui fitur Share, Like, atau apapun itu untuk meningkatkan jumlah pengunjung blog anda. Fitur tersebut juga berguna untuk mempermudah para pembaca blog untuk membagikan artikel anda tersebut ke berbagai situs bookmark seperti Digg, Facebook, Twitter, dll. Lalu, apa itu Floating Share Button?

Floating Share Button merupakan salah satu cara menempatkan fitur tersebut di blog anda. Seperti kata "Floating", fitur tersebut akan melayang mengikuti scrolling yang dilakukan oleh pengunjung blog anda seperti tombol like disebelah kiri anda.

Lalu, bagaimana cara penggunaannya. Ok, ikuti langkah-langkah berikut ini secara teliti.

1. Langkah pertama, buka Design - Edit HTML lalu centang Expand Template Widget.

2. Cari kode berikut ini ]]></b:skin>. Taruh kode dibawah tepat sebelum kode tadi.

#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;
}

3. Cari kode ini <data:post.body/>. Jika lebih dari satu kode, pilih yang pertama. Lalu taruh kode dibawah tepat sebelum kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='wdt'> Taruh kode disini </div>
<div class='wdt'> Facebook Share </div>
<div class='wdt'> StumbleUpon </div>
<div class='wdt'> Digg </div>
</div>
</b:if>

4. Lalu cari kode berikut ini ]]></b:skin>. Masukkan kode dibawah tepat setelah kode tadi.

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

5. Yang terakhir, cari kode </head>. Lalu taruh kode dibawah tepat sebelum kode tadi.

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

6. Simpan Template lalu lihat hasilnya.

Tips:

• Untuk melakukan perubahan posisi widget, anda bisa mengganti margin-left: -80px; sesuai kondisi template anda.
• Untuk jarak widget dengan atas pada saat scrolling, anda bisa mengubah topPadding = 15; sesuai kebutuhan.