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

Follow @romel_tea
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:

Tombol Berbagi ke Media Sosial

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).*

Thanks for reading Cara Memasang Tombol Berbagi (Social Share) Posting Blog Tanpa JavaScript | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!