Share Button Floating Animasi Jquery

Share Button

Dalam tutorial ini saya akan memberitahu Anda metode yang dapat digunakan untuk menerapkan widget Share Button ini ke dalam Blogger dengan menggunakan fitur jQuery. Ini akan muncul di luar bagian posting Anda dan saat Anda menggulir halaman, widget ini juga akan tergulir dengan beberapa efek animasi. Kami telah menyediakan delapan warna berbeda bagi Anda agar bisa menyusaikan warna template anda. Kita juga telah mengumpulkan empat Share Button paling populer saat ini. Seperti Facebook, Twitter, Google +1, Stumbleupon dan Digg.

Demo Kiri Demo Kanan

Silver	Merah	Biru	Hitam
Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border-bottom:1px solid #808080; border-left:1px solid #808080; border-top:1px solid #808080;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#aaa;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border-bottom:1px solid #808080; border-right:1px solid #808080; border-top:1px solid #808080;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border-bottom:1px solid #B31919; border-left:1px solid #B31919; border-top:1px solid #B31919;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#C12424;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border-bottom:1px solid #B31919; border-right:1px solid #B31919; border-top:1px solid #B31919;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border-bottom:1px solid #1E4A8A; border-left:1px solid #1E4A8A; border-top:1px solid #1E4A8A;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#295698;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border-bottom:1px solid #1E4A8A; border-right:1px solid #1E4A8A; border-top:1px solid #1E4A8A;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border-bottom:1px solid #222; border-left:1px solid #222; border-top:1px solid #222;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#333;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border-bottom:1px solid #222; border-right:1px solid #222; border-top:1px solid #222;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>
Hijau	Oranye	Kunig	Putih
Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border-bottom:1px solid #739619; border-left:1px solid #739619; border-top:1px solid #739619;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#80A81C;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border-bottom:1px solid #739619; border-right:1px solid #739619; border-top:1px solid #739619;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border-bottom:1px solid #B35319; border-left:1px solid #B35319; border-top:1px solid #B35319;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#C15F24;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border-bottom:1px solid #B35319; border-right:1px solid #B35319; border-top:1px solid #B35319;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#FFF19D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);border-bottom:1px solid #F1E7AC; border-left:1px solid #F1E7AC; border-top:1px solid #F1E7AC;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#FFF19D;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);border-bottom:1px solid #F1E7AC; border-right:1px solid #F1E7AC; border-top:1px solid #F1E7AC;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>	Kiri <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: left;margin-left: -80px;background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-top:1px solid #ccc;box-shadow:-4px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if> Kanan <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#sharebox {float: right;margin-right: 80px;right:0px;background:#F9F9F9;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc;box-shadow:2px 2px 5px rgba(0,0,0,0.3);position: absolute;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;}#sharebox .wdt {float: center;clear: center;padding: 5px;}</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {var $sidebar = $(&quot;#sharebox&quot;),$window = $(window),offset = $sidebar.offset(),topPadding = 15;$window.scroll(function() {if ($window.scrollTop() &gt; offset.top) {$sidebar.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding});} else {$sidebar.stop().animate({marginTop: 0});}});});</script></b:if>

1. Awal pertama yang kita lakukan adalah Login di Blogger.com, Pergi ke Template/Rancangan > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari kode </head> Copy script Kiri atau Kanan (Pilih salah satu, jangan dipergunakan keduaduanya cukup satu saja) setelah itu paste tepat diatas kode </head>
3. Selanjutnya cari kode yang mirip seperti dibawah ini
   

   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

   Jika anda tidak menmukannya cari saja yang ini
   

   <data:post.body/>

   Kalau sudah ketemu masukan kode berikut taruh tepat diatas kode yang anda temukan
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='sharebox'> <div class='wdt'> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> <div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='50' expr:data-href='data:post.url'/> </div> <div class='wdt'> <a class='twitter-share-button' data-count='vertical' data-via='animegricit' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='wdt'> <!-- Place this tag where you want the +1 button to render --> <g:plusone size='tall'/><!-- Place this render call where appropriate --> </div> <div class='wdt'> <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/> </div> <div class='wdt'> <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> <!-- Medium Button --> <a class='DiggThisButton DiggMedium'/> </div> </div> </b:if>
4. Terakhir Klik Save Template dan lihat hasilnya pada halaman posting anda bukan pada halaman home anda.

Jika anda baik dalam CSS anda bisa meruba kode yang ada di dalam script Kiri dan Kanan seperti margin-left: -80; atau margin-right: 80; untuk mengatur jarak jau dekatnya antara posting.

Di script Kiri dan Kanan terdapat juga kode

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

Jika sebelumnya ditemplate Anda telah ditambahkan jquery, maka Anda tidak perlu menambahkannya lagi, hanya memeriksa apakah itu versi yang terbaru atau tidak dan kemudian menggantinya.