Cara Memasang Tombol Share Facebook, Twitter, dan G+ di Blog

Share on :

Tweet

Cara Memasang Tombol Share Facebook, Twitter, dan G+ di Blog - Pernahkan Anda menjumpai artikel web/blog terdapat tombol share facebook, twtter diatasnya (termasuk punya saya). Widget atau tombol share berguna untuk membagikan sebuah halaman situs ke profil jejaring sosial. Kalau kalian tertarik dengan tombol share, langsung saja kita pelajari cara memasang tombol share dalam setiap postingan blog.

Berikut langkah-langkahnya:

1. Buka blogger. 
2. Masuk ke menu Design ---> Edit HTML 
3. Beri centang pada 'Expand widget templates' 
4. Cari kode <data:post.body/>, kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama 
5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol share dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.
   
   <b:if cond='data:blog.pageType == "item"'>
   <div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
   <div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
   Share on :
   </div>
   <div style='float:left;padding-left:10px;'>
   <a name='fb_share' type='button_count'/>
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
   type='text/javascript'>
   </script></div>
   <div style='float:left;padding-left:10px;'>
   <a class='twitter-share-button' data-count='horizontal'
   data-via='User Name'
   href='http://twitter.com/share'>Tweet</a><script
   src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
   <div style='float:left;padding-left:10px;'>
   <!-- Place this tag where you want the +1 button to render -->
   <g:plusone size="medium"></g:plusone>
   <!-- Place this render call where appropriate -->
   <script type="text/javascript">
   (function() {
   var po = document.createElement('script'); po.type =
   'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(po, s);
   })();
   </script>
   </div>
   </div>
   </b:if>
6. Jika sudah simpan template anda dan lihat hasilnya.

NB: Kalo pingin tanda share di atas dan di bawah... paste aja kodenya di atas dan dibawah kode
       <data:post.body/>

Share on :

Tweet