Cara Membuat Breadcrumbs di Blog Valid HTML 5

By |Updated: November 9, 2016 4 Comments

Breadcrumbs di Blog Valid HTML 5

Breadcrumbs adalah bentuk bantuan navigasi yang digunakan dalam antarmuka pengguna. Cara ini dibuat untuk memungkinkan pengguna 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).

blogging

Image: blogging

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

Cara Membuat Breadcrumbs di Blog

Breadcrumbs biasanya terindex oleh mesin pencari seperti Google dan dapat dilihat diwebmaster tools sebagai structured data. Ini juga berfungsi sebagai nilai tambah dari SEO (Search Engine Optimization).

Jika ingin mengetahui contoh hasil breadcrumbs yang lain, coba ketikan sebuah website seperti ini www.namaweb.com dalam pencarian Google, dan lihat hasilnya.

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 Hijau 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. Kode dibawah ini saya dapat dari Kang Ismet – Breadcrumbs SEO Friendly dan valid HTML 5.

<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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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>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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Beberapa fungsi dari Breadcrumbs:

1. Kenyamanan Bagi Pengguna

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

3. Tidak memerlukan area yang besar

4. 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-mudahan dapat bermanfaat.

Tags:
ratingsratingsratingsratingsratings (No Ratings Yet)
loadingLoading...

4 Komentar: Cara Membuat Breadcrumbs di Blog Valid HTML 5

Leave a Reply

Your email address will not be published. Required fields are marked *