Cara Membuat Breadcrumb

 

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 Blog tebilang 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 == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page www.berryhs.com -->
    <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'>
     &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
     &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive and search pages  www.berryhs.com  -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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...!!!

Share on Google Plus

About catatancidingku.bligspot.com

M Agung Sutrisno: Saya seorang Web Devoloper sejak tahun 2015. Saya tertarik dengan dunia IT sejak tahun 2013. Lulus dari Universitas Islam Madura pada tahun 2016. Pernah bekerja di Univeritas Islam Madura selama 2 tahun. Mulai tahun 2017 mulai bekerja sebagai Web Developer di salah satu perusahaan software PT. Warung Jasa Teknologi, Jakarta.