Cara Memasang Simple Pasang Share Button atau Tombol Bagikan Di Blog

Blog Terkreatif.com - Assalamualaikum wr.wb.
Sudah kita ketahui bahwa tombol bagi ke media sosial (social share button) adalah widget atau fitur yang dipasang di bawah posting blog ataupun di atas postingan blog yang untuk memudahkan kita dan para pengunjung membagikan tulisan kita ke media social mereka. Dengan adanya widget ini membuat blog atau website sobat sekalian menjadi ramah pengguna dan juga sangat mendukung pengoptimalan mesin pencari (SEO) yang dikenal dengan Social Media Optimization (SMO).

Jadi, pada kesempatan kali ini saya akan membagikan artikel mengenai cara membuat tombol share sederhana dengan penambahan Linkedin dan Pinterest. Tombol share ini cukup sederhana dan tidak menggunakan sama sekali JavaScript, jadi cocok agar loading blog sobat tetap stabil. Langsung saja bagaimana langkah-langkah pemasangannya pada blog berikut ini :

Memasang Simple Share Button Di Blog

Jadi yang pertama silahkan sobat simpan CSS di bawah ini tepat berada diatas kode ]]></b:skin> atau </style>. 

/*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}

Jika sudah kemudian sobat simpan atau copy dulu kode simple share button di bawah ini :

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

Selanjutnya untuk memasang  kode simple share button, kalian terlebih dahulu harus mencari kode seperti dibawah ini :

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

Jika sobat sudah menemukan kodenya seperti di atas silakan simpan kode tombol share yang sudah sobat simpan atau copy tersebut diatas kode ini <data:post.body/> bila ingin menyimpanya diatas artikel (letakan pada tanda …… ) atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel (letakan pada tanda …… ). Sehingga menjadi kode seperti dibawah ini, coba sobat perhatikan kode yang Saya tandai.

<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 expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
.....
 </article>
</b:includable>

Sekian dulu artikel saya mengenai Cara Memasang Simple Pasang Share Button atau Tombol Bagikan Di Blog. Semoga bermanfaat bagi kalian semua dan jangan lupa share artikel ini jika bermanfaat dan kalian suka.
Terima Kasih!! :)