Cara Pasang Navigasi Breadcrumb di Blogger Template

Cara Pasang Navigasi Breadcrumb di Blogger TemplateNavigasi breadcrumb adalah kumpulan beberapa link/tautan yang memungkinkan anda untuk menemukan halaman dasar dari artikel yang sedang anda baca. Link yang ditampilkan di sini adalah link dimana artikel anda berada atau bisa disebut sebagai lokasi dari artikel anda. Navigasi breadcrumb biasanya diletakkan di atas judul artikel / postingan. Lihat contoh navigasi breadcrumb berikut.
Home » Tutorial Blogger » Cara Pasang Navigasi Breadcrumb di Blogger Template
Ada 3 manfaat/kegunaan dari navigasi breadcrumb, yaitu:
  • Memperindah tampilan halaman/artikel.
  • Memudahkan pengunjung dalam menelusuri blog.
  • Mengoptimalkan halaman di search engine.
Yang terpenting dari 3 hal di atas tentu adalah "mengoptimalkan halaman di search engine" atau sering disebut SEO. Cara membuat navigasi breadcrumb di blogger yang akan tampil berdasarkan label/tag dari postingan anda adalah berikut :
  1. Masuk ke blogger.
  2. Pilih menu Tata LetakEdit HTML.
  3. Cari kode berikut.
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>...dst..
  4. Tambahkan kode berikut di atasnya. Jika memungkinkan silahkan ganti sesuai dengan kebutuhan template yang anda gunakan.
    <b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding:2px;border-bottom:1px dotted #cccccc;'>
    <p>Your here: <a dir='ltr' expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if> &#187; <strong><data:post.title/></strong>
    </p>
    </div>
    </b:if>
    </b:if>
  5. Simpan template.
Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode <br/> di bawah kode <data:post.title/> di atas.

Cara Pasang Navigasi Breadcrumb di Blogger Template