 |
| share button blog |
1. Meletakan Share Buton di Bawah Postingan Blog
Langkah pertama yang harus anda lakukan yaitu meletakan aba-aba HTML pada template anda-Masuk Blogger
-menu template
-edit html
sehabis anda masuk pada pengeditan template blog anda, lalu cari aba-aba ini <b:includable id='post' var='post'> gulung layar ke bawah dan cari aba-aba di bawah ini atau yang seolah-olah dengan aba-aba di bawah ini.
<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> Copi aba-aba dibawah ini dan letakan sehabis aba-aba diatas (di bawah aba-aba </div>).
<b:if cond='data:blog.pageType == "item"'> <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 gila ini di atas aba-aba </body>.
<b:if cond='data:blog.pageType == "item"'> <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 == "item"'> <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
SelesaiTombol share ini memerlukan waktu dalam menampilkan berapa jumlah klik share, jadi jangan heran jikalau jumlah masih tetap pada pojok tombol sharenya. Social share model ini sanggup juga di pasang pada wordpress.
Jika anda sering merubah template biasanya struktur aba-aba kita banyak yang rusak
untuk mengetahui struktur aba-aba blog yang rusak baca Cara cek struktur aba-aba blog
demikian cara menciptakan tombol share ala kompi ajaib.
Buat lebih berguna, kongsi:
