1. Login ke Blogger jika Anda belum log in
2. Arahkan ke Desain> Edit HTML
3. Back up blog Anda menggunakan Full Template Download sebagai pencegahan dalam kasus Anda tidak sengaja menimpa beberapa kode dan tidak dapat mengambilnya.
4. Centang kotak Expand Template Widget
5. Tambahkan kode CSS berikut di atas baris ini
]]></b:skin> .breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}
Setelah breadcrumb Anda bekerja memodifikasi ini jika Anda perlu sehingga menyatu dengan tampilan dan gaya dari template Anda.
6. Cari baris ini kode
<b:includable id='main' var='top'> 7. Lama XML Blogger template dan template mengganti seluruh blok kode di bawah ini. Jika Anda menggunakan generasi baru dari Blogger template seperti mencari alternatif sederhana untuk instruksi lebih bawah di Langkah ini)
b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
dan
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>
Catatan: jika Anda menggunakan generasi baru dari Blogger template misalnya Wikipedia kemudian lakukan hal berikut sebagai gantinya
Cari blok kode dan menambahkan kode merah antara <div class='blog-posts hfeed'> dan <data:defaultAdStart/>
<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/> 8. Sekarang segera sebelum
<b:includable id='main' var='top'> blok besar paste kode berikut:<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<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'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<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:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
9. Klik tombol Simpan Template
10. Klik Lihat Blog dan navigasi ke setiap halaman posting untuk melihat breadcrumb baru Anda dalam tindakan
