Membuat Share Button Di Bawah Postingan
Membuat Tombol Share atau Share Button bergotong-royong cukup gampang bila kita mau mencar ilmu dan mencobanya. Saya sendiri gres mencoba memasangnya ke dalam blog aku ini, Anda dapat melihat sendiri penampakannya (jika belum dirubah). Bila Anda tertarik, Berikut akan aku bagikan cara memasang tombol share sosial media yang sudah aku coba.
Anda tidak perlu andal koding, bahkan tidak tahu yang namanya koding juga tidak masalah. Seperti aku yang belum pernah sama sekali berkenalan dengan koding jugga dapat memasang tombol share button ke dalam blog. Berikut caranya :
1. Silakan Anda login Blogger, pilih Template >> Esit HTML
Salin dan tempelkan aba-aba dibawah ini diatas aba-aba ]]></b:skin>
/* social share buttons */
.social-buttons-box {height: 67px;margin:20px 0 15px;overflow:hidden;}
.social-buttons {margin:0 0;height:67px;float:left;}
.social-buttons .share {float:left;margin-right:10px;display:inline-block;}
.share-btn {margin:15px 0 25px;height:20px;overflow:hidden;}
Selanjutnya silakan copy aba-aba berikut ini, kemudian tempelkan di bawah aba-aba : <data:post.body/> atau dapat juga <div class='post-footer'>
<div class='social-buttons-box'>
<div class='social-buttons'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text-javascript'> lang:en_US</script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div style='clear: both;'/>
Langkah selanjutnya kita tinggal memasang aba-aba script dibawah ini dan diletakan diatas aba-aba </body>. Berikut kodenya :
<script>
window.___gcfg = {lang: 'id'};
(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>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Langkah terakhir 'simpan'.
2. Silakan cek tampilan blog Anda, coba lihat apakah tombol share button sudah menampakkan dirinya, kalau sudah berarti Anda sudah berhasil menciptakan tombol share button. Silakan baca juga cara memasang script 'google tag manager'.
Semoga bermanfaat.