Breadcrumbs Pada Blog

Boby dan Grace merupakan dua anak kecil yang hidup dalam suatu keluarga yang sangat miskin. Karena kehidupan yang sangat miskin kedua orang tuanya tidak dapat memberi makan buat anak-anaknya. Untuk itulah mereka memutuskan untuk membawa anak-anaknya ke dalam hutan dan berencana meninggalkan mereka untuk dimangsa oleh binatang liar. Boby dan Grace menemukan suatu rencana dan bersama mereka terdapat sepotong roti yang sengaja diberikan oleh orang tuanya sebagai bekal nantinya buat anak-anak mereka. Di sepanjang perjalanan, Boby dan Grace menjatuhkan potongan demi potongan kecil roti tersebut dan berharap agar nantinya mereka dapat menemukan jalan kembali menuju rumah mereka. Sampai di sini kita stop dulu ceritanya dan akhir dari cerita tersebut bisa kalian simpulkan sendiri.

Terus apa hubungan cerita di atas dengan blog? Ya tentu saja ada. Jika kalian sedang mambaca postingan ini, kalian sebenarnya belum berada di halaman utama (homepage). Jadi bagaimana kalian bisa menemukan halaman utama blog ini? kalian dapat menggunakan Breadcrumbs Navigation yang ada di atas judul postingan ini. Sudah kelihatan bukan? Jika kalian klik tulisan "Home" maka Breadcrumbs Navigation akan membimbing kalian untuk menuju halaman utama blog ini. Pada halaman utama (home), Breadcrumbs Navigation tidak akan terlihat. Hal itu dikarenakan kalian sudah berada di rumah. Sekarang coba kalian klik label atau arsip yang ada di sidebar sebelah kiri. Breadcrumbs Navigation akan menunjukkan sedang berada di halaman mana kalian berada dan akan membimbing kalian untuk kembali ke halaman utama (home). Pada postingan kali ini saya akan mencoba memberi tahu kepada kalian untuk membuat breadcrumbs navigation tersebut.

Login-lah pada blog yang kalian miliki, terus masuk ke bagian "Tata Letak" dan pilih "Edit Html". Sampai disini kalian perlu melakukan "Expand Template Widget" dan seperti biasa dengan menggunakan Ctrl-F pada keyboard carilah kode di bawah ini.

]]></b:skin>

Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> tersebut.

.breadcrumbs {
  font-size: 11px;
  margin:0;
  padding: 5px 0px 5px 0px;
  border-bottom: double #eaeaea;
  }

Setelah kalian masukkan kode di atas, kalian cari lagi kode di bawah ini.

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

Setelah kalian temukan kode di atas, maka akan tampak tampilan kode seperti di bawah ini.

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

Kalau sudah benar seperti tampilan di atas, silahkan kalian masukkan kode 1 tepat di atas kode yang berwarna merah dan kode 2 tepat di bawah kode berwarna biru.

Kode 1

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</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'>Home</a> &#187; Arsip Bulan <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'>Home</a> &#187; Pencarian Halaman
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Kode 2

<b:include data='posts' name='breadcrumb'/>

Langkah terakhir simpan template dan lihat blog kalian. Good job!