Cara Membuat Navigasi Breadcrumb Di Blogger

1. Login di blogger.com
2. Pilih menu Tata Letak (Layout) =>> Edit HTML
3. Beri tanda Centang bagian yang ada tulisan Expand Widget Templates.
4. Cari Kode Ini

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

<div>
5. Kemudian letakkan kode dibawah ini tepat di bawah kode tersebut

    <em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a></em>

6. Simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Selain cara di atas sobat bisa juga menggunakan cara lain dengan menambahkan sedikit kode CSS di template blogger sobat.


Cari kode ini :

]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi

    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef;
    }

Kemudian cari kode

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

Setelah itu letakkan kode dibawah ini tepat di bawah kode diatas:

    <div class='breadcrumbs'>
    Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a>
    </div>

Simpan template.