Memasang Simple Share Button Di Blog

Jika sebelumnya Saya pernah share artikel homogen yakni Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5, kali ini Saya share artikel serupa yakni menciptakan tombol share sederhana dengan penambahan Linkedin dan Pinterest. Tombol share ini sederhana dan tidak memakai sama sekali JavaScript, jadi cocok biar loading blog tetap stabil. Langsung saja bagaimana pemasangannya pada blog.

Memasang Simple Share Button Di Blog

Pertama silakan Anda simpan CSS ini diatas aba-aba ]]></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}

Kemudian simpan aba-aba dibawah 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>

Untuk memasang Simple Share Button pada blog silakan Anda cari dahulu aba-aba ibarat 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>

Setelah ditemukan aba-aba diatas silakan Anda simpan aba-aba tombol share tersebut diatas aba-aba <data:post.body/> kalau ingin menyimpanya diatas artikel atau simpan dibawah aba-aba <data:post.body/> kalau ingin menyimpannya dibawah artikel. Sehingga menjadi aba-aba dibawah ini, perhatikan aba-aba 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>

Demo

Sumber http://kang-mousir.blogspot.com

Memasang Simple Share Button Di Blog

4/ 5

Oleh Admin