Membuat Breadcrumbs Trail di Blogspot

Pada saat pengunjung membuka suatu halaman posting dalam blogger, mungkin belum mengetahui posisi link postingan kamu itu ada dimana. Dia mungkin menduga bahwa link posting yang ditampilkan berada dalam label atau kategori tertentu. Yang apabila label tersebut di klik, maka akan menampilkan posting dalam label atau kategori yang sama dengan jumlah tertentu. Dalam blogspot hal tersebut di atas mungkin tidak terlalu dipermasalahkan, karena posting disusun berdasarkan satu halaman saja. Namun bagaimana seandainya kalau kamu menggunakan web blog yang mempunyai halaman posting atau content yang dapat ditambah. misalnya Halaman utama (beranda) yang memiliki anak-anak halaman lain (Google Site).

Namun bukanlah merupakan sesuatu yang tidak boleh, jika kamu juga ingin menambah variasi tampilan blogger agar halaman posting lebih terdefinisi. Nah, trik blogger yang satu ini dinamakan "Breadcrumbs Trail" dan diperkenalkan oleh Hoctro's. Tertarik dengan review breadcrumbs trail di atas, mari kita bersama-sama memulai triknya.
• Langkah pertama, Login ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

• Tambahkan kode CSS berikut, di atas kode ]]>
.breadcrumbs {
border-bottom:1px dotted #000;
margin:0.5em 0 0.5em;
padding:0 0 0.5em;}
Catatan:
Silahkan rubah margin (khususnya yang berwarna merah), jika kamu ingin memodifikasi jarak breadcrumbs agar sesuai dengan keinginan kamu.
• Cari kode di bawah ini.

<b:includable id="main" var="top">

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
• Kemudian copas kode dari Hoctro's berikut, diatas kode tersebut.

<b:includable id="'breadcrumbs'" var="'post'"><br /><!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com --><br /><b:if cond="'data:blog.pageType"><br /><p class="'breadcrumbs'"><br /><span class="'post-labels'"><br /><b:if cond="'data:post.labels'"><br />Kamu ada disini:<br /><a href="'data:blog.homepageUrl'" rel="'tag'">Home</a> ><br /><b:loop values="'data:post.labels'" var="'label'"><br /><b:if cond="'data:label.isLast"><br /><a href="'data:label.url'" rel="'tag'"> <data:label.name/></a><br /></b:if><br /></b:loop><br /><b:if cond="'data:post.title'"><br />> <b><data:post.title/></b><br /></b:if><br /></b:if><br /></span><br /></p><br /></b:if><br /><!-- End of Breadcrums Hack --><br /></b:includable><br />

Catatan :

Silakan hapus atau ganti teks yang berwarna merah dengan teks favorit kamu. Dan jika kamu tidak suka dengan penggalan lokasi dengan kode > (warna merah juga), silakan ganti dengan kode favorit kamu.
• Selanjutnya cari kode berikut.

<b:if cond="'data:post.dateHeader'">

• Kalau sudah ketemu, copas kembali kode berikut diatasnya

<b:include data="'post'" name="'breadcrumbs'/">

Catatan:
Untuk template yang berkarakter mirip dengan "Minima" (belum dimodifikasi), cara peletakkan kode adalah sebagai berikut.
• Cari kode di bawah ini.

<b:includable id="'post'" var="'post'"><br /><div class="'post"><br />

• Dan letakkan kode berikut ini

<b:include data="'post'" name="'breadcrumbs'/">

Pastikan postingan kamu sudah memiliki label atau kategori, agar breadcrums trail tampil optimal.
• Jangan lupa disimpan

Selamat menampilkan link postingan kamu dalam breadcrumbs trail...