Membuat Breadcrumbs - Navigasi Pada Blogger

Breadcrumbs digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini. Dengan menggunakan breadcrumbs, pengguna juga dapat menelusuri path yang telah dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Breadcrumbs memberikan jalan bagi pengguna untuk mengetahui halaman-halaman yang pernah dilewatinya. Breadcrumbs merupakan salah satu kelengkapan navigasi suatu blog, hal ini untuk membantu pengunjung (pembaca) dalam menelusuri satu demi satu halaman blog atau website. Ingin tahu lebih jauh tentang breadcrumbs silahkan bacadisiniataudisini. Mau mencoba memasangnya di blogger???

 

Integrasi Breadcrumb pada Blogger

Langkah 1

Login ke Blogger dalam kondisi perut kenyang (kalo sedang puasa, tinggalkan saja artikel ini)

Langkah 2
Masuk 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{
float:left;
width:590px;
font-size:11px;
border-bottom:double #eaeaea;
margin:0 0 20px;
padding:0 0 3px
}

Langkah 6
Cari kode dibawah ini:

<b:includable id=’main’ var=’top’>
<!-- posts -->
<div class=’blog-posts hfeed’>
<b:include data=’top’ name=’status-message’/>
<data:adStart/>

Langkah 7

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’/> -->
<b:include data=’posts’ name=’breadcrumb’/>

Langkah 9
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’>
<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’ 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 == &quot;true&quot;’> &#187;
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<div class=’breadcrumbs’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == &quot;&quot;’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah 11
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 == &quot;item&quot;’>
<div class=’breadcrumbs’>
Browse &#187; <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 == &quot;true&quot;’> &#187;
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<div class=’breadcrumbs’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == &quot;&quot;’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; 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... :)

Membuat Breadcrumbs - Navigasi Pada Blogger 9 out of 10 based on 10 ratings. 9 user reviews.