0 Cara Membuat Breadcrumbs di Blog

Breadcrumbs atau jejak breadcrumb adalah bentuk bantuan navigasi yang digunakan dalam antarmuka pengguna. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam dokumen atau artikel.

Pada Situs atau Blog yang memiliki banyak halaman, navigasi breadcrumbs dapat meningkatkan cara pengguna menemukan jalan atau jejak mereka. Breadcrumbs juga merupakan bantuan efektif yang menunjukkan lokasi pengguna dalam hirarki blog atau website, membuatnya menjadi sumber besar informasi kontekstual untuk halaman arahan.

Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman blog atau website, sering ditempatkan di atas judul. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri dalam hirarki struktur situs-halaman induk (Home/Beranda).

Pada umumnya breadcrumbs terlihat seperti dibawah ini:

Home � Label � Judul Artikel

Home � Label 1 � Label 2 � Judul Artikel

Atau

Home � Label � Judul Artikel

Home � Label 1 � Label 2 � Judul Artikel

Atau

Home : Label : Judul Artikel

Home : Label 1 : Label  2 : Judul Artikel

Breadcrumbs biasanya terindex oleh mesin pencari seperti Google dan dapat dilihat diwebmaster tools sebagai structured data. Dan ini adalah contoh hasilnya.

Catatan untuk sebuah blogspot akan langsung terlihat seperti gambar, sedangkan untuk Top Level Domain (namawebsite.com) biasanya harus memiliki ranking dahulu agar cepat terlihat seperti gambar.

Jika ingin mengetahui contoh hasil breadcrumbs yang lain, coba ketikan nama website ini dalam pencarian Google, dan lihat hasilnya. Untuk mendapatkan hasil tersebut harus menerapkan 2 atau lebih label/tag untuk 1 artikel.

Cara membuat breadcrumbs di blog

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan, 

    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 

    Dan cari kode berikut  ]]></b:skin>

    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode berikut diatas ]]></b:skin>

/* breadcrumbs
----------------------------------------------- */

.breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:1px solid green; font-weight:bold; font-family:Tahoma; height:auto;}

.breadcrumbs a, .breadcrumbs a:visited{color:#CC0099; }

.breadcrumbs a:hover{color:#00477D;}

warna merah dapat disesuaikan dengan keinginan.

7. Cari kode <b:includable id='main' var='top'> dan setelah ketemu tekan panah sebelah kirinya untuk memperluas.

8. Hapus dan Ganti kode <b:includable id='main' var='top'> dengan kode dibawah ini.

<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 -->

<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 + &quot;?&amp;max-results=7&quot;' 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 page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Arsip untuk <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>Semua Posting</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posting Dengan Kategori <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

warna orange dapat dirubah untuk menampilkan jumlah posting dalam label.

Beberapa fungsi dari Breadcrumbs sebagai berikut:

Kenyamanan Bagi Pengguna

Breadcrumbs digunakan terutama untuk memberikan pengguna sarana sekunder navigasi sebuah blog atau website. Dengan menawarkan jejak breadcrumbs untuk semua halaman pada situs multi-level besar, pengguna dapat menavigasi ke kategori tingkat yang lebih tinggi lebih mudah.

Tidak memerlukan area yang besar

Karena Breadcrumbs biasanya berbentuk horizontal berorientasi dengan jelas bentuk breadcrumbs tidak mengambil banyak ruang pada halaman. Manfaat adalah bahwa breadcrumbs memiliki sedikit atau tidak ada dampak negatif dalam hal kelebihan konten, dan breadcrumbs memiliki manfaat lebih besar daripada negatifnya jika digunakan dengan benar.

Demikian cara membuat breadcrumbs di blog pada postingan ini, mudah-mudahn dapat bermanfaat.

Rating: 3

Tweet

Komentar →