Cara Membuat Social Tombol Share Button Ala Kompi Ajaib




Cara Membuat Social Tombol Share Button Ala Kompi Ajaib
Cara Membuat Tombol Social Share Button Ala Kompi Ajaib : Hai selamat pagi sahabat blogger, berjumpa lagi dengan saya mizipediacom. Nah pagi pagi yang cerah ini saya akan share mengenai cara membuat tombol share Button di blog, Sebelumnya sudah banyak juga saya membuat artikel seperti ini namun dengan tombol share yang lain lagi bisa anda baca juga banyak pilihan membuat tombol share.

Saya akan menjelaskan sedikit apa manfaatnya jika kita memasang tombol share. Dengan kita memasang tombol share di blog/ website akan memudahkan bagi pengunjung blog kita jika mereka ingin menyebar luaskan artikel yang sudah mereka baca ke orang lain baik itu mereka share ke facebook, twitter ataupun jejaring sosial lainnya melalui akun si orang yang men-share nya. Nah sebagai contoh bila ada seseorang yang men-share artikel kita terus orang itu menggunakan akun facebook maka akan secara otomatis link artikel kita terkirim ke dinding orang tersebut dan terbaca pula oleh teman-teman facebook si orang tersebut.

Mengapa saya membuat artikel seperti ini, karena saya suka dengan style dari tombol share tersebut, sangat simpel atau sederhana lah, dan tombol berbagi ini juga sudah saya pasang di di template mizipediacom ini di bawah judul. Bisa anda lihat sendiri seperti ini penampilan tombol share ini.

Nah jika anda suka dengan tombol share tersebut, namun terdapat kesulitan dalam penerapannya, maka anda jangan khawtir untuk masalah itu. Karena saya siap untuk membantu anda. Yuk langsung saja ikuti langkah- langkah di bawah ini dengan cermat ya. Khususnya untuk yang masih pemula tau newbie.

Tombol Social Share Butto

1. Pastikan anda  sudah masuk di dasbhor anda sendiri
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
# Kode CSS
3. Simpan kode CSS di bawah ini di atas </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}
.share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}
.clear{clear:both}
</style>
</b:if>

# Kode HTML
4. Lalu anda copy kode HTML di bawah ini.
<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:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:includable>
5. Dan letakkan kode di atas  tadi di bawah kode ini
<b:includable id='post' var='post'>
............
............
............
</b:includable>
6. Sehinggan penampakan hasilnya akan seperti di bawah ini
<b:includable id='post' var='post'>
............
............
............
</b:includable>
<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:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:includable>
7. Kemudian anda copy kode di bawah ini
<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>
8. Dan simpan di bawah postingan anda atau bisa juga di bawah judul, cari kode seperti ini atau mirip kode di bawah ini.
...............
...............
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
9. Sehingga penampakannya akan seperti di bawah ini
...............
...............
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<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>
# Kode JavaSccript
10. Simpan kode Javascript di bawah ini di atas kode </body>
<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"};
var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
//]]>
</script>
</b:if>
Tombol berbagi ini menggunakan Font Awesome, jadi pastingan Anda sudah memasang Font Awesome di blog Anda. Dan tombol ini juga dilengkapi dengan tombol berbagi Whatsapp yang akan tampil hanya di mobile device.

Demikian penjelasan pada pagi ini, selamat mencoba dan bisa berhasil ya. Jika ada yang kurang jelas bisa anda tanyakan di tombol komentar di bawah ini.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect