Menambahkan Logo Media Sosial ke Navigasi Ghost

Photo by Kelly Sikkema / Unsplash

Jika dengan Hugo bahkan template tema langsung punya navigasi media sosial, pada dokumentasi Ghost mengajarkan saya untuk menggunakan Font Awesome, padahal tidak semua ikon ada di sana.

How to add social media icons to your Ghost theme

Saya memiliki ide. Bukankah pada dasarnya itu gambar SVG? Berarti saya bisa mengganti dengan ikon SVG apapun. Agak sulit bagi saya yang tidak paham bagaimana caranya menggunakan JavaScript atau CSS. Langsung saja, saya memanfaatkan fasilitas Code Injection pada Ghost. Berikut langkah-langkah saya ketika menambahkan menu beeper:

1. Buat navigasi baru. Bisa pada main navigation, maupun secondary. Bedanya, kalau secondary akan diletakkan di bawah seperti milik saya. Di sini saya menambahkan navigasi bernama beeper. Maka ghost akan membuat class baru sesuai nama navigasi tersebut, nav-beeper.
2. Masuk ke code injection. Antara header dan footer, yang membedakan hanya kapan akan dieksekusi. Jika menurut Ghost, header biasanya untuk CSS, sedangkan footer untuk JS. Karena kita membutuhkan 2 perubahan, CSS dan JS, kamu dapat menambahkan sesuai saran Ghost, atau memasukkan semuanya pada footer.
3. Tambahkan gaya agar teks ‘beeper’ tidak terlihat. Kode ini saya ambil dari dokumentasi Ghost sebelumnya, intinya membuat teks tersebut berukuran 0, alias tidak terlihat.

<style>
:where(.nav, .gh-head-menu) .nav-beeper a{
        font-size: 0 !important; /* Hides text */
    }
</style>

Menghilangkan teks “beeper”

4. Tambahkan JS untuk mengganti teks “beeper” menjadi objek SVG. Karena kita tidak memiliki akses HTML langsung, maka kita ubah elemennya menggunakan JavaScript.

<script>
  // Menargetkan elemen yang ingin diubah
  const beeperElem = document.querySelector(':where(.nav, .gh-head-menu) .nav-beeper a');

  // Membuat elemen SVG
  const beeperSVG = `
  <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
  <svg width="24px" height="24px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="currentColor" stroke-width="13.184" d="m50.146 53.87-8.082 33.197c-2.637 10.811-3.942 16.204-2.479 18.84a7.664 7.664 0 0 0 6.21 3.93c3.006.197 7.317-3.31 15.953-10.31l16.704-13.54c.884-.713 1.319-1.069 1.807-1.32.435-.21.896-.368 1.384-.46.54-.093 1.107-.08 2.228-.04l38.34 1.226c21.728.712 40.594-14.859 44.035-36.336 2.215-13.883-8.517-26.46-22.584-26.46h-53.7c-11.496 0-17.258 0-22.03 2.017a25.532 25.532 0 0 0-10.6 8.319c-3.1 4.166-4.457 9.756-7.186 20.936z" style="stroke-width:12;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"/>
  <path fill="none" stroke="currentColor" stroke-linecap="1" stroke-width="9.346" d="m31.094 127.438-4.39 21.108c-2.637 10.81-3.955 16.203-2.492 18.84a7.683 7.683 0 0 0 6.21 3.929c3.006.198 7.33-3.31 15.966-10.31l16.691-13.54c.884-.712 1.319-1.068 1.82-1.319a5.42 5.42 0 0 1 1.371-.461c.54-.093 1.108-.08 2.241-.04l38.327 1.24c21.728.698 40.594-14.872 44.035-36.35.58-3.612.277-7.146-.738-10.402" style="stroke-width:12;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"/></svg>
  `;

  // replace elemen
  beeperElem.innerHTML = beeperSVG;
</script>

Mengubah elemen dengan JS

Beberapa hal yang perlu kamu perhatikan

1. width dan height, jika SVG-mu belum memiliki properti ini, maka tambahkan sesuai kebutuhan.
2. fill dan stroke, biasanya properti ini menunjukkan warna dari SVG. Jika diperlukan (misalnya membuat agar bisa berubah menjadi dinamis), kamu bisa mengubahnya menjadi currentColor.

Hasilnya adalah seperti yang ada di bawah blog ini. Semoga bermanfaat!