Cara Membuat Breadcrumb

Home » Blogger » SEO » Cara Membuat Breadcrumb

Cara Membuat Breadcrumb

Posted by pendidikankita Sabtu, 18 Mei 2013 0 comments

Apa ItuBreadrcrumb?

Breadcrum adalah navigasi horizontal yang mempermudah pengunjung untuk melihat lokasi di dokumen dan halaman apa ia berada, breadcrum juga mempermudah pengunjung melacak isi blog/website kita. Posisi breadcrum biasanya terletak dibagian atas (dibawah header).

Keuntungan Memasang Breadcrumb

Keuntungan memasang breadcrum sangat disukai oleh search engin, menurut para master SEO memasang breadcrumadalah salah satu langkah optimasi blog agar menjadi SEO. Buktinya benar, dengan adanya breadcrum di blog/website kita setiap postingan akan lebih cepat terindeks oleh search engin dan lebih rapi.

FungsiBreadcrumb

Fungsi breadcrum seperti yang saya utarakan di atas Mempermudah pengunjung untuk melihat di halaman apa dia sedang berada, juga memudahkan kita dalam menafigasi.

CaraMemasang Breadcrumb di Blog

Cara memasang Breadcrum di Blogtebilang cukup mudah.

1. Login terlebih dahulu ke blog anda

2. Masuk ke Rancangan>>Edit HTML. Jangan lupa untuk membackup template anda untuk mengantisipasi jika terjadi kesalahan setelah di save

3. Cari code <b:include data='top' name='status-message'/> gunakan Ctrl+F untuk memudahkan untuk pencarian anda.

4. Jika sudah ditemukan silahkanmasukan code <b:include data='posts' name='breadcrumb'/> tepat di atas code yang dicari tadi

5. Setalah menambahkan code di atas silahkan cari kembali code ini <b:includable id='main' var='top'>

6. Jika sudah ditemukan silahkan copy code di bawah ini dan letakkan di atas code yang dicari tadi.

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
     » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
     » <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == ""'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
    </b:if></div></b:if></b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>

7. Langkah terahir silahkan cari kode ]]></b:skin>

8. Kemudian pastekan kode berikut di bawah code tadi

.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }

Sekarang simpan (save) dan lihat hasilnya.
Selamat Mencoba...!!!

Dunia Pendidikan