Integrasi Breadcrumb pada Blogger
Langkah 1Login ke Blogger dalam kondisi perut kenyang (kalo sedang puasa, tinggalkan saja artikel ini)
Langkah 2Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>Langkah 5
Masukan (Copy Paste) kode CSS dibawah ini diatas kode pada langkah 4:
.breadcrumbs{Langkah 6
float:left;
width:590px;
font-size:11px;
border-bottom:double #eaeaea;
margin:0 0 20px;
padding:0 0 3px
}
Cari kode dibawah ini:
<b:includable id='main' var='top'>Langkah 7
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Nonaktifkan status pesan standar seperti dibawah ini (atau kita dapat menghapus baris kode status pesan tetapi akan lebih bagus jika kita hanya menonaktifkannya tanpa menghapus, hal ini sebagai suatu bahan perbandingan (debuging) antara sebelum dan sesudah dimodifikasi):
<!-- <b:include data='top' name='status-message'/> -->Langkah 8
Tambahkan kode untuk menggantikan status pesan standar, seperti dibawah ini:
<!-- <b:include data='top' name='status-message'/> -->Langkah 9
<b:include data='posts' name='breadcrumb'/>
Perhatikan kode langkah 6 dan cari kode dibawah ini:
<b:includable id='main' var='top'>Langkah 10
Masukan (copy paste) kode breadcrumb dibawah ini tepat diatas kode pada langkah 9:
<b:includable id='breadcrumb' var='posts'>Langkah 11
<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'>Beranda</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'>Beranda</a> » Arsip untuk <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'>Beranda</a> » Seluruh Artikel
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Simpan template blogger dan preview
Keterangan:
Jika disatukan (langkah 6 sampai langkah 10) maka keseluruhan kode breadcrumb seperti dibawah ini:
<b:includable id='breadcrumb' var='posts'>
<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'>Beranda</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'>Beranda</a> » Arsip untuk <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'>Beranda</a> » Seluruh Artikel
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>
Jika tidak ingin mengambil resiko fatal error lebih baik proses modifikasi ini dilakukan pada template backup, bukan pada template blogger secara langsung. Semoga berhasil, tinggalkan komentar jika gagal dan Happy Blogging... :)