Cara Membuat Menu Breadcrumbs di Blogspot

---

Membuat Breadcrumbs Pada Blogger-Apakah kalian tahu yang dimaksud dengan breadcrumbs? secara singkat breadcrumbs adalah menu navigasi yang letaknya diatas judul postingan blog. dan hampir setiap pengunjung melihat menu navigasi tersebut (direkomendasikan untuk admin blogger yang sudah memasangnya) bentuk dari breadcrumbs rata-rata horizontal. dengan memasang menu navigasi/breadcrumbs di blogger, secara tidak langsung dapat membantu pengunjung agar dapat lebih memahami topik yang terkait atau sedang berada dikatagori mana yang sedang mereka baca sehingga dapat mencari artikel yang terkait dengan judul tersebut. contoh dari breadcrumbs yang ada di blog belajar dan berbagi adalah sebagai berikut

Sebenarnya menambahkan breadcrumbs pada blogspot bisa menjadikan keuntungan tersendiri, disamping blog anda yang kaya dengan judul tersetruktur dan pastinya blog anda juga semakin SEO Friendly "Kata Orang". akan tetapi saya belum merasakan dampak positif dari memasang menu navigasi breadcrumbs di blog ini. jika anda ingin ikut-ikutan memasang menu navigasi tersebut, sebaiknya ikuti langkah-langkah ini dengan benar. apakah anda sudah siap? jika anda sudah siap, mari kita sulap blog anda agar lebih menggigit dengan adanya menu navigasi/breadcrumbs.

Pertama

Login ke blogger anda, template, edit html, cari kode ]]></b:skin> dan letakan kode dibawah ini, tepat diatas kode ]]></b:skin> save template anda

.breadcrumbs {
padding: 5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height:1.4em;
border-bottom:3px double #f35608;
}

Kedua

Jika anda sudah melakukan cara pertama tadi, maka cara kedua ini ialah cari kode <b:include data='top' name='status-message'/>. jika sudah ketemu kodenya, maka pastekan kode dibawah ini tepat dibawah kode tersebut.

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

Save template anda. 

Biasanya kalau anda benar melakukan kedua cara diatas, maka postingan anda akan secara otomatis hilang. saya sarankan anda jangan panik atau marah-marah pada blog belajar dan berbagi di komentar ini. karena masih ada cara ketiga untuk menyulap bagaimana postingan anda akan muncul kembali, sekaligus menu navigasi/breadcrumb muncul diatas postingan anda.

Ketiga

Anda cari kode <b:includable id='main' var='top'> dan tambahkan kode dibawah ini, tepat diatas kode tersebut.

<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>

Save template anda dan lihat hasilnya. apakah menu navigasi breadcrumbs anda berjalan sempurna?

Nb: dampak dari anda memasang menu navigasi ini ialah munculnya tulisan tampilkan posting dengan label, dan itu bisa di buktikan dengan cara mengklik salah satu url label blogspot anda. akan tetapi menurut saya itu tidak masalah, karena semua sudah diulas oleh blog belajar dan berbagi.

Anda Berada di Label Blogger HTML