Cara Membuat Tombol Share ke Sosial Media

Jika di waktu yang lalu saya telah membahas mengenai cara menginstal ShareThis di Blogger, maka sekarang kita akan mencoba bereksperimen dengan membuat tombol share media sosial dengan gaya kita sendiri.

Setiap konten meliputi website maupun sebuah blog tentu memerlukan tombol kecil namun sangat penting ini. Karena dengan tombol tombol inilah konten yang kita tulis atapaun konten yang kita pelajari dapat berguna untuk orang lain. Oke langsung saja, kita hanya akan menggunakan HTML dan Query dengan sentuhan dari CSS.

Namun sebelum lanjut mari kita lihat sisi positif dan alasan kenapa menggunakan tombol share yang seperti ini lebih baik daripada layanan share button lainnya.

Sisi Positif
1. Tidak Mengganggu Loading Blog
Sisi positif pertama dari share button seperti ini adalah tidak mengganggu Loading Blog, pertanyaannya kenapa dengan menggunakan tombol seperti ini tidak mengganggu Loading Blog? Karena kita menggunakan CSS Inline ataupun Internal, iyah itu jawaban simplenya. Jika kita menggunakan layanan jasa share button seperti ShareThis memang kelihatan instan, namun berpengaruh terhadap kecepatan blog kamu dan akan mengakibatkan sesuatu yang fatal untuk blog kamu. Alasan ShareThis mempengaruhi loading speed blog kita adalah karena menggunakan CSSLibrary atau sering dikenal dengan CSS External.

Namun, memang jika ingin membuat tombol share sendiri memang butuh waktu karena kita harus menyusun code untuk CSS, HTML dan tentunya Querynya. Oke langsung saja kita kupas lebih tajam setajam silet!.

1. Code CSS
Berikut adalah code CSS nya. 

#medsos {width:100%; text-align:center;}
#medsos svg {width:20px;height:20px;margin-top:7px}
#medsos svg path {fill:#fff}
#medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#medsos a:last-child {margin-right:0px;}
#medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#medsos .facebook{background:#3a579a}
#medsos .twitter {background:#00abf0}
#medsos .whatsapp {background:green}

2. Code HTML dan Query
Berikut adalah code HTML dan Querynya

<div id='medsos'>
    <a class='facebook' 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' target='blank_' title='Share to Facebook'>
    <svg viewbox='0 0 24 24'> <path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
      <a class='twitter' 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;' target='blank_' title='Share to Facebook'><svg viewbox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
   <a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url' rel='nofollow' target='_blank' title='Share whatsapp'><svg viewbox='0 0 24 24'><path d='M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z'/></svg></a>
    </div>

Itulah Code CSS, HTML beserta Query dari share button versi PenggemarKoding. Masih bingung dimana meletakkan codenya? Code CSS yang baik adalah diletakkan di bagian <style> / <b:skin> karena akan meringankan loading dengan type inline CSS tersebut. Sedangkan code HTML selalu diletakkan di bagian <body> </body>.
Untuk kode tersebut kita hanya perlu meletakkan kodenya di bagian main-menu / blog. Silahkan cari code berikut di template kamu dengan menekan Ctrl + F.

<b:includable id='shareButtons' var='post'>

Jika sudah ketemu, silahkan hapus isi dari kode tersebut dan ganti dengan code HTML yang diatas telah kita bahas tadi. Jangan lupa untuk menekan Save Template. Dan silahkan di cek di blog kamu. Selamat situs kamu telah menambahkan code share button yang ringan dan higienis untuk blog. Itulah tutorial dan tips menarik dari penggemarkoding hari ini. Semoga bermanfaat dan terima kasih telah membaca.


s: penggemarkoding blogspot

Share this post