Cara Menambahkan Navigasi Breadcrumbs di Blogspot

Blogger.com-Navigasi breadcrumbs adalah cara yang mengagumkan untuk membantu pengunjung blog Anda dan membiarkan mereka menjelajahi halaman dengan mudah di seluruh blog Anda. Ini adalah cara sempurna dan ideal untuk memungkinkan pengunjung menavigasi ke halaman yang lebih lama dengan mudah. Navigasi breadcrumbs menunjukkan beranda Anda serta halaman kategori yang tertaut ke pos tersebut sehingga pengunjung dapat melacak kembali ke kategori yang diinginkan dan melihat lebih banyak konten tentang kategori tersebut. Jadi hari ini, kami akan menjelaskan cara termudah untuk menambahkan navigasi breadcrumbs ke blog blogger dan kita juga akan mendiskusikan beberapa keuntungan utamanya juga. Jadi mari kita mulai pada tutorialnya.

Sebelum langsung menuju ke tutorial, mari kita tahu apa sebenarnya navigasi breadcrumbs.

Apa itu Navigasi Breadcrumbs?

Navigasi breadcrumbs adalah tautan navigasi yang memungkinkan pengguna untuk melacak lokasi mereka di situs web. Ini menyediakan antarmuka yang user-friendly sehingga pengguna dapat menavigasi kembali ke kategori yang dilampirkan ke halaman mendarat. Navigasi breadcrumbs umumnya muncul secara horizontal di atas judul tulisan. Mari kita lihat bagaimana navigasi breadcrumbs terlihat seperti:

Mengapa menggunakan Breadcrumbs Navigation?

Sambil menambahkan navigasi breadcrumbs ke blog blogger Anda, Anda harus memahami kelebihannya dan melihat bagaimana ini akan menguntungkan Anda. Jadi saya akan daftar beberapa alasan utama.

• Mudah dilacak kembali: Seperti yang saya sebutkan di atas, navigasi breadcrumbs mari melacak kembali ke kategori terkait dan ke beranda dalam satu klik.
• Mengurangi bouncing-rate: Tidak diragukan lagi! ketika Anda menyediakan antarmuka yang mudah digunakan untuk pengunjung Anda, itu pasti akan mengurangi tingkat bouncing blog Anda.
• Memberi tahu Lokasi: Ya, navigasi breadcrumbs memberi tahu pengunjung lokasinya di situs web Anda, yang mengarah ke kegunaan besar secara keseluruhan.

Bagaimana Cara Menambahkan Navigasi Breadcrumbs di Blog Blogger?

1. Pergi ke Blogger.com Dashboard >> Theme > Cadangkan blog Anda sebelum membuat perubahan apa pun.
2. Sekarang Pilih Edit HTML.
3. Kemudian Cari tag <div class='blog-posts hfeed'> (Gunakan Ctrl + F untuk pencarian cepat) dan tepat di bawahnya tempelkan kode XML berikut. Jangan lakukan perubahan pada pengkodean jika tidak, itu tidak akan berfungsi dengan baik. Setelah selesai, Save Template.

Catatan: Jika Anda menemukan dua tag <div class='blog-posts hfeed'>, pastikan Anda memilih yang pertama.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='breadcrumbs-bbeginner'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

Sekarang, Cari tag </b:skin> dan tepat di atasnya tempelkan kode CSS berikut.

#breadcrumbs-bbeginner {
  background: #eee;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:Verdana, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#breadcrumbs-bbeginner  li{
  float: left;
}
#breadcrumbs-bbeginner  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-bbeginner  li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
#breadcrumbs-bbeginner  a:hover{
  background: #fff;
}
#breadcrumbs-bbeginner  a::after,
#breadcrumbs-bbeginner  a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#breadcrumbs-bbeginner a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#breadcrumbs-bbeginner  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#breadcrumbs-bbeginner  a:hover::after{
  border-left-color: #fff;
}
#breadcrumbs-bbeginner  .current,
#breadcrumbs-bbeginner  .current:hover{
  font-weight: bold;
  background: none;
}
#breadcrumbs-bbeginner  .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#breadcrumbs-bbeginner .current,
#breadcrumbs-bbeginner .current:hover{
  font-weight: normal;
  background: none;
}
#breadcrumbs-bbeginner .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}

Semua selesai! Selamat! Navigasi breadcrumbs telah berhasil ditambahkan ke blog blogger Anda. Anda dapat menyesuaikan CSS di atas sesuai dengan yang Anda inginkan.

Selain itu, navigasi breadcrumbs ini tidak akan mempengaruhi skor SEO Anda jadi jangan ragu-ragu saat menggunakannya.

Customization (Opsional):

• Untuk mengubah lebar bilah navigasi breadcrumbs, cukup cari lebar: 620px; dan ubah nilainya ke yang Anda inginkan.
• Jika Anda ingin mengubah font-styling kemudian cari font-family: Verdana, sans-serif; dan ganti dengan kode font yang Anda inginkan.
• Anda juga dapat mengubah warna latar belakang dengan mengubah latar belakang: #eee; dengan kode warna pilihan Anda.

Demikian. Selamat mencoba :)