Valid HTML 5 Tombol Share Melayang

Tweet

Get This

proBlogiz

---

Cara Membuat Floating Button Media Sosial valid HTML 5 di Blogger

Baiklah Sob, setelah Anda memahami cara membuat button/tombol share Valid HTML 5 Google Plus, Facebook Like, Twitter. Sekarang saatnya membahas bagaimana penerapannya button/tombol media sosial tersebut di setiap halaman posting blog kita. Widget Floating Button/Tombol Sosial Share yang jadi pembahasan kali ini, adalah Floating Button Share (Tombol Share Melayang) tepat disebelah kanan atau kiri halaman posting. Penambahan script JavaScript Asynchronously pada setiap button share (G +, Facebook Like, Tweet) akan membuat loading halaman posting (konten) lebih cepat, prinsipnya scripts asynchronously ini , memungkinkan halaman atau konten dimuat terlebih dahulu (pemakaian share button tersebut tidak mengganggu loading konten), orang akan membaca konten terlebih dahulu bukan?

Sebenarnya Tombol Share Melayang ini adalah hasil modifikasi dari Mashable Floating Button Share, yang telah tayang dipostingan yang lalu. Untuk Preview/DEMO widget ini dapat dilihat setiap halaman post blog ini sebelah kiri main post.

Berikut langkah-langkah cara membuat Floating Button Share valid HTML 5:

Langkah Pertama

Masuk Blogger > pilih Template
Back Up Template > edit HTML > Check "Expand Widget Templates" Box
Lanjutkan > Tekan Control + F
Cari kode <data:post.body/>
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'><div class='g-plusone' data-size='tall'/></div>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Tweet Button --> 
<div class='wdt'><a class='twitter-share-button' data-related='problogiz' data-via='problogiz' href='https://twitter.com/share'>Tweet</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<!-- Facebook Like --> 
<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='wdt'><div class='fb-like' data-font='arial' data-layout='box_count' data-send='false' data-show-faces='true'/><br/>
<div style='clear: both;font-size: 9px;text-align:center;'><a href='http://problogiz.blogspot.com/2013/01/valid-html-5-tombol-share-melayang.html' target='_blank' title='Floating Button Share valid HTML 5 di Blogger'>Get This</a>
</div></div></div></div></div>

</b:if>

Ganti Kode berwarna merah dengan ID Twitter Anda.

Atau Anda dapat membuatnya button share Google Plus, Twitter dan Facebook Like sendiri masing-masing (untuk amannya), caranya bisa dilihat lagi artikel Valid HTML 5 Google Plus, Facebook Like, Twitter Button Share

Note : jika terdapat lebih dari satu kode <data:post.body/> pada template Anda, pilih yang pertama. Kalau tidak berhasil coba yang kedua.

Langkah Kedua

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>

Jika Anda pernah memasang jQuery sama seperti ini, lewati langkah pertama.

Langkah Ketiga

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

#sharebox {
float: left;
margin-left: -95px;
background: transparent;
position: absolute;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

Aturlah dan sesuaikan kode yang berwarna dengan kondisi blog Anda.

Langkah Keempat

Copy kode script scrolling 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>

Langkah Kelima

Save Template And That's All
Sekarang Anda bisa menikmati Widget Button/Tombol Share Melayang yang Valid HTML 5 di setiap halaman posting Anda.

Good Luck!!