Memasang widget sosial media bisa menjadi suatu alternatif agar blog semakin dikenal oleh pengunjung setianya. Dengan menyertakan link menuju media sosial, pengunjung bisa lebih mudah untuk berinteraksi dengan pemilik blog tersebut. Hubungan pertemanan pun bisa menjadi lebih dekat dan akrab antara pemilik blog dengan para pembacanya. 

Nah, kali ini Santos blog ingin berbagi tutorial mengenai cara membuat widget media sosial keren di blog. Widget yang akan kita buat kali ini memiliki tampilan cukup keren dengan efek bisa berputar ketika disentuh. Ikon-ikon media sosialnya juga saya buat menggunakan ikon Svg sehingga tidak akan begitu mempengaruhi kecepatan loading blog. Anda juga bisa mengaturnya lagi sesuai kebutuhan. 

media sosial keren

Widget media sosial ini bisa anda letakkan pada bagian manapun terserah anda. Bisa diletakkan pada bagian sidebar blog atau bisa juga di dalam area postingan. Atau bisa juga diletakkan pada area footer/ di atas kredit seperti beberapa blog pada masa kini. Adapun untuk langkah-langkah pemasangannya silahkan simak penjelasannya di bawah ini. 

Cara Membuat Widget Sosial Media Keren Bisa Berputar


1. Buka akun blogger anda.

2. Pilih menu layout (tataletak) dan klik tambahkan gadget.

3. Pilih html/ javascript. 

4. Silahkan beri judul atau kosongkan. Selanjutnya masukkan kode berikut ini ke dalam kotak di bawahnya.
<style>
.simplifymedsos a{display:inline-block;text-align:center;font-size:15px;margin-right:8px;color:#fff;border:1px solid #888;border-radius:4px;opacity:.9;transition:all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out;   -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out;}.simplifymedsos a svg{margin:5px;width:18px;height:18px}.simplifymedsos a svg path {fill:currentColor}.simplifymedsos a:hover{color:#fff;opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg);   -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg)}.simplifymedsos .facebook{background:#3b5998}.simplifymedsos .twitter{background:#00aced}.simplifymedsos .youtube{background:#dd4b39}.simplifymedsos .instagram{background:#dd2a7b}.simplifymedsos .LinkedIn{background:#007bb5}
</style>
<center>
<div class="simplifymedsos" style="margin: 5px;">
<a class="twitter" href="https://www.twitter.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><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" />
</path></svg></a>
<a class="facebook" href="https://www.facebook.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></path></svg></a>
<a class="youtube" href="https://www.youtube.com/channel/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">
    <path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
</path></svg></a>
<a class="instagram" href="https://www.instagram.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">
    <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</path></svg></a>
<a class="LinkedIn" href="https://www.linkedIn.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">
    <path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
</path></svg></a>
</div>
</center>

Keterangan:
  • Sesuaikan yang ditandai warna merah dengan Url masing-masing media sosial milik anda.
  • Anda juga bisa mengedit atau menambahkan media sosial lainnya sesuai kebutuhan. 

5. Simpan widget dan lihat hasilnya. 

ARTIKEL TERBARU