Cara Membuat menu navigasi breadcrumb

Menu navigasi breadcrumb..? Apa yaaa maksunya ....???
Menu Navigasi Breadcrumb adalah menu hirarki untuk mengelompokan sebuah artikel dalam suatu label atau kategori.
Untuk lebih jelasnya perhatikan gambar dibawah ini :
 Navigasi ini, dikenal dengan nama “breadcrumb-navigation”. dengan menu ini, maka pengunjung (pembaca) dapat mengetahui label atau kategori dari sebuah sebuah artikel yang dia baca.
Untuk memasangnya silakan ikuti langkah berikut :
Masuk ke blogger dengan account anda, lalu masuk ke Tata Letak » Edit HTML » jangan lupa centang Expand Template Widget untuk menghindari hal-hal yang tidak diinginkan.
Setelah itu cari kode ]]></b:skin>
jika sudah ketemu, Copy lalu paste kode di bawah ini persis diatas kode tadi.

.breadcrumbs {<br /> padding:5px 5px 5px 0px;<br /> margin: 0px 0px 15px 0px;<br /> font-size:95%;<br /> line-height: 1.4em;<br /> border-bottom:3px double #e6e4e3;<br /> }

berikutnya cari kode berikut <div class='post hentry uncustomized-post-template'> (biar lebih mudah mencarinya gunakan ctrl+F)

jika sudah ditemukan, Copy lalu paste kode di bawah ini, persis di bawah kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div class='breadcrumbs'>Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.labels'><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast == "true"'> »<br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><br /> </b:if><br /> » <span><data:post.title/></span><br /> </b:loop><br /> </b:if><br /> </b:loop><br /> </div> </b:if><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "archive"'><br /> <div class='breadcrumbs'>Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/><br /> </div></b:if><br /> <b:else/><br /> <b:if cond='data:navMessage'><br /> <div class='breadcrumbs'><data:navMessage/><br /> </div></b:if><br /> </b:if>

Save template anda, cek hasilnya dengan masuk ke sebuah judul posting

Selamat mencoba . . .

Enjoyed reading? Share this

• Technorati
• Delicious
• Digg
• Facebook
• Twitter