Membuat Social Share Button Ala Berminat Template

Tutorial blog kali ini tentang cara membuat tombol berbagi atau social share button seperti yang terpasang pada Template Berminat. Bagi siapa saja yang sudah bertanya bagaimana cara membuat tombol berbagi ke media sosial pada template tersebut, silahkan membaca artikel ini.

Beberapa widget tombol berbagi dengan gaya berbeda yang telah saya posting sebelumnya juga dapat anda lihat pada link-link berikut ini. Siapa tahu ada style yang sesuai dengan selera anda.

Artikel serupa:
Membuat Social Share Button Responsive Tanpa JavaScript di Blog
Membuat Tombol Social Share dengan Counter di Blog
Cara Membuat Tombol Share di Blog dengan Efek Peekaboo

Nah, untuk membuat social share button seperti yang terpasang pada Template Berminat, berikut kode atau script yang anda butuhkan.
Membuat Social Share Button Ala Berminat Template

# Kode CSS
Letakkan dan simpan kode CSS berikut ini di atas kode </head> atau &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>

# Kode HTML
Silahkan copy kode HTML berikut:
    <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>

Temukan dan ciutkan kode <b:includable id='post' var='post'> sehingga menjadi seperti ini:
<b:includable id='post' var='post'>…</b:includable>

Kemudian kode HTML yang dicopy di atas, letakkan di bawah kode yang diciutkan tadi.

# Kode pemanggil widget
Untuk memanggil widget social share button, copy code berikut ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4 class='sharetitle'>Shares</h4>
<b:include data='post' name='share-tool'/>
</b:if>

Lalu letakkan di bawah kode ini (untuk menampilkan widget di bawah postingan):
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

# Kode JavaScript
Agar tombol more dapat berjalan dengan dengan baik, copy kode JacaScript berikut ini, lalu letakkan di atas kode </body> atau &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>

Perhatian:
Widget social share button ini menggunakan Font Awesome, jadi pastikan pada template anda sudah menggunakan Font Awesome.

Advertisement