Cara Membuat Tombol Share Responsive Simple

Cara membuat tombol share yang responsive dan simple seperti punya saya di blog ini, tampilanya sangat menarik karena begitu dinamis dan simple

Tombol share merupakan salah satu menu wajib untuk sebuah blog maupun website, dengan tombol share Anda akan mendapatkan trafik dari sosial media dengan mudah, apabila pengunjung membagikan postingan Anda kedalam medsos mereka

Maka tidak heran apabila Anda pernah melihat sebuah website atau blog yang 50%+ pengunjung berasal dari sosial media

Selain berfungsi untuk tombol berbagi, saya mendapatkan sebuah kutipan kata dari pakar blogger, bahwa ''tombol share baik juga untuk SEO''


Apakah blog Anda belum di lengkapi dengan tombol berbagi ? segeralah untuk memasangnya...
Apakah Anda ingin mengganti tombol share dengan yang lebih lengkap, dengan yang lebih keren ? lakukan saja selama tidak mengurangi kecepatan loading blog...

Cara membuat tombol share media sosial responsive

Apabila Anda mengetik kata kunci terkait di google pasti Anda akan menemukan banyak pilihan cara membuat tombol share, dengan model dan bentuk berbeda-beda

Nah untuk postingan kali ini saya akan menuliskan cara membuat tombol berbagi seperti punya saya yang ada di blog ini DEMO dibawah artikel ini, yang pasti sangat responsive dan tampilanya sederhana

Login Blogger
Pilih menu Tema
Edit HTML
Copy paste kode dibawah ini, letakkan di atas ]]></b:skin> atau di bawah <style type='text/css'>

<!-- Tombol share ketikide.blogspot.com -->#share-button{margin:10px 0;padding:5px;border: 1px solid #eee;overflow:hidden}#share-button p{font-weight:bold;float:left;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:2px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:1px 1px;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:0px 0px 3px rgba(1,1,1,.1)}

Langkah selanjutnya
Copy paste kode dibawah ini, letakkan diatas Related post atau gantikan dengan kode share button yang sudah ada

<div id='share-button'> <p>Share : </p>
<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' style='background:#4dc247;' target='_blank'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
<a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank'><i aria-hidden='true' class='fa fa-facebook-official'/></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;' rel='nofollow' style='background:#4099ff;' target='_blank'><i aria-hidden='true' class='fa fa-twitter-square'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank'><i aria-hidden='true' class='fa fa-google-plus'/></a>
</div>

Kemudian simpan dan lihat hasilnya, pengalaman saya menggunakan share diatas tidak terlalu membebani loading blog tampilanya simple saya sangat suka pas untuk blog saya, sosial media lengkap dengan whatsapp

Baca juga : Cara membuat tombol DEMO dan DOWNLOAD simple responsive

Tombol share diatas selain dijadikan yang utama terletak dibawah artikel, juga bisa dijadikan yang kedua diletakkan diatas postingan silahkan sesuaikan dengan selera, Anda juga bisa otak-atik kode diatas untuk merubah tampilanya

Itulah postingan kali ini tentang cara membuat tombol share yang responsive di blog, semoga bermanfaat