Cara Membuat Widget Media Sosial Sendiri

Selama ini saya selalu mengandalkan html siap pakai jika ingin memasang widget media sosial. Lebh praktis. Tapi untuk blog SEO MAM, saya dan seterusnya, saya memutuskan membuat sendiri. Saya ingin membuat blog yang bersih, fast loading, dan responsive. Saya ingin menggunakan template asli Blogger.com dan mendandani sendiri.

Bisa dikatakan, setiap kali membuat perubahan di blog ini, saya akan menuliskan caranya. Saya harap itu memungkinkan, karena keinginan kadang berbenturan dengan waktu dan kebutuhan lainnya. Setidaknya saya akan berusaha semampu saya.

Jadi, perubahan blog ini akan selaras dengan postingan blog.....

Biasanya, jika mencari cara membuat widget Media, kita akan diberi rangkaian html yang sudah jadi. Sudah tinggal copy paste dan memasukkan url media sosial kita.

Oh, ya. Harap diingat bahwa tips ini berlaku di platform Blogspot dari Google.com. ya

Bagaimana jika kali ini saya beri beberapa opsi?

1. html widget media sosial siap pakai

Ini adalah html media sosial saya. Silakan ubah link yang saya beri warna ungu tua, ya.

<div style="text-align: center;">
<a href="https://web.facebook.com/susi.susindra" target="_blank" title="Like/Follow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvx3ScYv078R3JrYajK_3_jnyGOJ-OoH6C2Eitl2pCc2YCO827ncluZx7FyISkOvj1QcOxor3rqNoQpmdhuVc4Rjrs9r-NTa4aYhwphTXFE_nz-gfhwZY-b4mL30qpNk9iZOxhBebKQqD/s1600/logo+facebook.png" style="border: medium none; position: relative;" / /></a>
<a href="https://www.instagram.com/susierna1/" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8KacNKcEnjUuq0qPScT3rV_hkknFhP04nOamsnG_BGO7N6c6eMBHqjF_VcZa2uVsbRh766IwGG-FtiTFzE1vS7FAc-B97jEtTdOQMpj8Z0yysVm7aPo7Is-oe8U77KpRk3Isfo-N13djd/s1600/logo+instagram.png" style="border: medium none; position: relative;" / /></a>
<a href="https://twitter.com/susierna" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSjc4Y2JYlWlWSIF04gPH5OWjsYWroTo2rJR_PlS-YNr_Aeex1syb_BTOA76wNRwr_GWHa0VvTXapEVP6qmh0jnUy6mNOPwk4ubTVBAJAaMIC-6f_OzSfcP9LpChfA0i7PvAX5HP6fmCa/s1600/logo+twitter.png" style="border: medium none; position: relative;" / /></a>
<a href="https://in.pinterest.com/susindra1/"_blank" title="subscribe"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAPmPWhkSGZqMZ_XH4vNR8ORqFLJN4Mm1JBUhXoTf67QVgTZgzKMeCP4ADuFa_QWGAUjIxvA52z7jHz8-V5JgWQUwpCvH__mfCh5L6OIbtcJDIgN2jbdu9Dd10aE8Cw7ZqhDsdYwhkXWq/s1600/logo+pinterest.png" style="border: medium none; position: relative;" / /></a>

<a href="https://www.linkedin.com/in/susi-susindra-9b807bb4/"_blank" title="subscribe"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVL4YJqvfjrjadOsbsnYIpGlQxicJ_1C4FBGonSQRfnPkzwWQPZMw_MIcHxScM5lUuD510Jg7YhmVCCIWKyvtN3sSU18-xJORBW32dyEWn7EdfnYK4YGmP9oFZE3N6j8AJVT6dkhHDAg1J/s1600/logo+linkedin.png" style="border: medium none; position: relative;" / /></a></div>

Hasilnya akan seperti ini:

Langkah memasang widget media sosial yang harus sobat SEO Mam lakukan adalah:

a. Copy paste html di atas di notepad atau media menyimpan file yang biasa Sobat SEO Mam pakai. Saya sarankan di notepad yang bersih dari "perintah" bawaan. 
b. Ganti link media sosial saya di atas dengan link media sosial yang akan disematkan
c.  Buka Dashbor blog lalu Layout.
d. Buka Add a Gadget.

e. Klik "HTML/JavaScript

f. copy paste html di atas.
g. Hasilnya sudah dapat dilihat di laman utama blog


Semudah itu...

2. Struktur html 

Pada dasarnya, stuktur html untuk widget media sosial seperti di bawah ini:

<div style="text-align: center;">
<a href="url medsos" target="_blank" title="Like/Follow"><img border="0" src="url gambar" style="border: medium none; position: relative;" / /></a>

atau...

<a href="url medsos" target="_blank" title="Follow Me"><img border="0" src="url gambar" style="border: medium none; position: relative;" / /></a>

3. Membuat html widget media sosial sendiri

Membuat sendiri, pastinya lebih ribet. Tapi akan ada kepuasan tersendiri. Apalagi jika bisa mengembangkan desain logo sendiri. Tentunya, tetap menggunakan pakem yang ada. 

Saya mencoba mencari logo media sosial di freepik.com. Beberapa memang bagus. 

Cara membuat logo widget sendiri:

1. Siapkan logo yang dibutuhkan. Cropping satu per satu.
2. Ukuran logo adalah 32 x 32 pixel.
3. "Titipkan logo di salah satu postingan. Saya menitipkan di laman About Me.
4. Klik kanan gambar "titipan" tersebut. Ambil url gambarnya dengan mengklik "Copy Image Adress".
5. Masukkan url image/gambar tersebut di struktur html media sosial di atas.
6. Pasang di "Add HTML/JavaScript" seperti panduan pertama paling atas.

Mudah sekali, kan?