Membuat Navigasi Breadcrumd di Blog

Membuat Navigasi Breadcrumd di Blog

Kegunaan dari Membuat Navigasi Breadcrumd di Blog adalah sebagai navigasi yang mempermudah pengunjung untuk membaca artikel blog kita dan Navigasi Breadcrumd berada tepat di atas postingan kita. Contohnya bisa di lihat dari screenshoot di atas.

Berikut tutorial Membuat Navigasi Breadcrumd di Blog :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html dan centang expand template widget akan tetapi backup terlebih dahulu template kamu untuk mengamankan template blog kamu apabila adalah kesalahan
3. Cari kode ]]></b:skin> di template kamu dengan cara menggunakan Ctrl+f
4. Copy dan paste kode di bawah ini di atas kode ]]></b:skin>

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

5. Cari kode <div class='post hentry'> yang di atasnya ada kode seperti ini <b:includable id='post' var='post'> maka akan terlihat seperti di bawah ini

<b:includable id='post' var='post'> <div class='post hentry'>

6. Copy dan paste kode di bawah ini di bawah kode <div class='post hentry'>

<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'>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 != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>

7. Save dan lihat blog kamu

Artikel Terkait: