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

Sebelumnya CB sudah share cara pasang tombol share posting ke media sosial dan cara pasang tombol menyebarkan ke WhatsApp.

Kali ini CB gabungkan menjadi cara memasang tombol Share Media Sosial (Social Media Button) Facebook, Twitter, Google Plus, dan WhatsApp (WA)  di Bawah Postingan Blog.

Kelebihannya, yang satu ini tanpa Javascript. Karena tombol berbaginya tanpa Javascript, maka risikonya ringan, fast loading.

Penampilannya ibarat gambar di atas. Cara mengecek berfungsi-tidaknya lakukan di HP, jangan di Desktop.

Cara Pasang Share Media Sosial plus WhatsApp Tanpa Javascript

1. Tema > Edit HTML
2. Copas instruksi 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 instruksi HTML Tombol Share Media Sosial plus WA ini di bawah instruksi <data:post.body/> yang kedua atau ketiga, atau di atas instruksi <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://plus.google.com/share?url=&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:#c0361a;' target='_blank' title='Google+'>Google+</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 instruksi </head>. Abaikan kalau sudah ada di template blog Anda.

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

5. Save!

Lihat Kode di CodePen:


Demikian Cara Memasang Tombol Share Media Sosial plus WA Tanpa Javascript di bawah postingan blog, sehingga ringan alias fast loading. Good Luck & Happy Blogging (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours