Membuat Tombol Share Simple Dibawah Posting

Membuat Tombol Share Simple Dibawah Posting Membuat Tombol Share Simple Dibawah PostingSebenarnya widget share ini pertama kali saya lihat pada blog kang Adhy selaku Pemilik Kompiajaib.com, ibarat biasa saya pribadi intip kodenya sekalian belajar. Karena sebelumnya saya telah modifikasi tampilannya sehingga menjadi lebih mudah (menurut saya sih gitu) hehe.

Untuk originalnya, Anda dapat lihat pada blog kang Adhy yah. Untuk artikel ini sendiri ialah pesanan teman saya bernana Si Geeniuss pada suatu pesan komentar, namun untuk Anda yang ingin mengcobanya juga diblog anda silahkan ikuti tutorial singkat berikut ini.

Agar Tombol Share ini berfungsi, anda harus memasang FontAwesome terlebih dahulu, jikalau sudah ada di template, tinggal ikuti saja tutorial dibawah ini. OK.

Langkah pertama tambahkan CSS berikut ini dibawah di atas </head> pada edit HTML.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .share,h2.sharetitle{display:inline-block;float:left;margin-right:10px;margin-top:15px} h2.sharetitle{font-weight:600;font-size:24px;margin-top:20px} .sharethis{position:relative;margin-bottom:20px} a.gp{color:#ba3227} a.fb{color:#324b81} a.tw{color:#01a7de} a.pr{color:#0a7111} </style> </b:if>

Seperti biasa, CSS diatas telah saya lengkapi dengan tag konditional supaya hanya terload dibagian postingan, sehingga tidak membebani homepage blog. selanjutnya Anda cari aba-aba sempurna ibarat dibawah ini.
<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Selanjutnya letakkan aba-aba dibawah ini sempurna dibawah aba-aba tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href;   document.write('<div class="sharethis"><h2 class="sharetitle">Bagikan :</h2> <div class="share ani-dur ani-name"> \ <a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Membuat Tombol Share Simple Dibawah Posting">\     <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x"></i></span></a> \ <a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Membuat Tombol Share Simple Dibawah Posting">\     <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x"></i></span></a> \ <a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=iw_n&related=iw_n" target="_blank" title="Membuat Tombol Share Simple Dibawah Posting">\     <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span></a></div><div class="clear"></div></div> \ '); //]]> </script> </b:if> <!-- url : http://competitivgrace.blogspot.com, Share box Simpel By Kompi Ajaib, Share & Edited by Iwan Efendi --> 

Sebenarnya tidak harus dibawah aba-aba yang saya berikan, namun dapat dikreasikan sendiri untuk posisinya, namun emang lebih baik dibawah posting sih hehe. Setelah itu ganti user id twitter yang saya blok warna kuning menjadi user id  twitter milik anda, terus jangan lupa untuk Simpan Template kemudian lihat hasilnya.
Karena widget ini memakai FontAwesome, untuk template Anda yang telah dilengkapi FontAwesome, tidak akan ribet lagi. Widget ini sangat ringan, alasannya ialah tidak perlu memanggil JS yang biasanya tersemat dalam Tombol Share yang lainnya, dan menjadi render js. Sekian artikel ihwal Membuat Tombol Share Simple dan Ringan Dibawah Postingan Semoga bermanfaat.


Sumber https://www.iwanberbagi.com