Cara Membuat Breadcrumb Blogger

Bookmark and Share

Membuat menu breacrumb atau menu berurutan memang sudah biasa di gunakan sobat2 blogger yang berfungsi untuk memudahkan pengunjung mengetahui kategori dan sub menu blog. Namun ada fungsi lain yang lebih penting, yaitu optimasi SEO. Sebetulnya sudah banyak tutorial-tutorial cara membuat menu breadcrumb ini, Namun fedoce sarankan agar sobat memakai cara fedoce, karena apa? karena fedoce menggunakan tanda > bukan tanda » Yang mana tanda > lebih di sukai robot google dari pada tanda ». Kok bisa? fedoce juga gak tau pasti, Tapi secara logika bisa di pahami yatu robot google gak suka yang repot-repot, tapi suka yang simple. jadi lebih memilih > satu aja. Yups itu dia beberapa fungsi dari breadcrumb yang bisa fedoce jelaskan. Dan selanjutnya lagsung ketahap pembuatannya.

Cara Membuat Breadcrumb Blogger fedoceCara Membuat Breadcrumb Blogger :

    1. Login bloger lalu masuk ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, centang tulisan Expand Widget Templates dan jangan lupa Download Full Template untuk jaga-jaga.
    2. Cari kode dibawah ini. tekan CRL+F atau F3 untuk mencarinya.
      <b:includable id='main' var='top'>
    3. Setelah ketemu, letakkan script berikut ini tepat diatasnya.
      <b:includable id='breadcrumbs' var='post'>
      <!-- Breadcrumbs -->
        <b:if cond='data:blog.pageType == "item"'>
            <p class='breadcrumbs'>
            <span class='post-labels'>
              <b:if cond='data:post.labels'>
                Browse:
                <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
                <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:if cond='data:post.title'>
      &gt;  <b><data:post.title/></b>
                </b:if>
              </b:if>
            </span>
            </p>
        </b:if>
      <!-- End of Breadcrums -->
      </b:includable>

    4. Kemudian,cari lagi kode berikut :
      <b:if cond='data:post.dateHeader'>
    5. Setelah ketemu, letakkan script berikut ini tepat diatasnya
      <b:include data='post' name='breadcrumbs'/>
    6. Lalu cari kode ]]></b:skin> Nah, klo sudah ketemu, letakkan kode css breadcrumb ini tetap diatas kode tadi.
      .breadcrumbs {
      border-bottom:1px dotted #000;
      margin:2em 0 0.5em;
      padding:0 0 0.5em;
      }

    7. Dan yang terakhir save template. Selesai..Party smile 

Untuk hasil menu breadcrumb hanya akan tampil pada halaman single post saja dan tampilannya bisa diatas judul artikel atau bisa juga dibawah judul artikel. Seperti punya fedoce, itu tampil dibawah artikel, gak sah kawatir, fungsinya sama saja. Yang perlu diingat. Sebelum sobat membuat menu breadcrumb ini, Pastikan sobat subah membuat label diblog sobat. Sekian artikel dari fedoce. Semoga bermanfaat. Jika ada pertanyaan silahkan sobat tanyakan. Selamat mencoba.GOOD LUCK!Winking smile