Cara Membuat "Breadcrumbs Trail" di Blogspot.

Agar postingan kita lebih menarih dari segi judul maka tak ada salahnya menambahkan breadcrumbs trail.Apa itu dan bagaimana Cara Membuat "Breadcrumbs Trail" di Blogspot.Bisa teman2 lihat pada judul postingan blog ini "Breadcrumbs Trail" dan diperkenalkan oleh Hoctro's. Demo penggunaannya dapat kamu lihat di atas tiap title post optimasi blog ini, setelah kamu mengklik judul posting (dalam full posting). Tertarik dengan review breadcrumbs trail di atas, Ini Cara Membuat "Breadcrumbs Trail" di Blogspot:

* 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">

<b:if cond="data:blog.pageType == "item"">
</b:if></b:includable></b:includable>
<div class="breadcrumbs">
<span class="post-labels">
<b:if cond="data:post.labels">
Kamu ada disini:
<a expr:href="data:blog.homepageUrl" href="http://www.blogger.com/post-create.g?blogID=1338254211751752868" rel="tag">Home</a> >
<b:loop values="data:post.labels" var="label">
<b:if cond="data:label.isLast == "true"">
<a expr:href="data:label.url" href="http://www.blogger.com/post-create.g?blogID=1338254211751752868" rel="tag"> <data:label.name></data:label.name></a>
</b:if>
</b:loop>
<b:if cond="data:post.title">
> <b><data:post.title></data:post.title></b>
</b:if>
</b:if>
</span></div>

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">
</b:includable></b:include>
<div class="post hentry uncustomized-post-template">

* Dan letakkan kode

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

dibawahnya.

Pastikan postingan kamu sudah memiliki label atau kategori, agar breadcrums trail tampil optimal.

* Jangan lupa disimpan/Save

Selamat menampilkan link postingan kamu dalam breadcrumbs trail...
Semoga membantu