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

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

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

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *