Mashable Floating Button Share di Blogger

proBlogiz

---

Satu lagi widget Sosial Media Share yang keren buat Anda yang ingin tampilan Blognya lebih profesional. Mashable Floating Button Share ini dilengkapi beberapa tombol/button sosial popular seperti Facebook Share / Like, Twitter dan Google +1, Digg, Stumbleupon (yang bisa Anda atur sesuai keperluan tentunya).

Floating Button Share kali ini mempunyai tampilan yang unik, selain menempel melayang ditepat samping kiri atau kanan main post Blog/postingan juga memiliki efek "attractive" menurut saya, karena setiap Anda scrolling button/tombol sosial ini akan selalu mengikuti.

Sebenarnya proBlogiz sudah membuat beberapa artikel tentang Button Share Sosial Media Di Posting Blog, antara lain :

• Pasang Widget Floating Tombol/Button Share
• Tombol/Button Share Sosial Media Di Posting
• Valid HTML 5 Tombol Share Melayang New!

Tutorial Desian Blog ini, melengkapi artikel sebelumnya, dimana bisa Anda pilih metode dan tampilan mana yang paling sesuai dengan blog Anda. Banyak pilihan tentu lebih baik bukan :)

Cara Pasang Mashable Floating Button Share di Blogger

Step 1

• Masuk Blogger > pilih Template
• Back Up Template > edit HTML > Check "Expand Widget Templates" Box
• Lanjutkan > Tekan Control + F
• Cari kode <data:post.body/>

note : jika terdapat lebih dari satu kode diatas, pilih yang pertama

Copy kode berikut dan letakkan sebelum/diatas kode <data:post.body/>

<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 expr:href='data:post.url' size='tall'/></div> <!-- Tweet Button --> <div class='wdt'><a class='twitter-share-button' data-count='vertical' data-via='ID-Twitter' href='https://twitter.com/share'>problogiz</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://problogiz.blogspot.com/2012/11/mashable-floating-button-share-di.html' target='_blank' title='Mashable Floating Button Share di Blogger'><font color='black'>Get This</font></a></div> </div></b:if>
ID-Twitter : ganti dengan ID Twitter Anda

Step 2

Copy kode jQuery berikut dan letakkan tepat di bawah tag ]]></b:skin>

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

Step 3

Tambahkan kode CSS berikut tepat diatas tag ]]></b:skin>

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

float: left; > posisi share box disebelah kiri
background: #088A85; > warna background, ganti dengan warna selera anda

Step 4

Copy kode script ini dan letakkan tepat diatas tag </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>

Step 5

Save Template
Enjoy Your Work

Anda juga bisa lihat Mashable Floating Button Share ini, disamping kiri artikel ini, sebagai contoh demo namun sebagian button sosial sudah saya hapus.