Memasang Share Button Post Blog Simple

Nah berjumpa lagi dengan saya Mas-mas yang paling ganteng :v kwkw Sekarang saya akan mengajarkan Cara membuat Tombol Share / Share button all social media , Share Button Post yang sangat simple buat blog anda ini bisa memuaskan mata anda :v.

Share Button Post ini sangat lengkap Social media ada Facebook ,linkedin ,Pinterest,twitter dan google plus dan Share button yang simple ini tidak mengunakan JavaScript sama sekali, jadi membuat blog anda stabil dan loading tidak berat langsung saja gmna Tutorialnya:

1. Cara Memasang Share Button Post Blog Simple.

Langkah Pertama Anda Masukan CSS yang saya sediakan di bawah ini di atas Kode
atau]]> yang ada di dalam pengaturan HTML.

/*Share Button*/
.sharebutton{display:block;list-style:none;margin:10px 0;padding:0}
.sharebutton a{color:#FFFFFF!important;display:block;text-decoration:none!important}
.sharebutton li{float:left;margin-right:5px;}
.share{font-weight:bold;margin-right:10px;padding:7px 0}
.fb a{background:#306199;padding:7px 15px}
.fb a:hover{background:#244872}
.linkedin a{background:#007bb6;padding:7px 15px}
.linkedin a:hover{background:#005983}
.twitter a{background:#26c4f1;padding:7px 15px}
.twitter a:hover{background:#0eaad6}
.gplus a{background:#e93f2e;padding:7px 15px}
.gplus a:hover{background:#ce2616}
.pinterest a{background:#b81621;padding:7px 15px}
.pinterest a:hover{background:#8a1119}
.pinterest{margin-right:0}

2. Anda cari dahulu kode seperti di bawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>

3. Nah selanjutnya kita masukan kode di bawah ini.

Cara menyisipkannya masukan di bawah kode dan anda masukan kode tombol share Yang saya sedikan ini di atas misalkan anda ingin Tombol share berada di atas postingan Atau simpan kode tombol sharedi bawah kode bila anda ingin tombol share berada di bawah postingan.

<ul class='sharebutton'>
  <li class='share'>Bagikan :</li>
<li class='fb'>
<a href='http://www.facebook.com/sharer.php?u=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a href='http://www.linkedin.com/cws/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a href='http://twitter.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type' ,'text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>

4.  Contoh Kode yang sudah saya sisipkan.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>

<ul class='sharebutton'>
  <li class='share'>Bagikan :</li>
<li class='fb'>
<a href='http://www.facebook.com/sharer.php?u=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a href='http://www.linkedin.com/cws/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a href='http://twitter.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
.....
 </article>
</b:includable>

5.Nah tinggal simpan lihat hasilnya bro :v

 

• DEMO