Skip to main content

Setting Breadcrumb untuk Blogger

Apa itu Breadcrumb?

Breadcrumb adalah petunjuk arah. Saat anda berjalan-jalan di mall, tentu anda akan melihat petunjuk arah jika anda merasa kesasar. Dengan petunjuk arah tersebut anda mengetahui anda sedang berada dimana. Begitulah breadcrumb dalam sebuah situs atau blog. Dengan adanya breadcrumbs, visitor atau pembaca postingan blog akan merasa dia berada disebuah tempat dengan tema tertentu. Dengan mengetahui topik yang sedang dibahas kemungkinan besar visitor akan berada lama diblog atau website yang dikelola untuk mengetahui apa saja yang bisa diberikan blog atau website tersebut mengenai topik yang sedang ia cari. Dengan template standar dari blogger kita pun bisa membuat breadcrumb, tulisan ini akan menyampaikan kepada rekan-rekan semua cara setting breadcrumb untuk blogger.

Cara setting breadcrumb jika dilihat dari penjelasan yang didapat di Laman Google Developer. Dalam laman tersebut anda akan menemukan beberapa cara untuk setting breadcrumb tergantung bahasa / kode yang digunakan. Untuk pengguna akun blogger, kode/bahasa yang digunakan adalah kode microdata. Dari halaman penjelasan dari link google tadi stuktur breadcrumb yang akan saya gunakan dalam template blogger standar ini seperti berikut
<div itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
<a href='http://www.belajarbloggingdengan.blogspot.com' itemprop="url">
<span itemprop="title">Home</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="
http://www.belajarbloggingdengan.blogspot.com/search/label/dasar" itemprop="url">
<span itemprop="title">Label 1</span>
</a> ›
</div>
Home > Label 1

Label ini berfungsi untuk memberikan kategori kepada konten yang anda terbitkan. Misal anda membuat konten tentang pantai (apakah itu berupa video, gambar, atau teks atau gabungannya) maka anda akan memberi kategori pantai untuk konten tersebut. Berikut kode dari label/kategori yang terdapat di template blog tersebut
<span class='post-labels'><b:if cond='data:post.labels'> <data:postLabelsLabel/>           <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if> </b:loop> </b:if>       </span>
 Kode diatas terlihat pada tampilan blog kita sebagai berikut
label/kategori default blogger
Dari kondisi awal tersebut kita dapat mengubahnya dengan menambahkan Site Navigation Element ala http://schema.org/.

Cara Setting Breadcrumb di Blogger

Cara setting breadcrumb di blogger
  1. sign in pada akun blogger anda
  2. masuk ke menu template > edit html
  3. cari kode <span class='post-labels'>
  4. pada kode tersebut diatas kode itemscope itemtype='http://data-vocabulary.org/Breadcrumb' hingga tag span tersebut menjadi <span class='post-labels' itemscopeitemtype='http://data-vocabulary.org/Breadcrumb'> 
  5. UBAH <data:labelslabel> dengan <a expr:href='data:blog.homepageUrl' itemprop="url">     <span itemprop="title">Home</span>   </a> ›
  6.  Selanjutnya anda harus menambahkan kode &gt;&gt; <data:post.title/> setelah kode terakhir </b:loop> </b:if> </span>
  7. Klik tombol save.
Jika anda melakukannya dengan benar maka pada tampilan blog anda akan terlihat seperti dibawah
breadcrumb yang berhasil
Seperti yang saya sampaikan pada postingan mengenail mengenal kode html template blogger jika kita mengganti template blogger dengan desain yang kita inginkan, begitu pula dengan setting breadcrumb untuk blogger. Hanya saja teknik ini masih perlu banyak diuji di data struktur yang agar tampilan blog semakin lebih profesional dan lebih menarik.

Comments

Artikel Viral

Kuliah Itu Berapa Tahun Sih? Ini Jawabannya

Saya sering mendapat pertanyaan dari pengunjung blog

"kak, kuliah itu berapa tahun?" atau

"om, Kuliah S1 sampai berapa semester?" atau

"bang, semester kuliah ada berapa?"

Saya sangat senang mendapatkan pertanyaan-pertanyaan diatas.

Artinya kamu yang saat ini baru mulai kuliah, sudah mempersiapkan masa depan kamu dengan tidak ingin berlama-lama di kampus.

Untuk menjawab pertanyaan-pertanyaan dari pembaca pencaricerah.com diatas saya sedikit mengalami kesulitan.

Apa itu?

Soalnya saran yang saya berikan di tulisan kuliah itu berapa tahun? berbeda sedikit dengan pengalaman.

Jangan lewatin 7 Cara Berpakaian Untuk Mahasiswa Baru

Namun saya berharap kamu bisa belajar dari pengalaman saya yang tidak sesempurna tulisan ini.

Mungkin yang bertanya sedang menghitung berapa biaya yang harus dikeluarkan saat kuliah atau mungkin juga sedang merencanakan apa yang bisa ia lakukan disela-sela perkuliahan.

Berdasarkan pertanyaan yang beberapa kali muncul di kolom komentar beberapa post…

TEMPAT MAGANG SASTRA INGGRIS PALING IDEAL, NO 1 PALING FAVORIT

Tempat magang sastra inggris? Emang ada? Itu pertanyaan saya yang muncul ketika membaca tulisan dari blogger Ran-Chan no Hibi. Sebagai alumni sastra inggris saya sama sekali baru tahu kalau ternyata ada tempat magang bagi mahasiswa sastra inggris. Seandainya informasi ini saya dapatkan ketika kuliah tentu jalan hidup saya berbeda.
Karena itu saya ingin membagikan informasi yang cukup penting bagi kamu, mahasiswa sastra inggris, yaitu tempat magang sastra inggris.
Magang itu apa sih? Magang adalah sebuah kesempatan untuk mengintegrasikan pengalaman yang berhubungan dengan karir ke dalam pendidikan sarjana dengan berpartisipasi dalam pekerjaan yang terencana dan diawasi. (https://ekoyanto.files.wordpress.com/2011/11/apakah-magang-itu1.pps)
Dari pengertian diatas maka anda akan melihat ada perbedaan antara magang dan kerja sambilan. Walaupun sama-sama diawasi dan pekerjaan yang dilakukan terencana, perbedaan magang dan kerja sambilan terdapat dalam hubungannya dengan pendidikan sarjana.

Mengatasi Sitemap Error Pada Google Search Console

Mengatasi sitemap error pada google search console - Sitemap artinya secara harafiah adalah peta situs. Kegunaannya seperti peta yang kita kenal selama ini yaitu memberikan gambaran kepada PENGUNJUNG tentang area (baca:konten) yang sedang disinggahinya saat ini di situs/blog yang dikunjungi.

Situs yang mempunyai sitemap yang bagus dan terperinci akan menjadi primadona bagi mesin pencari seperti google. Tapi kenapa saat submit url di google webmaster malah muncul error peta situs anda terlihat seperti laman html. pakai format peta situs resmi? 

Bagaimana cara mengatasi sitemap error tersebut di Google Search Console?

Mari kita pelajari sama-sama.