Cara membuat breadcumb pada blog | Shattered Stories

Breadcrumb adalah menu navigasi yang menunjukkan letak atau posisi sebuah halaman yang sedang terbuka. Breadcrumb biasanya di pasang di bagian bawah artikel atau di bagian atas postingan, tepatnya di atas atau di bawah judul artikel. Menu navigasiBread Crumb ini berupa beberapa link yang menuju ke halaman homepage blog ( Home / Beranda ), link kategori atau label artikel serta judul artikel yang sedang terbuka. Untuk lebih jelasnya, lihat di bagian atas artikel ini.

Tujuan Membuat Breadcrum di blog

Saya pribadi menyukai breadcrumb karena bread crumbs bisa menghiasi bagian atas halaman posting agar judul artikel tidak terlihat kaku. Tapi di balik fungsinya untuk mempercantik tampilan blog, breadcrumb juga merupakan salah satu pendukung SEO. Menurut master SEO, denganmemasang breadcrumb di atas judul artikel, mesin pencari akan lebih mudah menelusuri halaman yang ada di dalam blog sehingga kesempatan untuk tampil di halaman depan hasil pencarian menjadi lebih besar. Selain itu, dengan membuat breadcrumb di halaman artikel pengunjung akan lebih mudah mencari artikel dengan label yang sama pada sebuah blog yang tidak dilengkapi dengan Related Post / Artikel Terkait.

Hampir semua blog menggunakan breadcrumb. Alasan utama blogger memasang menu navigasi SEO ini adalah untuk meningkatkan SEO Blog. SEO yang yang kuat akan mendatangkan trafik yang melimpah. Blog tarfik yang melimpah akan menjadi sebuah ladang online dan pemiliknya akan panen dollar. Mau ??? 

Cara membuat Breadcrumb di blogger Membuat menu navigasi bread crumbs di blog sangat mudah. Kopi, eh copy kode breadcrumb, paste di template blog, klik simpan template, selesai...

Penjelasan selengkapnya tentang cara membuat dan memasang menu navigasi breadcrumb di blog adalah sebagai berikut :

• Silahkan masuk ke dasbor blog anda dengan memasukkan username dan pasword blog anda di www.blogger.com.
• Selanjutnya buka halaman kode template blog untuk memasang kode breadcrumb di template.
• Belum tahu cara masuk ke halaman edit template ? Klik link di bawah ini untuk membaca artikel selengkapnya yang di lengkapi dengan gambar

"Cara mengedit template Blog".

• Sudah tahu cara mengedit template ? Lanjutkan dengan memberi tanda checklist pada kotak kecil yang ada di depan tulisan "Expand template widget".
• Untuk berjaga² terjadi kerusakan template atau error karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda.
• 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. Bisa juga letakkan kodenya di bawah kode <div class=’post hentry’>  atau bisa juga di atas kode <div class='post-header-line-1'/> .
• Jangan lupa gunakan Gunakan Tombol F3 pada keyboard untuk melakukan pencarian kode dengan cepat.
• Apabila anda ingin mengedit kodenya, silahkan edit kode yang berwarna MERAH.

Selanjutnya........

• Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, cari kode untuk ]]></b:skin>  di template blog anda.
• Copy kede CSS breadcrumb berikut ini, lalu Paste di atas kode ]]></b:skin>

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

Dengan kode tersebut, anda bisa mengganti besarnya font breadcrumb dengan mengganti angka 12 menjadi lebih besar atau lebih kecil. Kode Georgia adalah kode untuk jenis huruf yang di gunakan breadcrumb. Anda bisa mengganti jenis hurufnya dengan jenis huruf yang lain sepertitrebuchet ms, arial, verdana atau font lain sesuai keinginan anda. Untuk kode pada baris terakhir, angka 4 berarti besar garis bawah breadcrumb adalah 4 piksel, double berari garis ganda, dan kode #000000 adalah kode HTML untuk warna hitam. kode tersebut artinya :
"Garis pinggir bawah menu breadcrumb adalah garis ganda ( double ) dengan ketebalan garis sebesar 4 piksel dan garisnya berwarna hitam ( #000000 ). Anda bisa mengganti angka 4 menjadi lebih besar atau lebih kecil, kode : double bisa di ganti dengan kode :

solid = garis tunggal biasa atau
dashed = garis putus - putus

Anda juga bisa mengganti warna tulisan menu breadcrumb dengan mengganti kode warna hitam ( #000000 ) dengan kode warna yang lain, misalnya kode #B40404 untuk warna merah dan sebagainya. Untuk melihat lebih banyak kode warna, klik Link di bawah ini :

"Tools untuk melihat kode warna"

Catatan : 
Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi Breadcrumbs tidak terlihat pada beberapa template. Jika hal ini terjadi pada template anda, 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 Breadcrumbs 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 diantara kode yang berwarna HITAM persis seperti contoh di atas.
• Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya, ya syukur.... hehehehehe..........
• Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip.

Jika anda sudah terbiasa mengedit template, sebaiknya coba "Cara membuat Breadcrums cepat terindeks". Tapi, jika anda belum terbiasa dengan kode HTML template blog, sebaiknya gunakan cara membuat breadcrumb di atas. Kode untuk membuat breadcrumb yang langsung terindeks jauh lebih banyak dari kode breadcrumb biasa di atas. Selain itu, setelah memasang breadcrumb yang cepat terindeks, akan sulit menghapus breadcrumbnya karena kode yang di pasang sebelumnya akan terpisah ( hanya untuk beberapa jenis template ). Dari banyak template yang saya coba pasangi breadcrumb yang langsung terindeks, tidak satupun yang membuat kode breadcrumb tetap utuh.

Sumber http://www.bloggerbugis.com/