Cara Memasang Tombol Share Media Sosial plus WA Tanpa Javascript

Cara Memasang Tombol Share Media Sosial plus WhatsApp (WA) Tanpa Javascript - Fast Loading

Pada post sebelumnya sudah share cara pasang tombol berbagi ke WhatsApp.

Jadi post kali ini gabungan cara memasang tombol Share Media Sosial (Social Media Button) meliputi : tombol share buat Facebook, Twitter, dan WhatsApp (WA)  di Bawah Postingan Blog.

Untuk tombol share media social ini, tanpa menggunakan Javascript. Jadi jika anda menggunakannya atau menerapkannya pada blog anda tidak akan membebani loading dari blog anda alias ringan banget sob.

Cara mengecek berfungsi-tidaknya lakukan di versi mobile, bukan di Desktop.

Cara Pasang Share Media Sosial plus WhatsApp Tanpa Javascript

1. Tema > Edit HTML

2. Copas kode CSS Social Share Tanpa JS berikut ini di atas kode ]]></b:skin>

 
#share-button {margin:0 0 8px;padding:0;overflow:hidden}
#share-button p {float:left;box-shadow:1px 1px 5px  rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px  8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid  #fff;font-weight: 700;}
#share-button a {position:relative;float:left;box-shadow:1px 1px 5px  rgba(1,1,1,.1);border-radius:6px  6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px  3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}

3. Copas kode HTML Tombol Share Media Sosial plus WA ini di bawah kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class='post-footer'>

 
<div id='share-button' style='margin-top:8px;'>
<p>Share: </p>
<a  expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +  data:blog.url'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return  false;' rel='nofollow' style='background:#3b5998;' target='_blank'  title='Facebook'>Facebook</a><a  expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; +  data:blog.url + &quot;&amp;text=&quot; + data:post.title +  &quot;&amp;lang=id&quot;'  onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return  false;' rel='nofollow' style='background:#4099ff;' target='_blank'  title='Twitter'>Twitter</a>
<a data-action='share/whatsapp/share' style='background:#43d854'  expr:href='&quot;whatsapp://send?text=&quot; + data:post.title +  &quot;%20%2D%20&quot; + data:post.url'><i  aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a>
</div>

4. Copas link ke Font Awesome berikut ini di atas kode </head>. Abaikan jika sudah ada di template blog Anda.

 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Save!
Demikian Cara Memasang Tombol Share Media Sosial plus WA Tanpa Javascript di bawah postingan blog, sehingga ringan alias fast loading. Good Luck & Happy Blogging.