October 29, 2017

Cara Memasang Tombol Share Media Sosial plus WA Tanpa Javascript

October 29, 2017

Share Media Sosial plus WhatsApp (WA) Tanpa Javascript - Fast Loading
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 berbagi 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 jadinya ringan, fast loading.

Penampilannya seperti 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 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://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 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!

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

11 comments on Cara Memasang Tombol Share Media Sosial plus WA Tanpa Javascript

  1. My blog can not approve because I am only post photo so can you help me ????

    ReplyDelete
    Replies
    1. add descriptions to your photos in 3-5 paraghraph

      Delete
  2. terima kasih banyak atas infonya setelah saya coba berhasil 100%

    ReplyDelete
  3. Alhamdulillah, berhasil. Cuma saya kurang gemar dengan effect shadow pada bordernya. Bagaimana menghilangkan kesan shadow tersebut dan juga bagaimana menghilangkan kotak pada tulisan share? Mohon bantuan.

    ReplyDelete
  4. WORK 100%
    Terimakasih mas, sukses selalu,.

    ReplyDelete
  5. mantap sekali tutorialnya, semoga sukses dan berkah selalu

    ReplyDelete
  6. Adakah cara tanpa masuk ke edit html...?

    ReplyDelete
    Replies
    1. tidak ada, pake saja tombol share bawaan blogger

      Delete
  7. Saya pengguna template detikstyle CB, bisakah share button yang ada di detikstyle diganti dengan share buton yang seperti ini. Thakns

    ReplyDelete

Contact Form

Name

Email *

Message *