Membuat Social Share Keren dan Ringan

Social share dalam sebuah website atau blog sangatlah urgen. Kegunaan social share selain untuk memfasilitasi pengunjung blog untuk berbagi kepada teman-temannya juga mampu mendongkrak pelipatan kunjungan di website itu sendiri. Oleh karenanya, hampir semua website atau blog memiliki social share sebagai menu pokok.

Setelah mengetahui keuntungan yang didapat dari pemasangan social share, maka sekarang sahabat perlu memilih desain social share yang cocok untuk website atau blog sahabat. Pemilihan dan penentuan social share untuk dipasang di blognya tentu dipengaruhi oleh template dan bentuk blognya.

Maka, disini, ngonline06 menawarkan social share yang sangat keren dan dijamin sahabat tertarik untuk memasangnya.

Keuntungan social share yang ngonline06 tawarkan ini adalah bentuknya yang ciamik alias keren abis plus loading yang ringan. Hampir bisa dikatakan, social share ini tidak mempengaruhi loading blog sahabat karena ringannya tersebut.

Membuat Social Share yang Keren dan Ringan

OK, langsung saja, jika sahabat ingin memasang dan memakai social share yang keren seperti pada gambar di atas, berikut adalah langkah-langkah membuatnya. Perlu diketahui bahwa resep social share ini adalah milik bung frangky.

#Langkah Pertama

Hal yang perlu dilakukan pertama kali adalah silahkan membuka template blog sahbat. Letakkan kode CSS berikut di atas kode </head>.

<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>

#Langkah Kedua

Silahkan cari kode <b:includable id='post' var='post'> pada template sahabat dan scroll atau ciutkan hingga kode </b:includable>. Berikut penampakan kode setelah diciutkan.

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

Hapus semua kode di atas dan ganti dengan kode berikut 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"></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>

#Langkah Ketiga

Silahkan copy kode pemanggil social share berikut. Kode ini dipasang sesuai dengan posisi yang hendak diletakkan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4 class='sharetitle'>Shares</h4>
<b:include data='post' name='share-tool'/>
</b:if>
Dan, letakkan kode pemanggil di atas di bawah kode berikut pada template Sahabat (Ini jika ingin diletakkan di bawah postingan)
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

#Langkah Keempat

Untuk langkah terakhir, silahkan letakkan kode Java Script berikut setelah kode </body> agar social 'more' bisa berjalan dengan sempurna.

<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:
Sebelum mengotak-atik template, Sahabat sebaiknya menyimpan terlebih dahulu templatenya agar menghindari kesalahan saat perubahan. Demikian juga, tutorial ini menggunakan Font Awesome, jadi pastikan template Sahabat sudah tersemat font tersebut.

OK, demikian tutorial tentang membuat social share yang keren dan ringan. Semoga bermanfaat. Jika ada kesulitan, silahkan coret-coret di kotak komentar.