Memasang Social Share Button No JS With Javascript

Setelah kemarin saya memposting Cara Membuat Sticky Share Button Blogger yang sudah kita simak bersama dan mungkin dari beberapa sobat ada yang sudah mempraktekannya, ada beberapa pertanyaan yang masuk melalui email apakah bisa memasang sosial share button tanpa harus membuat loading blog menjadi lambat, jawabnya bisa. 

Untuk menjawab pertanyaan tersebut maka di posting kali ini saya akan posting Cara Memasang Social Share Button No JS With Javascript tanpa harus membebani loading blog sehingga loading blog tetap stabil, sebenarnya caranya cukup mudah disini saya modifikasi share buttonnya tampilannya jadi berjejer ke samping kemudian tampilannya statis jadi bisa menyesuaikan tampilan dan juga nantinya bisa di pasang di bawah postingan blog sobat.  

Di Sosial share Button ini saya tambahkan sosial share lebih banyak dari mulai Digg, Linkedin, Delicious, Stumbleupon, Tumbrl, Pocket dan lain-lain yang ke semuanya itu dapat sobat gunakan dan pastikan sebagai senjata mendatangkan Trafik. Kemudian Link share button ini tampilannya di modify bisa Show Hide yang ditandai dengan tombol Plus contoh tampilannya bisa dilihat pada gambar diatas.

Ada yang menarik dari Postingan ini sesuai judul diatas Memasang Social Share Button No JS With Javascript saya hanya menyertakan link-link dari sosial share tersebut diatas jadi bisa mempercepat loading blog kemudian pada show hide di link sosial share tambahannya di postingan ini di sajikan dalam 2 versi yaitu versi Javascript dan versi Jquery jadi sobat bisa pilih mau menggunakan yang mana antisipasi jika salah satu tidak cocok pada template yang sobat pakai. Baiklah untuk sobat yang mau mencobanya silahkan disimak berikut ini.

Langkah Awal

Silahkan sobat salin kode CSS dibawah ini kemudian letakkan di atas kode ]]></b:skin> atau bisa juga </style>   

.share,h2.sharetitle{display:inline-block;float:left;margin-right:10px}
h2.sharetitle{font-size:24px;margin-top:6px;font-weight:600}
.sharethis{position:relative;margin-bottom:20px}
.share{position:relative;}
a.gp{color:#ba3227}
a.fb{color:#324b81}
a.tw{color:#01a7de}
a.pr{color:#0a7111}
span.pl{color:green;cursor:pointer}
a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}
#share-menu{display:none}
.dropdown-menu{position: absolute;top: 100%;right:2px;z-index: 1000;float: left;min-width: 100px;padding: 5px 10px;margin: 2px 0 0;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:400;display:block}
.dropdown-menu li a:hover{color:#e8554e!important;}

Setelah itu lanjutkan salin dan letakkan kode-kode javascript tepat dibawah kode berikut atau tampilan kodenya seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Berikut Kode Javascriptnya
1. Jika tampilannya Show Hide menggunakan Javascript

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='sharetitle'>Share this:</h2>
<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+">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=dibalikseo&related=dibalikseo" target="_blank" title="Share to Twitter">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \
    <span class="fa-stack fa-lg pl" data-target="#share-menu"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></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> \
    </ul> \
</div><div class="clear"></div></div> \
');
var button=document.querySelector(".pl");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
//]]>
</script>
</b:if>

Perhatikan kode yang ditandai dibalikseo silahkan sobat ganti dengan user twitter sobat


2. Jika menampilkan show hide menggunakan Jquery
nah sebelum mengunakan kode ini sobat wajib sudah memasang Jquery Library terserah mau pakai yang versi berapun.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='sharetitle'>Share this:</h2>
<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+">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=DibalikSeo&related=dibalikseo" target="_blank" title="Share to Twitter">\
    <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \
    <span class="fa-stack fa-lg pl"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></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> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script>
</b:if>

Silahkan sobat ganti kode dibalikseo yang ditandai dengan username Twitter sobat

Yang Perlu di Perhatikan :
Kode-kode share button diatas menggunakan FontAwesome jadi pastikan sobat sudah memasangnya di blog sobat dan perlu diperhatikan juga jika terdapat perbedaan karena kode CSS setiap blog itu berbeda-beda biasanya tergantung template yang sobat gunakan ada yang pernah mengalami berpengaruh di kode css widget, jadi di widget yang baru di pasang ini silahkan sesuaikan penempatanya kalau sobat mau pasang di sebelah kiri silahkan sobat sesuaikan posisi left di kode CSS berikut ini.  

a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}

Dan Selesai, kode ini bisa sobat pasang di Platform Blogger atau Wordpress pun bisa, selamat mencoba.