Cara Menambahkan Breadcrumbs Pada Blog

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}

• 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 == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- 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'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

• Dan yang paling penting klik Simpan template

Demikian dulu ya postingan ini saya bagikan. saya membagikan dua cara tersebut untuk mengingatkan saya dikala lupa bagaimana cara membuat breadcrumb. buat temen-temen tinggal pilih mana yang lebih mantap dalam membuatnya. Semoga bermanfaat.