Memasang Social Share Button No JS With Javascript

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

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

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

Ada yang menarik dari Postingan ini sesuai judul diatas Memasang Social Share Button No JS With Javascript aku hanya menyertakan link-link dari sosial share tersebut diatas jadi mampu 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 sahabat mampu pilih mau menggunakan yang mana antisipasi kalau salah satu tidak cocok pada template yang sahabat pakai. Baiklah untuk sahabat yang mau mencobanya silahkan disimak berikut ini.

Langkah Awal

Silahkan sahabat salin instruksi CSS dibawah ini kemudian letakkan di atas instruksi ]]></b:skin> atau mampu 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 sempurna dibawah instruksi berikut atau tampilan kodenya menyerupai 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 instruksi yang ditandai dibalikseo silahkan sahabat ganti dengan user twitter sobat


2. Jika menampilkan show hide menggunakan Jquery
nah sebelum mengunakan instruksi ini sahabat 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 sahabat ganti instruksi dibalikseo yang ditandai dengan username Twitter sobat

Yang Perlu di Perhatikan :
Kode-kode share button diatas menggunakan FontAwesome jadi pastikan sahabat sudah memasangnya di blog sahabat dan perlu diperhatikan juga kalau terdapat perbedaan alasannya ialah instruksi CSS setiap blog itu berbeda-beda biasanya tergantung template yang sahabat gunakan ada yang pernah mengalami besar lengan berkuasa di instruksi css widget, jadi di widget yang gres di pasang ini silahkan sesuaikan penempatanya kalau sahabat mau pasang di sebelah kiri silahkan sahabat sesuaikan posisi left di instruksi 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, instruksi ini mampu sahabat pasang di Platform Blogger atau Wordpress pun bisa, selamat mencoba.