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.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates