cara membuat breadcrumb/menu navigasi diatas artikel posting

Posted by Gani Mugni Rabu, 04 Januari 2012 0 komentar

Membuat Breadcrumb Menu Pada Blog



Membuat menu navigasi berurutan di atas artikel posting atau istilahnya disebut breadcrumb,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.
Untuk melihat hasil dari sebuah blog yang sudah membuat breadcrumb/menu navigasi diatas posting bisa lihat gambar.


cara membuat breadcrumb.


Atau bisa kunjungi situs teman saya langsung di blog latihan seo nya.
Untuk membuatnya kita bisa menggunakan script ciptaan hoctro di hoctro.blogspot.com
Pelajaran Blog ingin menjabarkannya kembali langkah cara membuat breadcrumb/menu navigasi diatas artikel posting ini dalam bahasa Indonesia.

Langkah Cara Membuat Breadcrumb Pada Blogger



  1. Pertama,pastikan anda sudah membuat label pada blog.
  2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
  3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
    <b:includable id='main' var='top'>
  4. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
    <b:includable id='breadcrumbs' var='post'>

    <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
      <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 Hack -->
    </b:includable>

  5. Kemudian,carai lagi kode berikut:

    <b:if cond='data:post.dateHeader'>
  6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>
  7. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
    }

  8. Kemudian Simpan Templates dan Selesai.

menu navigasi breadcrumbs ini hanya akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda membuka halaman suatu posting bukan halaman utama blogspot anda.


Selamat mencoba dan semoga berhasil,specially thank's to hoctro.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: cara membuat breadcrumb/menu navigasi diatas artikel posting
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/01/cara-membuat-breadcrumbmenu-navigasi.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.