Memasang Simple Share Button di Blog - Pada post sebelumnya saya telah membahas tentang Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5 dan Social Button Paling Keren Dengan Tampilan Hover, sekarang saya akan membahas tentang Memasang Simple Share Button di Blog. Oke deh langsung tanpa basa basi lagi.
Memasang Simple Share Button di Blog
- Silahkan copy pastekan kode berikut di atas ]]></b:skin> / </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 kode tersebut.
<ul class='sharebutton'>
<li class='share'>Bagikan :</li>
<li class='fb'>
<a href='http://www.facebook.com/sharer.php?u=http://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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>
- Untuk memasang Simple Share Button pada blog silakan Anda cari dahulu 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>
- Setelah ditemukan kode diatas silakan Anda simpan kode tombol share tersebut diatas kode <data:post.body/> bila ingin menyimpanya diatas artikel atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel. Sehingga menjadi kode dibawah ini, 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>
<a href='http://www.facebook.com/sharer.php?u=http://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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 class='fb'>
</li>
<li class='linkedin'>
<a href='http://www.linkedin.com/cws/share?url=http://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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='pinterest'>
<li class='gplus'>
<a href='https://plus.google.com/share?url=http://teksmikro.blogspot.com/2014/11/memasang-simple-share-button-di-blog.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>
<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>
- Kemudian jangan lupa klik Simpan Template
Terimakasih atas partisipasi sahabat - sahabat blogger. Jangan lupa untuk mengshare post ini.
