Cara Membuat Breadcrumb Menu Pada Blog

Menu Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface di website/blog. Dengan Membuat Breadcrumb Menu Pada Blog juga sangat efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog. 

Disamping itu dari segi SEO (Search Engine Optimization), Google sudah support/mendukung breadcrumb ini. Untuk melihat hasil dari sebuah blog yang sudah membuat breadcrumb/menu navigasi diatas posting bisa lihat ini diatas setiap postingan diblog ini.

1. Pertama, pastikan anda sudah membuat label pada blog.

2. Selanjutnnya. Masuk ke Dashboard = > Tata Letak = > Edit HTML. Jangan lupa contreng tulisan Expand Widget Templates. Biasakan juga untuk save template untuk memback up template asli.

3 Kemudian masukkan kode di bawah ini di atas ]]></b:skin>

Gunakan Ctrl+F pada keyboard anda untuk membantu pencarian.

#breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:10px;

line-height: 1.4em;

border-bottom:3px double #333;

}

4. Selanjutnya cari kode berikut ini.

<div class='post hentry uncustomized-post-template'>

Kalau tidak ada, cari kode:

<div class='post hentry'>

5. Kemudian pastekan kode berikut di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot; '>

<div id='breadcrumbs'>

Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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;'> &gt; </b:if>

</b:loop>

</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>

</div>

</b:if>

Selain kode di atas kamu juga bisa menggunakan kode dibawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<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;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

6. Simpan template dan lihat hasilnya.

Jika menu Breadcrumb Menu Pada Blog anda tidak mau muncul. Cobalah untuk menggunakan cara kedua.

Caranya adalah sebagai berikut:

1. Yang pertama hapus kode yang tadi anada letakkan dibawah cari kode:

 <div class='post hentry uncustomized-post-template'>

2. Cari kode:

<b:includable id='main' var='top'>

Kemudian letakkan kode berikut tepat di atasnya.

<b:includable id='breadcrumbs' var='post'>

  <b:if cond='data:blog.pageType == "item"'>

      <p class='breadcrumbs'>

      <span class='post-labels'>

        <b:if cond='data:post.labels'>

          Browse: 

          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;

          <b:loop values='data:post.labels' var='label'>

            <b:if cond='data:label.isLast == "true"'>

              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>

            </b:if>

          </b:loop>

          <b:if cond='data:post.title'>

&gt;  <b><data:post.title/></b>

          </b:if>

        </b:if>

      </span>

      </p>

  </b:if>

</b:includable>

2. Cari lagi kode <b:if cond='data:post.dateHeader'>

Jika sudah ketemu, letakkan kode berikut  diatasnya.

<b:include data='post' name='breadcrumbs'/>

3. Save template dan semoga berhasil.