Cara Membuat Navigasi Breadcrumbs di Blogspot

Dengan membuat Navigasi Breadcrumbs pada blog, setidaknya akan membuat SEO blog sedikit lebih baik di indeks Mesin Pencari. Navigasi Breadcrumbs ini berisi HOME / BERANDA dan KATEGORI / LABEL artikel yang sedang di buka. Dengan memasang Navigasi Breadcrumb di blog, pengunjung akan lebih mudah mencari artikel yang sejenis pada sebuah blog apabila sebuah blog tidak dilengkapi dengan Related Post / Artikel Terkait. Baik Related Post Biasa, maupun Related Post dengan Gambar Thumbnail.

Bagi sebagian besar Blogger, memasang Navigasi Breadrcumb pada blog adalah suatu keharusan demi meningkatkan SEO Blog. Jika anda juga berfikir demikian tapi belum tahu cara memasang Navigasi Breadrcumb pada Blog anda, berikut saya jelaskan tutorial cara membuatnya.

• 1. Silahkan masuk ke akun blog anda.

• 2. Pada halaman beranda blog, klik tombol RANCANGAN

• 3. Di halaman Rancangan, klik TAB EDIT HTML

• 4. Breri tanda Checklist pada kotak kecil yang ada di depan tulisan Expand Template Widget dengan mengkilk kotak tersebut.

• 5. Untuk berjaga² kerusakan template karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda dengan mengklik DOWNLOAD TEMPLATE

• 6. Copy kode html berikut ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#187; <a 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; <data:post.title/>
  </div>
</b:if>
</b:if>

• 7. Letakkan / Paste kode tersebut di bawah kode   <div class='post hentry uncustomized-post-template'> template blog anda, atau bisa juga di atas kode <div class='post-header-line-1'/>

Gunakan Tombol F3 pada keyboard untuk melakukan pencarian cepat.

Jika ingin mengedit kodenya, edit sja kode yang berwarna MERAH.

Selanjutnya........

• 8. Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, Copy kede HTML berikut, lalu Paste di atas kode :

     ]]></b:skin>

template Blog anda. Berikut kodenya :

.breadcrumbs {
        padding:5px 5px 5px 0;
        margin: 0 0 5px;
        font-size:12px;
font-family: Georgia, trebuchet ms, Verdana;
        line-height: 1.4em;
        border-bottom:4px double #000000;
       }

Dengan kode tersebut, anda bisa mengganti Besar Huruf, Jenis Huruf, dan warna Garis Bawah Navigasi Breadcrumb anda.

Catatan :

Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi Breadcrumbs tidak terlihat pada beberapa template. Jika demikian, lakukan seperti berikut ini :

Copy kode HTML pada step 6 lalu Paste di atas kode <div class='post-header'>  template anda. Itu akan membuat Navigasi Breadcrumbs berada di bawah Judul Artikel.

Jika ingin menyimpan Navigasi Breadcrumbsnya di Atas Judul Postingan / Artikel, buat kodenya seperti berikut ini :

<b:includable id='post' var='post'>
  <div class='post hentry'>

    <a expr:name='data:post.id'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#187; <a 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; <data:post.title/>
  </div>
</b:if>
</b:if>
    <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>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>

    <div class='post-header-line-1'/>

    </div>

• Cari kode yg berwarna HITAM.
• Kode yang berwarna BIRU, adalah kode yang sama pada STEP 6 , lettakan kodenya diantar kode yang berwarna HITAM persis seperti contoh di atas.
• Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya, ya syukur.... hehehehehe..........
• Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip.