Contoh Kode Breadcrumb Untuk Blogspot

Contoh Kode Breadcrumb untuk Blogspot

Berikut contoh kode breadcrumb untuk blogspot:

1. Breadcrumb Sederhana:

HTML

<div id="breadcrumb">
  <a href="#">Home</a> &gt; <a href="#">Blog</a> &gt; <a href="#">Postingan</a>
</div>

2. Breadcrumb dengan Data Blogspot:

HTML

<script>
function breadcrumb() {
  var blogTitle = document.getElementsByTagName('title')[0].innerHTML;
  var blogUrl = document.location.href;
  var breadcrumb = '<div id="breadcrumb">';
  breadcrumb += '<a href="' + blogUrl + '">' + blogTitle + '</a>';
  var labels = document.getElementsByClassName('post-labels');
  for (var i = 0; i < labels.length; i++) {
    var label = labels[i].getElementsByTagName('a')[0];
    breadcrumb += ' &gt; <a href="' + label.href + '">' + label.innerHTML + '</a>';
  }
  breadcrumb += '</div>';
  document.getElementById('main').insertAdjacentHTML('beforebegin', breadcrumb);
}
window.onload = breadcrumb;
</script>

Penjelasan kode:

• Kode pertama adalah contoh breadcrumb sederhana yang dibuat secara manual.
• Kode kedua menggunakan data blogspot untuk membuat breadcrumb secara otomatis.
• Baris 1-3 mendapatkan judul blog dan URL blog.
• Baris 4 membuat elemen div dengan id "breadcrumb".
• Baris 5 menambahkan link ke judul blog.
• Baris 6-10 mengulang label postingan dan menambahkan link ke breadcrumb.
• Baris 11 menambahkan breadcrumb ke bagian atas halaman.

Anda dapat memodifikasi kode ini sesuai dengan kebutuhan Anda.

Tips:

• Gunakan CSS untuk menata breadcrumb Anda.
• Tambahkan ikon breadcrumb untuk mempercantik tampilan.

Semoga bermanfaat!

Berbagi :