Membuat Navigasi Menu Breadcrumbs

Pada postingan kemarin telah saya tulis membuat navigsi menu horizontal dan untuk postingan ini adalah tutorial blog membuat navigasi menu breadcrumabs.

Membuat menu breadcrumbs adalah merupakan salah satu cara membuat blog menjadi seo yang memudahkan pengunjung untuk melihat artikel lainnya yang terkait dengan artikel yang sedang di baca.

Navigasi menu yang berada di atas judul posting umumnya disebut dengan menu breadcrumbs.
Selain kita edit judul posting menjadi judul blog, denganmembuat menu breadcrumbs ini adalah bagian dari menjadikan blog menjdi seo

Untuk sahabat blogger yang masih pemula seperti saya, jika ingin membuat menu breadcrumbs caranya adalah sebagai berikut:

Login ke blogger.com
Pilih Rancangan
Pilih Edit HTML
Download template lengkap, untuk di upload kembali jika terjadi kesalahan pada edit.
Centang kotak kecil pada tulisan Expand Widget Template
Kemudian cari kode
]]></b:skin> gunakan tombol pencarian untuk mempermudah pencarian kode.
Tambahkan kode di bawah ini di atas kode ]]></b:skin>

.breacrumbs {
margin:0;
padding:5px;
line-height:1.4em;
border-bottom:4px double black;
color:#000000;
}

Selanjutnya cari kode
<div class='post hentry'>
Kemudian tambahkan kode di bawah ini, tepat di bawah kode
<div class='post hdntry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse »
<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'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>
</b:if>
</b:loop>
</b:if> »
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse »
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for
<data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:naviMessage'>
<div class='breadcrumbs'>
<data:naviMessage/>
</div>
</b:if>
</b:if>

Setelah selesai klik Simpan Template.

Semoga artikel ini bisa bermamfaat.. dan salam sukses selalu..

Facebook. Twitter Google Plus