Cara Membuat Navigasi Breadcrumbs di Blogspot

Cara Membuat Navigasi Breadcrumbs di Blogspot | pada kesempatan kali ini saya akan menjelaskan Cara Membuat Navigasi Breadcrumbs di Blogspot, dan untuk contohnya silahkan sobat lihat pada blog saya ini di bagian atasnya dan di bawah judul artikel ini, perlu di perhatikan membuat Breadcrumbs navigasi ini sebenearnya sangat lah penting. Bagi sebagian besar Blogger, memasang Navigasi Breadrcumb pada blog adalah suatu keharusan demi meningkatkan SEO Blog. Jika anda juga berfikir demikian tapi belum tahu cara memasang Navigasi Breadrcumb pada Blog anda, berikut saya jelaskan tutorial cara membuatnya.

• 1. Silahkan masuk ke akun blog anda.

• 2. Pada halaman beranda blog, klik tombol RANCANGAN

• 3. Di halaman Rancangan, klik TAB EDIT HTML

• 4. Breri tanda Checklist pada kotak kecil yang ada di depan tulisan Expand Template Widget dengan mengkilk kotak tersebut.

• 5. Untuk berjaga² kerusakan template karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda dengan mengklik DOWNLOAD TEMPLATE

• 6. Copy kode html berikut ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#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>

• 7. Letakkan / Paste kode tersebut di bawah kode   <div class='post hentry uncustomized-post-template'> template blog anda, atau bisa juga di atas kode<div class='post-header-line-1'/>

Gunakan Tombol F3 pada keyboard untuk melakukan pencarian cepat.
Jika ingin mengedit kodenya, edit sja kode yang berwarna MERAH.

8. Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, Copy kede HTML berikut, lalu Paste di atas kode :

     ]]></b:skin>

template Blog anda. Berikut kodenya :

.breadcrumbs {
        padding:5px 5px 5px 0;
        margin: 0 0 5px;
        font-size:12px;
font-family: Georgia, trebuchet ms, Verdana;
        line-height: 1.4em;
        border-bottom:4px double #000000;
       }

Dengan kode tersebut, anda bisa mengganti Besar Huruf, Jenis Huruf, dan warna Garis Bawah Navigasi Breadcrumb anda.

Catatan : 
Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi Breadcrumbs tidak terlihat pada beberapa template. Jika demikian, lakukan seperti berikut ini :

Copy kode HTML pada step 6 lalu Paste di atas kode <div class='post-header'>  template anda. Itu akan membuat Navigasi Breadcrumbs berada di bawah Judul Artikel.

Jika ingin menyimpan Navigasi Breadcrumbsnya di Atas Judul Postingan / Artikel, buat kodenya seperti berikut ini :

<b:includable id='post' var='post'>
  <div class='post hentry'>

    <a expr:name='data:post.id'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#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>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>

    <div class='post-header-line-1'/>

    </div>

• Cari kode yg berwarna HITAM.
• Kode yang berwarna BIRU, adalah kode yang sama pada STEP 6 , lettakan kodenya diantar kode yang berwarna HITAM persis seperti contoh di atas.
• Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya.
• Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip. 
• ( source : blogger-bugis )

sampai di sini Cara Membuat Navigasi Breadcrumbs di Blogspot selesai