Membuat Social Share Keren dan Ringan dengan Warna Polos

Jika sebelumnya Ngonline06 telah berbagi tentang membuat social share yang keren dan ringan berwarna, maka sekarang akan berbagi social share dengan warna polos. Karena tidak bisa dipungkiri bahwa pilihan bentuk dan warna akan mempengaruhi jua social share yang akan dipilih.

Sebelum membahas tata cara membuatnya, perlu diketahui bahwa 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.

Keren dan ringan masih menjadi titik tumpu pada social share kali ini. Mengingat dua hal tersebut sangat urgen untuk membuat website tampil menawan dan profesional.

Membuat Social Share yang Keren dan Ringan dengan Warna Polos

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 mas Adhy Suryadi.

#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,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}
.clear{clear:both}
</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>

Letakkan kode berikut ini setelah kode di atas:

   <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: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;'>
<h2 class='sharetitle'>Share this:</h2>
<div class='clear'/>
<b:include data='post' name='share-tool'/>
</b:if>

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

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