advertisement

Cara Memasang Social Share Button Keren dengan Javascript

By On Sunday, February 7th, 2016 Categories : Internet

PalingPopuler.Com mengabarkan tentang Cara Memasang Social Share Button Keren dengan Javascript.

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 simpel namun tetep fast loading, satu diantaranya ialah seperti materi artikel pada kesempatan sore hari ini.

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

Sudah tahukan utamanya 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

Untuk memasang tombol penyebaran artikel ini cukup mudah kok, yakni silakan lakukan langkah di bawah ini:
1. Buka akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini dan letidakkan tepat di atas kode ]]></b:skin> maupun </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;}

advertisement

4. Copas kode di bawah ini dan letidakkan 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 yg berwarna merah di atas dengan username Twitter sobat.
6. Save template

Untuk melihat hasilnya, silakan lihat DEMO

advertisement

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.



Cara Memasang Social Share Button Keren dengan Javascript
sumber : forumblogindo.com

Pencarian Terkini :

Cara Memasang Social Share Button Keren dengan Javascript | Admin | 4.5