Modifikasi Floating Social Widget

Kemarin saya pernah pasang floating social widget. Hasilnya cukup bagus dan tidak kalah menarik dengan tampilah widget sosial media lainnya. Widget ini saya pasang melayang, artinya ketika tampilan blog anda discroll ke bawah, maka widget ini akan bergerak sesuai pergerakan scroll tersebut. Selain itu widget ini dapat berfungsi sebagai penyedia layanan klik kesukaan atau sharing widget bagi pengunjung ketika ingin berbagi pada link mereka. Sekarang mari kita bahas cara pasang modifikasi floating sosial widget untuk blogspot. Ikuti langkah berikut.
Log in ke blogger
Klik Template
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

#flt-box{margin-left:-120px;background:#eee;position:absolute;-webkit-border-radius:3px;border-radius:3px}
#flt-box .wdt{padding:5px;text-align:center}
#flt-box.fixed{position:fixed;top:20px}

Masukkan kode berikut di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
 var $aside = $(&quot;#flt-box&quot;),
 $window = $(window),
 $offset = $aside.offset().top-20;

 $window.scroll(function() {
  if ($window.scrollTop() &gt;= $offset) {
   $aside.addClass(&quot;fixed&quot;);
  } else {
   $aside.removeClass(&quot;fixed&quot;);
  }
 });
});
</script>

Selanjutnya masukkan kode berikut di atas kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='flt-box'>
<!-- Tweet Button -->
<div class='wdt'><a class='twitter-share-button' data-count='vertical' data-via='User-Name' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a><script src='//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.canonicalUrl' font='lucida grande' layout='box_count' send='true' show_faces='false' width='55'/></div>
<!-- Plus One -->
<div class='wdt'><g:plusone expr:href='data:post.canonicalUrl' size='tall'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/></div>
<!-- Pinterest -->
<div class='wdt'><b:if cond='data:post.thumbnailUrl'><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title'>Pin It</a><b:else/><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'>Pin It</a></b:if><script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/></div>
</div>
</b:if>

Selanjutnya klik Simpan Template dan lihat hasilnya.
Demikianlah tutorial modifikasi floating social widget. Semoga bermanfaat bagi kita semua, amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"