Panduan Lengkap: 2 Cara Memasang Breadcrumb Di Blogger

3 min read

Panduan Lengkap: 2 Cara Memasang Breadcrumb di Blogger

Apa Itu Breadcrumb?

Breadcrumb adalah navigasi yang menampilkan jalur hierarki halaman yang sedang dikunjungi pengguna. Fungsinya mirip seperti remah roti yang ditinggalkan untuk menunjukkan arah jalan. Breadcrumb membantu pengguna memahami struktur situs dan memudahkan mereka menavigasi kembali ke halaman sebelumnya.

Manfaat Memasang Breadcrumb

  • Meningkatkan Pengalaman Pengguna: Breadcrumb membuat navigasi situs lebih mudah dan intuitif, terutama untuk situs dengan struktur yang kompleks.
  • Meningkatkan SEO: Breadcrumb dapat membantu mesin pencari memahami hierarki situs dan meningkatkan peringkat pencarian.
  • Memperkuat Merek: Breadcrumb dapat menampilkan nama situs atau logo di setiap halaman, memperkuat identitas merek.

Cara Memasang Breadcrumb di Blogger

Ada dua cara utama untuk memasang breadcrumb di Blogger:

Cara 1: Menggunakan Widget Breadcrumb

Langkah 1: Aktifkan Widget Breadcrumb

  • Masuk ke dasbor Blogger Anda.
  • Klik "Tata Letak" di bilah sisi kiri.
  • Klik "Tambahkan Gadget" di bagian mana pun yang ingin Anda tambahkan breadcrumb.
  • Pilih "Breadcrumb" dari daftar gadget.

Langkah 2: Konfigurasikan Widget Breadcrumb

  • Beri nama widget (opsional).
  • Pilih "Ya" untuk menampilkan nama situs di breadcrumb.
  • Klik "Simpan".

Cara 2: Menggunakan Kode HTML

Langkah 1: Tambahkan Kode ke Template

  • Masuk ke dasbor Blogger Anda.
  • Klik "Tema" di bilah sisi kiri.
  • Klik "Edit HTML".

Langkah 2: Cari Kode

  • Gulir ke bagian paling bawah kode template.
  • Cari kode </body> yang menandai akhir halaman.

Langkah 3: Masukkan Kode Breadcrumb

  • Tempelkan kode breadcrumb berikut tepat di atas kode </body>:
<ol id="breadcrumb">
  <li><a href="/">Beranda</a></li>
  <li><a href="/kategori/">Kategori</a></li>
  <li><a href="/artikel/">Artikel</a></li>
</ol>

Langkah 4: Sesuaikan Kode Breadcrumb

  • Ganti teks "Beranda", "Kategori", dan "Artikel" dengan nama halaman yang sesuai di situs Anda.
  • Anda juga dapat menambahkan lebih banyak item breadcrumb dengan menambahkan baris <li> baru.

Langkah 5: Simpan Perubahan

  • Klik "Simpan Perubahan" di bagian atas halaman.

Tips Tambahan

  • Gunakan Breadcrumb yang Relevan: Pastikan breadcrumb hanya menampilkan jalur halaman yang relevan dengan halaman yang sedang dikunjungi.
  • Buat Breadcrumb yang Terlihat: Gunakan gaya CSS untuk membuat breadcrumb terlihat jelas dan mudah dibaca.
  • Uji Breadcrumb: Setelah memasang breadcrumb, uji navigasinya untuk memastikannya berfungsi dengan baik di semua halaman.

Kesimpulan

Memasang breadcrumb di Blogger adalah cara mudah untuk meningkatkan pengalaman pengguna dan SEO situs Anda. Dengan mengikuti panduan langkah demi langkah di atas, Anda dapat dengan mudah menambahkan breadcrumb ke situs Blogger Anda menggunakan widget atau kode HTML.

Pertanyaan Umum (FAQ) tentang 2 Cara Memasang Breadcrumb di Blogger

Apa itu Breadcrumb?

Breadcrumb adalah jalur navigasi yang ditampilkan di bagian atas halaman web, menunjukkan lokasi pengguna saat ini dalam struktur situs web. Breadcrumb membantu pengguna melacak posisi mereka dan menavigasi situs web dengan mudah.

Mengapa Memasang Breadcrumb di Blogger?

Memasang breadcrumb di Blogger memiliki beberapa manfaat, antara lain:

  • Meningkatkan pengalaman pengguna dengan memberikan navigasi yang lebih jelas.
  • Membantu mesin pencari memahami struktur situs web, yang dapat meningkatkan peringkat SEO.
  • Memudahkan pengguna untuk kembali ke halaman sebelumnya atau menemukan halaman terkait.

2 Cara Memasang Breadcrumb di Blogger

Ada dua cara utama untuk memasang breadcrumb di Blogger:

Cara 1: Menggunakan Widget Breadcrumb

  1. Masuk ke dasbor Blogger Anda.
  2. Klik "Tata Letak" di menu sebelah kiri.
  3. Klik "Tambahkan Gadget" di bagian yang diinginkan.
  4. Pilih "Breadcrumb" dari daftar gadget.
  5. Klik "Simpan".

Cara 2: Menggunakan Kode HTML

  1. Masuk ke dasbor Blogger Anda.
  2. Klik "Tema" di menu sebelah kiri.
  3. Klik "Edit HTML".
  4. Cari kode berikut di dalam tag <head>:
<b:skin><![CDATA[
  1. Tambahkan kode breadcrumb di bawah kode tersebut:
<script type='text/javascript'>
var breadcrumbPath = {
  home: 'Beranda',
  blog: 'Blog',
  archive: 'Arsip',
  search: 'Hasil Pencarian',
  label: 'Label',
  page: 'Halaman',
  post: 'Posting'
};
</script>
<b:template-skin>
  <b:skin-container class='breadcrumb-container'>
    <b:skin-element class='breadcrumb-home'>
      <a expr:href='data:blog.homepageUrl' expr:title='breadcrumbPath.home'>Beranda</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-blog'>
      <a expr:href='data:blog.url' expr:title='breadcrumbPath.blog'>Blog</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-archive'>
      <a expr:href='data:blog.archiveUrl' expr:title='breadcrumbPath.archive'>Arsip</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-search'>
      <a expr:href='data:blog.searchUrl' expr:title='breadcrumbPath.search'>Hasil Pencarian</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-label'>
      <a expr:href='data:post.labels' expr:title='breadcrumbPath.label'>Label</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-page'>
      <a expr:href='data:post.url' expr:title='breadcrumbPath.page'>Halaman</a>
    </b:skin-element>
    <b:skin-element class='breadcrumb-separator'>/</b:skin-element>
    <b:skin-element class='breadcrumb-post'>
      <a expr:href='data:post.url' expr:title='breadcrumbPath.post'>Posting</a>
    </b:skin-element>
  </b:skin-container>
</b:template-skin>
  1. Klik "Simpan".

Cara Menyesuaikan Breadcrumb

Setelah memasang breadcrumb, Anda dapat menyesuaikannya dengan mengedit kode HTML. Misalnya, Anda dapat:

  • Mengubah teks yang ditampilkan untuk setiap bagian breadcrumb.
  • Menghapus atau menambahkan bagian breadcrumb.
  • Menambahkan gaya CSS untuk menyesuaikan tampilan breadcrumb.

Tips Tambahan

  • Pastikan breadcrumb Anda akurat dan mencerminkan struktur situs web Anda.
  • Breadcrumb harus terlihat jelas dan mudah dibaca.
  • Uji breadcrumb Anda di berbagai perangkat dan browser untuk memastikannya berfungsi dengan baik.
  • Pantau kinerja breadcrumb Anda untuk memastikannya tidak memperlambat situs web Anda.

Leave a Reply

Your email address will not be published. Required fields are marked *