Facebook Twitter Google Plus Dan More Share Button Valid Html5

Sebenarnya share button Facebook, Twitter, dan Google Plus yang valid HTML5 sudah pernah dishare oleh kang Ismet, namun di sini aku menambahkan lagi sebuah share button dari AddToAny yang memungkinkan share artikel ke lebih banyak lagi social media tanpa harus menampilkan semua share button-nya di halaman blog. 

Yang ditampilkan hanya sebuah icon plus (+) untuk mewakili widget More Share dari AddToAny.

Untuk live demonya silahkan lihat pada share button di bawah postingan ini. Agar share button ini tidak mengganggu loading blog, aku lengkapi js-nya dengan asynchronous. Jika Anda tertarik untuk mencobanya silahkan copy kode-kode di bawah ini.

Silahkan simpan isyarat CSS di bawah ini di atas isyarat ]]></b:skin> atau isyarat </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;}
 

Kemudian pastingan isyarat JavaScript SDK Facebook sudah terpasang di blog Anda menyerupai berikut:

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

Dan pastikan juga isyarat JavaScript SDK Facebook sudah dipasang isyarat asynchronous menyerupai ini js.async=true;, kalau belum silahkan pasang menyerupai isyarat di atas.

Kemudian silahkan copy isyarat HTML di bawah ini di kawasan bawah postingan blog Anda.

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

Silahkan sesuaikan font-family untuk goresan pena "Share this article :" dengan font-family blog Anda.

Jika blog Anda terpasang kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah), maka biar tombol Google Plus-nya muncul silahkan pasang javascriptnya di bawah ini dan simpan di atasnya.

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

Jika ternyata isyarat javascript di atas sudah ada di blog Anda maka silahkan lewati langkah ini.

Sumber https://www.kompiajaib.com/

Share this post