CONTACTJasa Desain Web & Gambar, Penulisan & Review .

Cara Memasang Tombol Sosial Media Share Di Blog

Membuat Tombol Share Berbagai Sosial Media Di Blog | Terdapat beberapa tombol sosial media share yaitu Facebook, Twitter, Google Plus, dan WhatsApp (WA) karena pada dasarnya sosial media inilah yang paling atas menduduki peringkat share.

Sesuai dengan namanya, fungsi sosial media share ini adalah untuk mempermudah user mengshare artikel yang kita tulis di blog. Tombol sosial media ini dibuat tanpa Javascript, maka bisa dikatakan dengan tanpa javascript akan menjadi sangat ringan alias fast loading, berikut contoh tombol share sosial medianya.

Blog Uji Coba | Demo Tampilan Tombol Sosial Share

Cara Memasang Tombol Share Sosial Media Di Blog

1. Masuk ke Darbor blog. Klik Tema > Edit HTML
2. Copas kode CSS Sosial Media Share berikut ini dan letakkan atas kode ]]></b:skin>

TIPS: Untuk memudahkan dalam mencari kode ]]></b:skin>, klik sembarang di kode HTML template kemudian tekan CTR+ F. Lalu masukkan kode ]]></b:skin> dan tekan tombol enter di keyboard.

#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. Klik simpan Tema/ Save

Sekian tutorial bagaimana cara memasang tombol sosial media share di Blog, semoga bermanfaat. Jika ada pertanyaan berikan komentar anda pada kolom yang telah saya sediakan dibawah ini.

Share Artikel Ini :

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Scroll Up