Skip to main content

Cara Memasang Ikon + Link Media Sosial Keren Menarik di Blog

Image
By

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. 

Selain memasangnya lewat tambahkan gadget, anda juga bisa memasangnya ke dalam html template misal untuk pemasangan di area footer, dalam postingan, dan sebagainya. 

Demikianlah tutorial tentang cara membuat/ memasang Ikon + Link Sosial Media Keren di Blog. Semoga bermanfaat. Baca juga: Cara Membuat Tombol Share Keren Populer di Blog