Breadcrumb? Apaan tu? Remah roti kah? bukan yang seperti itu, yang dimaksud breadcrumb disini adalah navigasi pada blog. Seperti di dongeng-dongeng agar tidak tersesat kita meninggalkan potongan roti di jalan tapi arti sebenarnya adalah sebuah penunjuk yang biasanya muncul secara horizontal dibagian atas sebuah halaman web lebih tepatnya berada di bawah header. Breadcrumb menyediakan link penghubung kembali ke halaman induk dari halaman yang sedang aktif atau memberikan jejak kepada pengguna untuk mengikuti kembali ke awal atau entry point yang biasanya menggunakan tanda (>) yang berfungsi sebagai pemisah.
Contohnya seperti ini:
Home Page » Nama Label » Judul Posting
atau
Home Page : Nama Label : Judul Posting
Daripada panjang lebar langsung saja saya bagikan cara membuat breadcrumb pada blog.
- Login Blogger.com
- Pilih Template >> Edit HTML
- Klik Expand Template widget
- Cari skrip berikut ]]></b:skin>
- Kopas skrip dibawah ini tepat diatas skrip tadi.
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #000000}
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #000000}
- Lalu cari skrip <b:includable id='main' var='top'>
- Kopas skrip dibawah ini dan gantikan skrip tadi.
<b:includable id='breadcrumb' var='posts'><b:if
cond='data:blog.homepageUrl != data:blog.url'><b:if
cond='data:blog.pageType == "static_page"'><div
class='breadcrumbs'><span><a
expr:href='data:blog.homepageUrl'
rel='tag'>Home</a></span> »
<span><data:blog.pageName/></span></div><b:else/><b:if
cond='data:blog.pageType == "item"'><!--
breadcrumb for the post page --><b:loop values='data:posts'
var='post'><b:if cond='data:post.labels'><div
class='breadcrumbs'
xmlns:v='http://rdf.data-vocabulary.org/#'><span
typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl'
property='v:title' rel='v:url'>Home</a></span><b:loop
values='data:post.labels' var='label'>» <span
typeof='v:Breadcrumb'><a expr:href='data:label.url'
property='v:title'
rel='v:url'><data:label.name/></a></span></b:loop>»
<span><data:post.title/></span></div><b:else/><div
class='breadcrumbs'><span><a
expr:href='data:blog.homepageUrl'
rel='tag'>Home</a></span> »
<span>Unlabelled</span> »
<span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if
cond='data:blog.pageType == "archive"'><!--
breadcrumb for the label archive page and search pages.. --><div
class='breadcrumbs'><span><a
expr:href='data:blog.homepageUrl'>Home</a></span>
» <span>Archives for
<data:blog.pageName/></span></div><b:else/><b:if
cond='data:blog.pageType == "index"'><div
class='breadcrumbs'><b:if cond='data:blog.pageName ==
""'><span><a
expr:href='data:blog.homepageUrl'>Home</a></span>
» <span>All
posts</span><b:else/><span><a
expr:href='data:blog.homepageUrl'>Home</a></span>
» <span>Posts filed under
<data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable
id='main' var='top'><b:include data='posts'
name='breadcrumb'/>
adapun alternatif dari skrip <b:includable id='main' var='top'> diatas yaitu :
Pertama cari dahulu <div class='post hentry'>
Kemudian pastekan skrip berikut tepat dibawah kode tadi
Pertama cari dahulu <div class='post hentry'>
Kemudian pastekan skrip berikut tepat dibawah kode tadi
<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>
- Dan yang paling penting klik Simpan template
