Cara Membuat Menu Navigasi Breadcrumbs

Artikel ini akan membahas Cara Membuat Menu Navigasi Breadcrumbs. Menu Navigasi Breadcrumbs adalah menu bilah diatas artikel sebuah posting. Masih bingung silahkan sobat blogger lihat gambar dibawah ini:

Contoh Menu Navigasi Breadcrumbs

Gambar diatas adalah Menu Navigasi Breadcrumbs, ingat Menu Navigasi Breadcrumbs yang cetak warna merah loh sob, jangan sampai salah dengan tulisan judul artikel "Duhai Wanita!! Janganlah Menunda Kehamilan" hehe.

Menu Navigasi Breadcrumbs disamping mempercantik blog juga bermanfaat untuk menjadikan blog kita menjadi SEO friendly. Nah, daripada ribet-ribet kelamaan pembukaannya silahkan perhatikan tutorial Cara Membuat Menu Navigasi Breadcrumbs berikut:

• Masuk ke Blogger
• Klik Template
• Untuk menjaga agar template tidak rusak, sangat kami sarankan sobat blogger mem-backup template  dulu, dengan klik "cadangan/pulihkan" (tampilan dasbor blogger baru), kemudian klik "unduh template lengkap"
• Kemudian klik Edit HTML
• Klik centang Expand Template Widget
• Cari kode ]]></b:skin> . Untuk mempermudah silahkan tekan Ctrl + F
• Dan masukkan kode berikut di atas kode ]]></b:skin>

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}

• Kemudian Anda cari kode

<div class='post hentry'>

• Dan masukkan  kode berikut, tepat dibawah kode  <div class='post hentry'>

<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>

Nah, Menu Navigasi Breadcrumbs Anda sudah jadi.

Semoga bermanfaat buat sobat blogger. Artikel ini tentang Cara Membuat Menu Navigasi Breadcrumbs ini.