Cara Menciptakan Tombol Share Dengan Jumlah Total Klik - Fezarzone

share button blog

1. Meletakan Share Buton di Bawah Postingan Blog

Langkah pertama yang harus anda lakukan ialah meletakan instruksi HTML pada template anda
-Masuk Blogger
-menu template
-edit html
sehabis anda masuk pada pengeditan template blog anda, lalu cari instruksi ini <b:includable id='post' var='post'> gulung layar ke bawah dan cari instruksi di bawah ini atau yang seolah-olah dengan instruksi di bawah ini.

        <data:post.body/>       <div style='clear: both;'/> <!-- clear for photos floats -->     </div> 

Copi instruksi dibawah ini dan letakan sehabis instruksi diatas (di bawah instruksi </div>).

  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="don-share" data-limit="3">   <div class="don-share-total"></div>   <div class="don-share-facebook"></div>   <div class="don-share-twitter"></div>   <div class="don-share-google"></div>   <div class="don-share-linkedin"></div>   <div class="don-share-pinterest"></div>   <div class="don-share-tumblr"></div>   <div class="don-share-stumbleupon"></div>   <div class="don-share-reddit"></div>   <div class="don-share-pocket"></div> </div> <div class='clear'/> </b:if> 

Jika lebar halaman posting anda tidak muat dengan 3 tombol share maka ganti angka 3 menjadi 2. sehingga tanpilannya hanya 2 tombol share.

2. Meletakan Java Script Tombol Social Share

letakan javascript defer js social share button yang saya sanggup dari kompi aneh ini di atas instruksi </body>.

  <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> </b:if> 

3. Kode CSS Tombol Share

Agar tampilannya rapi maka tombol share perlu diatur dengan CSS. Letakan diatas </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .don-share .don-share-total{position:relative!important} .don-share .don-share-total:after{bottom:0!important} </style> </b:if> 

4. Simpan Template

Selesai

Tombol share ini memerlukan waktu dalam menampilkan berapa jumlah klik share, jadi jangan heran bila jumlah masih tetap pada pojok tombol sharenya. Social share model ini sanggup juga di pasang pada wordpress.

Jika anda sering merubah template biasanya struktur instruksi kita banyak yang rusak
untuk mengetahui struktur instruksi blog yang rusak baca Cara cek struktur instruksi blog
demikian cara menciptakan tombol share ala kompi ajaib.