Floating Social Sharing Bar for Blogger

Beberapa waktu lalu, saya browsing dan menemukan widget ini. Jadi kerja widget ini adalah saat anda meng-scroll page kebawah, akan muncul kotak berwarna oranye transparan dan berisi tombol-tombol untuk mengeshare postingan yang sedang visitor lihat. Widget ini menggunakan jQuery. Jadi, anda harus menambahkan plugin jQuery dahulu. Widget ini tampak lebih keren karena warna dasarnya (background) sedikit transparan. 

Disini anda hanya perlu melakukan 3 langkah, yakni :

1. Memasang plugin jQuery 1.8.2 (bagi yang belum memasang).
2. Menambahkan "Marker".
3. Memasang widget.

Memasang Plugin jQuery 1.8.2

1. Seperti biasa, login ke akun blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </head>, lalu diatas kode tersebut tambahkan kode dibawah ini.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 

Menambahkan "Marker"

1. Tetap di HTML Editor.

2. Cari kode <data:post.body/> (kalau anda menemukan kode ini lebih dari 3 kali, maka anda pilih yang kedua). Lalu tambahkan kode berikut dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

Memasang Widget

1. Cari kode </body>. Tambahkan kode berikut ini setelah kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>         
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

2. Klik Preview, apakah ada masalah atau tidak. Kalau tidak ada masalah, lanjut ke langkah ketiga. Kalau ada masalah, coba bahas masalah anda di kotak komentar.

3. Klik Save Template

3. Lihat hasilnya!

Thankyou!