Cara Memasang Tombol Share Media Sosial pada Blog

Cara Memasang Tombol Share Media Sosial pada Blog - Kali ini admin akan menggabungkan cara memasang share tombol Media Sosial Facebook, Twitter, Google Plus, dan WhatsApp di bawah Tulisan Blog. Kelebihan yang satu ini tanpa Javascript. Karena berbagi tombol tanpa Javascript, itu menjadi ringan, pemuatan menjadi cepat. Bagaimana cara memeriksa apakah berfungsi di ponsel Anda, bukan di desktop.

Cara Memasang Tombol Share Media Sosial pada Blog:

Media sosial adalah media online yang sangat populer di mana pengguna dapat berinteraksi dengan pengguna jaringan lainnya. dan pengguna dengan mudah berpartisipasi, berbagi, dan membuat informasi termasuk blog, jejaring sosial dan lainnya.

1. Tema > Edit HTML
2. Copy dan paste kode dibawah 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. Copy dan paste kode berikut dibawah 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. Copy dan paste 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'/>

Demikian informasi tentang Cara Memasang Tombol Share Media Sosial pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.