Memasang Share Button AddToAny Valid HTML5

Jika kita membahas wacana media umum tentu tidak akan pernah bosan untuk terus mengupdate perkembangannya terutama mengenai pemanfaatan Trafik kunjungan yang bersumber dari Sosial media tersebut. Ada banyak keunggulan bila memasarkan suatu produk dengan memanfaatkan Media Sosial tersebut, bahkan sekarang ini ada banyak Workshop dan Training khusus untuk mempelajari kekuatan Media Sosial menyerupai Workshop yang pernah aku ikuti yakni Sosial Media Marketing.

Ada banyak ilmu ternyata didalamnya bagaimana meningkatkan Trafik Blog hingga 200 % melonjak hanya dengan memanfaatkan Media Sosial, mungkin lain waktu aku akan bahas di Blog ini.

Untuk Postingan kali ini masih terkait Media Sosial share Button yang akan kita pasang di Blog, bergotong-royong sudah pernah di bahas di blog ini namun yang kali ini agak sedikit berbeda kita akan mengaitkan dengan Flatform AddToAny dan nanti akan kita buat simple penampakannya disingkat dan hanya diwakilkan dengan tombol icon Plus (+) saja yang memawakili dari AddToAny sehingga tidak akan membuat Loading Blog terlalu berat nantinya sebab di dalamnya ditambahkan JS asynchronous.

Bagi sahabat yang tertarik untuk mencobanya mari kita bahas bersama.

Langkah Pertama

Silahkan sahabat salin isyarat CSS dibawah ini lalu letakkan diatas isyarat ]]></b:skin> atau </style>

.share-box{border-top:2px solid #bbb;border-bottom:1px solid #ccc;font-size:16px;padding:10px 0 11px;position:relative;margin:25px 20px} a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:2px 6px;margin-top:-4px} a.more:hover{background:#0f6bc9;} 

Pastikan isyarat JS Facebook SDK sudah terpasang di Blog Sobat menyerupai dibawah ini :

<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.async=true;   js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;   fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> 

Pastikan isyarat SDK facebook pada sudah terpasang isyarat asynchronous menyerupai isyarat yang ditandai js.async=true; kalau belum terpasang silahkan tambahkan.


Langkah Ke Dua
Silahkan sahabat salin isyarat HTML dibawah ini lalu letakkan di bawah postingan blog sobat.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='share-box'> <span style='float:left;margin-top:-2px;margin-right:30px;font-size:18px;font-family: Oswald;color:#666;text-transform:uppercase'>Share this article :</span> <div style='margin-right:30px;float:left;'> <span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span> </div> <div style='float:left;'> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a> <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div style='float:left;'> <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/> </div> <a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>&#10010;</a> <script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/> </div> </b:if> 

Untuk jenis font dan ukuran silahkan sahabat sesuaikan dengan font blog sobat


Langkah Ke Tiga
Ini yang sering terlewatkan dan tidak disadari banyak kejadian tombol Google Plus tidak muncul,  coba perhatikan dan cek isyarat pada blog dipaling bawah bila terdapat isyarat &lt;!--</body>--&gt;&lt;/body&gt; silahkan sahabat tambahkan dengan isyarat dibawah ini lalu letakkan sempurna diatasnya.   

<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> 

Namun bila sudah ada menyerupai isyarat diatas, tidak usah dipasang lagi cukup pakai yang sudah ada.

Dan final Selamat Mencoba.