Belajar membuat breadcrumb sederhana di blogger
Blog kak Ryan - Membuat breadcrumb yang valid sesuai dengan data struktur sangatlah mudah, terlebih lagi jika kamu sudah mengenal lebih banyak meta tag condiition pada blogger serta menguasai dasar-dasar kode HTML.
Tapi sebelumnya kamu harus tahu apa itu breadcrumb beserta fungsinya. Dikutip dari seniberfikir.com "Breadcrumb adalah alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi mereka saat ini dalam konteks sebuah website."
Manfaat breadcrumbs juga bisa meningkatkan interaksi pengunjung terhadap konten yang ada dalam blog kamu. Cara membuat breadcrum sangat mudah sekali asalkan kamu memahami struktur dasar susunan kodenya, bisa dibuat dengab menggunakan markup HTML bisa juga dibuat dengan menggunakan JSON. Tapi kalau yang JSON ini hanya digunakan untuk menampikan pada search engine, kalau kamu mau menggunakan yang bisa diklik atau dalam bentuk hyperlink maka kita bisa membuatnya menggunakam HTML. Susunan struktur kode breadcrumb yang valid bisa kamu lihat di dokumentasi google developer.
Biasanya kamu sering melihat susunan seperti ini kan?
Home » Kategori » kategori » judul Artikel
Atau mungkin pernah melihat yang bentuknya seperti ini:
Home / Kategori / kategori / judul artikel.
Nah elemen itu disusun oleh kode breadcrumb seperti dibawah ini :
<div itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='1' itemprop='position'/>
<a href='URL Kategori' title='Home' itemprop='item'>
<span itemprop='name'>Nama Kategori</span></a>
</span> »
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='2' itemprop='position'/>
<a href='URL Kategori' title='Home' itemprop='item'>
<span itemprop='name'>Nama Kategori</span></a>
</span> »
Judul Artikel
</div>Pada kode diatas saya menyimpan breadcrumb pada elemen div, kamu juga bebas mau menggunakan tag apa saja. Bisa tag ol, bisa tag span, bisa tag h2, yang penting kamu menyertakan atribut itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList' yang menandakan kalau kode yang berada didalam elemen tersebut adalah breadcrumb. Dalam hal ini kita menggunakan domain schema.org karena schema pada domain data-vocabulary.org sudah tidak digunakan lagi dan akan kadaluarsa.
Untuk bagian penyusunya breadcrumb terdiri dari beberapa meta tag komponen penyusun. Bagian penyusun awal kita berikan atribut itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem' untuk memberi tanda kalau pada bagian tersebut ada satu item link. Bagian meta konten position digunakan untuk memberitahukan mesin pencari posisi urutan link tersebut. Atribut lain yang harus kamu sertakan dalam tag link adalah title='JUDUL Link' itemprop='item', yang memberitahuna search engin bawah itu adalah item link dengan nama yang kamu berikan.
Sebenarnya penyusunya tidak serumit itu, hanya saja saya menyesuaikan dengan blogger. Karena biasanya pada blogger bagian list style sudah diatur pada css, sehingga akan sangat sulit kita mempelajarinya. Dan beginilah bagian penyusunya yang saya ambil dari google developer.
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<!-- Method 1 (preferred) -->
<a itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<!-- Method 2 -->
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://example.com/books/sciencefiction"
href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Award winners</span>
<meta itemprop="position" content="3" />
</li>
</ol>Oke baklah saya anggap kamu sudah memahami susunan kode diatas, sekarang kita mulai membuat breadcrumb pada blogger. Tapi kali ini kita akan menggunakan meta tag condition berupa looping dan variable pengisinya yang sudah disediakan oleh blogger.
| Nama Kode | Fungsi Kode |
| expr: | mendefinisikan adanya variable |
| data:label.url | Berisi string URL label |
| data:post.title | berisi String Judul Post |
| data:label.name | Berisi string nama label |
| <b:loop index='Nomor' values='Array' var='variabel'></b:loop> | Perulangan Pada Blogger |
Breadcrumb versi sederhananya bisa kalian lihat dibawah ini, pada bagian ini saya tidak memberikan class apapun pada elemen ini. Jadinya kalau dipasang akan terlihat seperti teks polos biasa. Adapun bagian looping (perulangan) kita gunakan untuk mengulangi semua data label yang dipakai dalam sutu artikel. Sedangkan data labelnya berupa nama dan URL kita panggil menggunakan variabel. Index='' adalah atribut yang akan memberikan kita angka secara berurutan saat 1x perulanhan, maka kita kasih nilai num (number).
<div itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='1' itemprop='position'/>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
</span> » <b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span></a>
</span>
<b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>Kode diatas menghasilkan breadcrumb secara keseluruhan, dan kalau nggak ada maka nggak ada yang tampil karena itu kodenya masih polos. Belum kita kasih sentuhan dengan tag kondisi yang lain, tapi cuma satu kondisi kita gunakan sebagai penanda label terakhir agar bisa memberi tanda » terpisah dengan judul.
Cukup sederhana jika kamu kesulitan memahaminya saya sarankan belajar lagi mengenai kode HTML, Struktur data schema, dan pastinya tag condiction pada blogger. Tanpa mengenal itu semua sama saja seperti kamu melihat Huruf alpabet A-Z dalam bentuk kalimat tetapi kamu tidak bisa membacanya. Sekarang saya anggap kamu sudah memahaminya, saya tidak akan menjelaskan berulang kali mengenai kode-kode blogger ini. Karena kodenya ada banyak sekali daj fungsinya bisa berbeda-beda apalagi kita rangkai sedemikian rupa pasti fungsinya akan berbeda lagi. Untuk itu, kamu bisa melihat kode breadcrumb yang sudah saya rangkai dibawah ini.
Kita menyimpan struktur pembuatan breadcrumb yang kompleks dalam sebuah <b:includable id='breadcrumb' var='posts'>, untuk mengganti breadcrum lama kamu silakan temukan kode diatas. Lalu kamu tandahin sampai ketemu tag penutup </b:includable>. Hati-hati jangan sampai kelebihan ya. Karena tag seperti itu ada banyak pada template. Setelah itu hapus 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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>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' itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='1' itemprop='position'/>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
</span> » <b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span></a>
</span>
<b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</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' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><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' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>Kalau dilakukan dengan benar nggak akan terjadi error, dan kalau kamu benar-benar memperhatikan struktur kode diatas. Kamu akan mendapat pelajaran baru dimana kamu akan mulai memahami struktur dasar penyusuna kode serta tag kondisi yang kita gunakan.
Perlu kamu ketahui juga, susunan breadcrumb yang saya buat diatas menggunakan kelas "breadcrumb" jika pada template blogmu ada selectot elemen dengan nama yang sama kemungkinan tampilan breadcrumbnya menjadi berbeda dengan versi polos.