Blooglog

Tutorial Ngeblog, Tips dan Trik Tentang Ngeblog

Cara Membuat Breadcrumbs Valid HTML 5 Blogspot

Cara Membuat Breadcrumbs Valid HTML 5 Blogspot – Breadcrumbs ialah bentuk dari bantuan navigasi yang digunakan dalam tampilan interface yang akan dilihat oleh pengguna. Cara ini dibuat untuk dapat membantu pengguna mengetahui lokasi sebuah aritkel atau postingan yang ada pada blog Anda.

Cara Membuat Breadcrumbs Valid HTML 5 Blogspot

Pada Situs atau Blog yang sudah memiliki banyak halaman, navigasi breadcrumbs dapat meningkatkan cara pengguna menemukan jalan atau jejak suatu artikel. Breadcrumbs juga merupakan bantuan efektif yang menunjukkan lokasi pengguna dalam hirarki blog atau website, dengan begitu dapat membuatnya mudah untuk menemukan lokasi artikel tersebut.

Breadcrumbs ini 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 tujuan awal atau entri dalam hirarki struktur situs halaman utama (Home/Beranda).

Secara umum breadcrumbs akan tampi 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 akan 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.DomainAnda.com di pencarian Google, lalu lihat hasilnya.

Cara Membuat Breadcrumbs pada Blogspot

1. Login Ke Blogger.

2. Klik pada menu Template/Tema.

3. Klik Edit HTML (backup template agar aman saat nanti terjadi error).

4. Cari kode berikut ]]></b:skin>, gunakan CTRL + F agar lebih mudah.

5. 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}

Pada bagian {color:#xxxxxx} dapat Anda ganti sesuai apa yang Anda inginkan.

6. Cari lagi kode <b:includable id='main' var='top'>, klik pada titik tiga untuk membuka kode.

7. Hapus kode <b:includable id='main' var='top'> dan ganti 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'>
<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'/>

8. Simpan template.

Ada beberapa manfaat atau kelebihan ketika menggunakan breadcrumb ini:

1. Memberikan kemudahan dan kenyamanan kepada 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 menggangu area blog lainnya.

4. Karena Breadcrumbs biasanya berbentuk horizontal berorientasi dengan jelas bentuk breadcrumbs tidak mengambil banyak ruang pada halaman.

Dari segi penggunaan breadcumb ini, Anda tidak akan mendapatkan hal yang negatif atau buruk pada konten Anda. Justru malah akan mendapatkan segi positif pada blog Anda, jika diterapkan secara benar.

Nah, itulah tutorial Cara Membuat Breadcrumbs Valid HTML 5 Blogspot, semoga cara ini dapat bermanfaat dan bisa menigkatkan kualitas blog Anda.

Tinggalkan Komentar

Blooglog © 2017 Frontier Theme