Social Share Button Kompi Ajaib

Ditulis oleh: Adhy Suryadi
Ditulis pada: 2/15/2016

Sebenarnya saya sudah membagikan cara membuat social share button ini, namun kemudian saya sendiri merubah sedikit tampilannya untuk saya pakai sendiri sampai saat ini. Dan tombol berbagi ini juga sudah saya pasang di template Kompi Males dan template Kompi Flexible.

Namun jika Anda sedikit kesulitan untuk mengambil kode-kodenya dari template Kompi Males, kini saya share kode-kode social share button Kompi Ajaib ini agar mudah untuk mencobanya di blog Anda.

Untuk mencobanya silahkan copy kode-kode di bawah ini.

1. Kode CSS
Simpan kode CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

.share,h2.sharetitle{display:block;float:left}

h2.sharetitle{font-size:18px;margin-top:15px!important;font-weight:500;line-height:1.4em}

.share,.sharethis{position:relative}

.sharethis{margin:10px 0 10px 20px;}

.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out}

.fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle}

.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#555;background:#fafafa;border:1px solid #999}

.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}

#share-menu{display:none}

.dropdown-menu{position:absolute;top:100%;right:5px;z-index:1000;max-width:100px;padding:5px 10px;margin:0!important;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}

.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}

.dropdown-menu li a{color:#333!important;font-weight:300;display:block}

.dropdown-menu li a:hover{color:#e8554e!important}

.share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}

.clear{clear:both}

</style>

</b:if>

2. Kode HTML
Copy kode HTML di bawah ini:


<b:includable id='share-tool' var='post'>

<script type='text/javascript'>

//<![CDATA[

var siteurl = window.location.href;

  document.write('<div class="sharethis"><div class="share"> \

<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\

    <i class="fa fa-google-plus goplus"></i> Google</a> \

<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\

    <i class="fa fa-facebook fbi"></i> Facebook</a> \

<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\

    <i class="fa fa-twitter tewe"></i> Twitter</a> \

    <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \

<ul class="dropdown-menu" id="share-menu"> \

    <li><a href="javascript:pinIt();">Pinterest</a></li>\

    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \

    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \

    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \

    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \

    <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \

    <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \

    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \

    <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \

    <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \

    </ul> \

</div>\

<div class="clear"></div></div> \

');

function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};

//]]>

</script>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<script>

//<![CDATA[

var whatsurl = window.location.href;

var whattitle=encodeURIComponent(document.title);

var whattitle_esc=unescape(whattitle);

document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\

<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\

Share</a>\

');

if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}

//]]>

</script>

</b:if>

</b:includable>

Dan simpan tepat di bawah kode berikut:


<b:includable id='post' var='post'>

............

............

............

</b:includable>

Sehingga penampakannya akan seperti berikut


<b:includable id='post' var='post'>

............

............

............

</b:includable>

<b:includable id='share-tool' var='post'>

<script type='text/javascript'>

//<![CDATA[

var siteurl = window.location.href;

  document.write('<div class="sharethis"><div class="share"> \

<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\

    <i class="fa fa-google-plus goplus"></i> Google</a> \

<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\

    <i class="fa fa-facebook fbi"></i> Facebook</a> \

<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\

    <i class="fa fa-twitter tewe"></i> Twitter</a> \

    <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \

<ul class="dropdown-menu" id="share-menu"> \

    <li><a href="javascript:pinIt();">Pinterest</a></li>\

    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \

    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \

    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \

    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \

    <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \

    <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \

    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \

    <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \

    <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \

    </ul> \

</div>\

<div class="clear"></div></div> \

');

function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};

//]]>

</script>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<script>

//<![CDATA[

var whatsurl = window.location.href;

var whattitle=encodeURIComponent(document.title);

var whattitle_esc=unescape(whattitle);

document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\

<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\

Share</a>\

');

if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}

//]]>

</script>

</b:if>

</b:includable>

Kemudian copy kode di bawah ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2 class='sharetitle'>Share this:</h2>

<div class='clear'/>

<b:include data='post' name='share-tool'/>

</b:if>

Dan simpan di bawah postingan, cari kode seperti atau mirip kode di bawah ini.


...............

...............

      <data:post.body/>

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

    </div>

Sehingga penampakannya seperti di bawah ini


...............

...............

      <data:post.body/>

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

    </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2 class='sharetitle'>Share this:</h2>

<div class='clear'/>

<b:include data='post' name='share-tool'/>

</b:if>

3. Kode Javascript
Simpan kode Javascript di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};

var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});

//]]>

</script>

</b:if>

Tombol berbagi ini menggunakan Font Awesome, jadi pastingan Anda sudah memasang Font Awesome di blog Anda.

Dan tombol ini juga dilengkapi dengan tombol berbagi Whatsapp yang akan tampil hanya di mobile device.

Social Share Button Kompi Ajaib

Ditulis oleh: Adhy Suryadi Ditulis pada: 2/15/2016

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 2/15/2016