Bagimana Menambahkan Breadcrumb di Blogger

Breadcrumb adalah bagian yang menunjukan posisi halaman yang dibuka oleh pengunjung blog, secara default di template blogger tidak terdapat breadcrumb. Breadcrumb sangat berguna untuk kemudahan navigasi pengunjung agar tidak kebingungan disaat membuka halaman blog.
Breadcrumb tidak terdapat pada template Blogger default, umumnya susunan Breadcrumb adalah Home > Label > Judul posting. BagaimanaMenambahkan Breadcrumb di Blogger ?
Breadcrumb di Blogger
Untuk menambah breadcrumb di blogger diperlukan beberapa script tambahan,
Berikut langkah-langkahnya :
  1. Login ke Dashboard
  2. Masuk ke menu Rancangan(Design) > Edit HTML.
  3. Jangan lupa untuk membackup template dengan klik Download Template Lengkap
  4. Lalu centang ExpandTemplate Widget
  5. Cari kode berikut :
    <b:include data='top' name='status-message'/>
  6. Lalu ganti dengan :
    <b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/>
  7. Kemudian cari kode ini :
    <b:includable id='main' var='top'>
  8. Ganti dengan kode berikut :
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <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 == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
  9. Terakhir cari kode]]></b:skin> ganti dengan kode berikut :
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>
Sekarang anda bisa tinggal klik save dan jika tidak ada kesalahan, sekarang breadcrumb telah terpasang di blog anda.
Selamat mencoba !!

4 comments:

  1. pernah pasang ni yg kyk bginian..... tp menurut saya menghalangi pemandangan aj... hhe....

    ReplyDelete
  2. wah panjang bgt son scriptnya, kalau aq navigasi breadcrum aq simple aja sob

    jika ingin baca2 ada di postingan saya "menyempurnakan navigasi bread crumb" salam kenal sob

    ReplyDelete
  3. hehehehehe
    aku untungnya udah makek..
    katanya sih ini lebih disukai ama gogle yah?

    ReplyDelete
  4. boleh juga nih dipraktekin. Tutor blog juga ya!

    ReplyDelete

Silahkan tinggalkan komentar anda, jangan segan walaupun hanya sekedar say hello :)