Blog Ping

Rabu, 10 November 2010

Cara Membuat Navigasi Breadcrumb


Kali ini saya akan membahas tentang "Membuat Navigasi Breadcrumb"
Navigasi Breadcrumb berguna untuk memudahkan pengunjung untuk kembali kehalaman sebelumnya.
Contoh hasilnya:



Ada 2 jenis navigasi website, yaitu navigasi internal dan navigasi eksternal.
  1. Navigasi internal adalah link yang akan menavigasi pengunjung dari satu halaman ke halaman lain tapi masih didalam website/blog yang sama contohnya seperti Navigasi Breadcrumb atau Navigation Breadcrumb
  2. Navigasi eksternal adalah link yang digunakan untuk menavigasi pengunjung keluar dari halaman website/blog sekaligus keluar dari website/blog
Sekarang cara membuatnya:


  1. Masuk dasbor
  2. Pilih rancangan
  3. Edit html
  4. Centang Expand Template Widget
  5. Kemudian cari kode ]]></b:skin>
  6. Letakkan kode dibawah ini diatas kode ]]></b:skin>
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
  7. kemudian cari code <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika juga tidak ada cari yang mirip
  8. Copy code berikut lalu paste 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' 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>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </b:if>
    </b:loop>

    </div>
    </b:if>
    <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; Archives for <data:blog.pageName/>
    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:navMessage'>
    <div class='breadcrumbs'>
    <data:navMessage/>
    </div>
    </b:if>
    </b:if>
  9. Simpan template