Membuat Widget Floating Sosial Sharing Bar

Ketika saya berkunjung di blog tetangga, ada sebuah widget yang menarik yang saya lihat yaitu sosial sharing dengan gaya melayang/floating di atas header. untuk kali ini, jika sobat ingin memiliki widget ini { lihat gambar dibawah ini} langsung saja kita baca trik membuatnya.

Tambahkan Plugin JQuery!

Jika blog Anda telah memiliki sebuah plugin jQuery terbaru, maka Abaikan langkah ini dan langsung mengikuti langkah kedua. Jika tidak tambahkan potongan kode di bawah ini sebelum tag </ head>

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

Masuk ke Akun Blogger
Pilih Template dan klik Edit HTML (Klik melanjutkan)
Cari <data:post.body/> (Temukan menggunakan ctrl + F)
Lihat bawahnya, tambahkan potongan berikut.

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

Cari </ body> (Temukan menggunakan ctrl + F)
Tambahkan potongan kode di bawah ini sebelum tag </ 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>

Sekarang simpan template Anda dan lihat hasilnya!
Jika Anda memiliki pertanyaan, silahkan berkomentar.
Semoga sukses dan bermanfaat.