Cara Memasang Social Share Button Keren dengan Javascript

Cara Memasang Social Share Button Blog dengan Javascript – Jika sobat berkeinginan menggunakan mode design sosial share button bergaya sederhana namun tetep fast loading, salah satunya adalah seperti materi artikel pada kesempatan sore hari ini.

Social share button merupakan sebuah tools yang bisa sobat gunakan atau orang lain yang membaca artikel sobat untuk disebarkan kepada pembaca lainnya. Tujuannya tak lain karena memang merasa perlu untuk memberitahukan akan keberadaan artikel yang sedang ia baca. Dengan begitu, proses promosi dan penyebaran tulisan sobat akan menjadi lebih mudah dengan keberadaan social share button.

Sudah tahukan pentingnya social share button bagi perkembangan blog kita? Selanjutnya mari kita simak cara memasang social share button menarik dan fast loading dengan menggunakan JavaScript ala Kompi.

Cara Memasang Social Share Button Blog dengan Javascript – Tips SEO Design Blog

.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;}

4. Copas kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<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=xxxxxx&related=xxxxxx” 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>

5. Ganti kode yang berwarna merah di atas dengan username Twitter sobat.
6. Save template

Untuk melihat hasilnya, silakan lihat DEMO

Jika belum berhasil, sobat bisa mengganti kode pada langkah nomor 4 dengan kode di bawah ini:

<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=xxxxxx&related=xxxxxx” 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>

Mudah kan? Dengan menggunakan tombol social share button, blog sobat akan semakain bagus dan berkualitas.

Demikian sekelumit tips SEO design blog sore ini, khususnya tentang Cara Memasang Social Share Button Keren dengan Javascript. Semoga bermanfaat, salam.