Cara membuat tombol share dibawah postingan blog

Social media merupakan salah satu jalan untuk membuat blog semakin dikenal oleh masyarakat luas. Dengan adanya artikel yang bermanfaat dan juga terdapat tombol share media sosial didalam blog, besar kemungkinan artikel yang ada dalam blog kita akan di share oleh si pembaca.

Tombol share atau yang sering disebut dengan widget share button juga ada beberapa jenis, yaitu:

1. Tombol share responsive dibawah postingan blog;
2. Tombol share responsive di samping blog;
3. Dan yang terakhir, tombol share media sosial melayang di blog.

Cara membuat dan memasang tombol share dibawah postingan blog

Membuat tombol share dibawah postingan blog

Pembahasan kali ini akan membahas bagaimana cara membuat tombol share keren dibawah postingan blog. Keutamaan Anda memberi tombol share di blog adalah visitor bisa semakin meningkat. Tidak percaya? Coba saja.

Cara memasang tombol share responsive di blogspot 

Pertama, silahkan Anda pilih menu tema dan klik edit html. Selanjutnya adalah cari kode  <b:includable id='post' var='post'> didalam kolom edit html.

Jika sudah ketemu, ciutkan kode tersebut hingga menjadi seperti berikut ini:

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

Masukkan kode HTML

Lanjut langkah berikutnya yaitu masukan kode dibawah ini tepat setelah kode yang diciutkan diatas.

<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"></i></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"></i></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter"></i></a> \
<a class="pin" href="http://pinterest.com/pin/create/button/?source_url=' + siteurl + '" target="_blank" title="Share to Pinterest">\
    <i class="fa fa-pinterest"></i></a> \
    <span class="pl" id="pl" onclick="showhide()" title="More Share"><i class="fa fa-plus"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
    <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="http://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="http://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="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    <li><a href="http://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> \
');
//]]>
</script>
</b:includable>

(Baca juga:Cara Membuat Seo Smart Link di Blog)

Masukkan kode CSS

Masukkan kode CSS dibawah ini tepat sebelum kode </head> atau jika tidak ada maka cari kode &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* share this */
.share,h4.sharetitle{display:inline-block;float:left;position:relative}
h4.sharetitle{width:80px;text-transform:uppercase;font-size:15px;padding:0;margin-top:3px;margin-right:25px;text-align:center;font-weight:bold;color:#777}
h4.sharetitle:before{content:&quot;\f1e0&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding:2px 35px 0;text-align:center;}
.sharethis{position:relative;margin:0}
.share{position:relative;margin:0;}
.share a,span.pl{display:inline-block;color:#fff;padding:12px 0 10px;width:85px;text-align:center;margin-right:8px;margin-bottom:8px;border-radius:5px;}
.share a:hover,span.pl:hover{box-shadow:0 0 10px rgba(0,0,0,.3)}
.share i,span.pl i {font-size:25px;padding:0;margin:0}
a.gp{background:#de3425}a.fb{background:#395796}a.tw{background:#4cb0ea}a.pr{background:#0a7111}a.pin{background:#ce2127}
span.pl{background:#ff9d40;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position: absolute;top: 100%;right:2px;z-index:9999;float: left;padding:0;margin:5px 0 0;font-size: 14px;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box}
ul.dropdown-menu{margin:10px 0 0 !important;background-color:#fff;box-shadow: 0 1px 4px rgba(0,0,0,.6);border-radius:2px}
.dropdown-menu li{list-style: none!important;margin: 0!important;padding:0 !important}
.dropdown-menu li a{clear:both;margin:0 !important;color:#444!important;font-weight:400;display:block;padding:5px 20px !important;border-radius:0 !important}
.dropdown-menu li a:hover{background:#2b427d!important;color:#fff !important}
</style>
</b:if>

Masukkan kode JS

Masukkan kode javascript dibawah ini sebelum/diatas kode  </body> atau jika tidak ada cari kode &lt;!--</body>--&gt;&lt;/body&gt;

<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"};
//]]>
</script>

</b:if>

Kode pemanggil

Langkah yang terakhir adalah masukkan kode pemanggil agar tombol share dibawah postingan blog dapat berjalan dengan baik.
Cari kode berikut didalam edit HTML:

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

Jika sudah ketemu, selanjutnya adalah masukkan kode dibawah ini tepat setelah kode diatas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4 class='sharetitle'>Shares</h4>
<b:include data='post' name='share-tool'/>
</b:if>

Save template. Untuk hasil adalah seperti pada blog ini.

Source: http://www.bungfrangki.com/2016/02/membuat-social-share-button.html