Cara Mudah Memasang Breadcrumbs

Cara Mudah Memasang Breadcrumbs

Cara Mudah Memasang Breadcrumbs  Sobat Bloggers, breadcrumbs adalah semacam klien navigasi untuk blog / situs. Breadcrumbs membantu pembaca untuk memahami topik yang terkait dengan kategori apa mereka sedang membaca. Hal ini juga membantu pembaca untuk mencari dan membaca artikel tentang kategori apa yang mereka inginkan, breadcrumbs sudah umum digunakan pada sebuah website atau blog, untuk itu navigasi breadcrumb diperlukan untuk mengeksposur lebih banyak konten di blog untuk pengunjung anda.

Breadcrumbs dapat anda lihat sebagai bar horisontal di atas posting blog,selain itu breadcrumbs juga memberi manfaat dalam hal SEO untuk blog anda,keuntungan utama menambahkan breadcrumbs ke blog anda,  maka dengan itu anda akan menambahkan kata kunci frase lebih dan judul untuk struktur link dari blog anda.  jika anda menggunakan sebuah hosting blogger, maka disini saya akan memberikan panduan sederhana tentang cara membuat breadcrumbs yang juga SEO  Friendly

1. Buka akun blogger anda

2. Pilih menu Template > Klik Edit HTML.

3. Silahkan anda cari kode seperti di bawah ini.

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

4. Lalu ganti kode tersebut dengan kode dibawah ini.

  <b:includable id='breadcrumb' var='posts'>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>

     </div>

      <b:else/>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:loop values='data:posts' var='post'>

        <b:if cond='data:post.labels'>

        <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>

        </div>

        <b:else/>

        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>

     </b:if>

        </b:loop>

      <b:else/>

        <b:if cond='data:blog.pageType == &quot;archive&quot;'>

        <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>

     </div>

      <b:else/>

        <b:if cond='data:blog.searchQuery'>

        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>

     </div>

      <b:else/>

        <b:if cond='data:blog.pageType == &quot;index&quot;'>

        <div class='breadcrumbs'>

     <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>

        <b:else/>

        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>

        </b:if>

        </div>

      </b:if>

      </b:if>

      </b:if>

      </b:if>

      </b:if>

      </b:if>

</b:includable>

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

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

5. Selanjutnya cari kode  ]]></b:skin> Kalo sudah ketemu silahkan paste kode CSS dibawah ini dan letakan tepat di atas kode ]]></b:skin> tadi.

.breadcrumbs {

 font-size: 11px;

 color: #666;

 padding: 10px 0px;

 margin: 10px 0px 20px;

 border-bottom: 1px solid #ddd;

}

6. Klik simpan template.

Oke..saya rasa sudah cukup tutorial cara mudah membuat breadcrumbs di blog anda,agar blog anda terlihat lebih bagus lagi, jangan lupa untuk melihat hasilnya, silahkan lihat di blog bagian atas artikel anda. semoga berhasil.

Jangan lupa lihat artikel saya yang lain nya, mudah-mudahan bisa membantu anda .

Terimakasih telah mengunjungi blog saya ini.