Membuat Tombol Share Simple Dibawah Posting

Sebenarnya widget share ini pertama kali saya lihat pada blog kang Adhy selaku Pemilik Kompiajaib.com, seperti biasa saya langsung intip kodenya sekalian belajar. Karena sebelumnya saya telah modifikasi tampilannya sehingga menjadi lebih simpel (menurut saya sih gitu) hehe. 

Untuk originalnya, Anda bisa lihat pada blog kang Adhy yah. Untuk artikel ini sendiri adalah 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, kalau 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 agar hanya terload dibagian postingan, sehingga tidak membebani homepage blog. selanjutnya Anda cari kode tepat seperti dibawah ini.

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

Selanjutnya letakkan kode dibawah ini tepat dibawah kode 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="Share to Google+">\
    <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="Share to Facebook">\
    <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="Share to Twitter">\
    <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 kode yang saya berikan, namun bisa 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 lalu lihat hasilnya.

Karena widget ini menggunakan FontAwesome, untuk template Anda yang telah dilengkapi FontAwesome, tidak akan ribet lagi. Widget ini sangat ringan, karena tidak perlu memanggil JS yang biasanya tersemat dalam Tombol Share yang lainnya, dan menjadi render js. Sekian artikel tentang Membuat Tombol Share Simple dan Ringan Dibawah Postingan Semoga bermanfaat.