Cara Memasang Tombol Berbagi (Social Share) Posting Blog Tanpa JavaScript

Baca Juga

Memasang Tombol Berbagi ke Media Sosial (Social Share Button) di bawah posting blog memudahkan admin dan pembaca untuk share artikel ke akun media sosial, termasuk WhatsApp (WA).

Berikut ini Cara Memasang Tombol Berbagi (Social Share) Posting Blog Tanpa JavaScript dengan tampilan seperti gambar berikut ini:

Cara Memasang Tombol Berbagi (Social Share) di Bawah Posting Blog 

1. Tema > Edit HTML
2. Pasang kode CSS Tombol Berbagi ke Media Sosial berikut ini di atas kode ]]></b:skin>

.socialshare{float:left;text-align:left;width:100%;    margin: 15px 0;}
.socialshare a{text-align:center}
.socialshare .fa.fa-facebook,.socialshare .fa.fa-twitter,.socialshare .fa.fa-google-plus,.socialshare .fa.fa-whatsapp,.socialshare .fa.fa-commenting{background:#9b9b9b none repeat scroll 0 0;border-radius:3px;border-radius:50%;color:#fff;font-size:18px;line-height:40px;transition:all 0.31s ease 0s;width:40px}
.socialshare .fa.fa-facebook:hover,.socialshare .fa.fa-twitter:hover,.socialshare .fa.fa-google-plus:hover,.socialshare .fa.fa-whatsapp:hover {opacity:.9}
.socialshare .fa.fa-facebook{background:#3b5998 none repeat scroll 0 0}.socialshare .fa.fa-twitter{background:#00d1f7 none repeat scroll 0 0}.socialshare .fa.fa-google-plus{background:#df4b38 none repeat scroll 0 0}.socialshare .fa.fa-whatsapp{background:#25d366 none repeat scroll 0 0}

3. Pasang HTML Tombol Berbagi ke Media Sosial berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<div class='socialshare'>
<a expr:href='&quot;   https://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><i class='fa fa-facebook'/></a>
 <a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel='nofollow'><i class='fa fa-google-plus'/></a>
 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&amp;text=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'><i class='fa fa-twitter'/></a>
<a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-whatsapp'/></a>
</div>

4. Save. Simpan Template!

Demikian Cara Memasang Tombol Berbagi (Social Share) Posting Blog Tanpa JavaScript. Bentuk bulat. (blogromeltea.blogspot.com).*