Cara Menambahkan Navigasi Breadcrumbs Seperti Detik dan Tribun

Baca Juga

breadcrumbs blog

Breadcrumb 

PeluangSukses.Com - Remah roti adalah navigasi yang digunakan dalam antarmuka pengguna, biasanya muncul secara horizontal di bagian atas halaman web, setelah navigasi, biasanya di bawah bilah judul atau header di area blog. Anda juga dapat menemukan contoh remah roti di blog saya setelah navigasi. Lihat tangkapan layar untuk mengetahui apa sebenarnya remah roti.

Blogger yang menggunakan Platform Blogspot untuk menambahkan remah roti. Ini membantu orang untuk dengan mudah mengetahui tentang posting Anda dan juga membantu Anda dalam tujuan SEO.

Remah roti khas terlihat seperti ini: dijamin aman karena menggunakan schema.org yang sangat dianjurkan dalam perayapan mesin index google.

Struktur HTML bisa saja berlainan dari tiap blog sesuai keinginan customisasi atau pembuat template. jadi tinggal perhatikan dengan baik sesuaikan dengan kode unik si pembuat template blog itu sendiri silahkan dipahami dengan teliti struktur bangunan HTML blog kita.

Backup Template Anda Sebelum menambahkan Breadcrumbs di Blogger

Setelah mencadangkan template blogger Ikuti langkah-langkah sederhana di bawah ini tentang Cara Menambahkan Navigasi Breadcrumbs yang Bergaya Di Blogger

Langkah-langkah Menambahkan Breadcrumb di Blogger

Masuk ke Dasbor Blogger > Desain > Edit Html

Temukan kode di bawah ini

Pertama cari kode berikut

<b:includable id='comment-form' var='post'>

Kemudian tempelkan kode berikut

<b:includable id='breadcrumb' var='posts'>
                        <b:if cond='data:view.isPost'> 
                          <b:loop values='data:posts' var='post'> 
                            <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
                              <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> 
                                <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'> 
                                  <meta content='1' itemprop='position'/> <span itemprop='name'>Home</span></a> </span> 
                              <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#187;&amp;nbsp; 
                                <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> 
                                  <meta expr:content='data:num+2' itemprop='position'/> 
                                  <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'> 
                                    <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> &amp;nbsp;&#187;&amp;nbsp; 
                                <span><data:post.title/></span> 
                                <b:else/> 
                                &amp;nbsp;&#187;&amp;nbsp; Tidak Ada Kategori 
                              </b:if> 
                            </div>
                          </b:loop>
                        </b:if> 
                      </b:includable>

Langkah Selanjutnya cari kode berikut 

<h3 class='post-title entry-title'>

dan tempel kode berikut diatas kode diatas

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

Terakhir klik save atau simpan

Anda mungkin perlu menyesuaikan gaya remah roti Anda menggunakan beberapa CSS eksternal. Untuk melakukan itu, Anda dapat menggunakan "remah roti" ID CSS yang disertakan dalam kode php. Buka file style.css dari Tema Anak Anda (atau Anda dapat menambahkannya di Penyesuai Tema di bawah CSS Tambahan) dan tambahkan yang berikut ini:

Penjelasan

Istilah Breadcrumb "remah roti" mengacu pada alat navigasi situs web yang efisien dan dimaksudkan untuk membantu melacak langkah seseorang kembali ke "rumah" situs web (atau beranda). Mereka memungkinkan pengguna untuk melihat bagaimana halaman saat ini cocok dengan seluruh struktur situs dengan menyediakan trek inline dari tautan (atau label) yang mengarah kembali ke beranda.

Breadcrumb sebenarnya lebih penting untuk Situs besar Anda daripada yang Anda kira. Mereka tidak hanya meningkatkan pengalaman pengguna, tetapi juga dapat meningkatkan peringkat situs Anda dalam pencarian . Google menyukai elemen struktural ini di situs web, dan pengunjung akan memiliki bantuan navigasi penting ketika menemukan salah satu halaman Anda secara organik (menurunkan rasio pentalan Anda).

Anda akan berpikir bahwa menambahkan sistem nativation terintegrasi seperti itu ke situs web Anda akan sulit, tetapi sebenarnya cukup sederhana dengan menggunakan kode html sederhana diatas. Faktanya, jika Anda menggunakan wordpress itu akan sedikit lebih mudah karena hanya menambahkan plugin, Anda memiliki langkah awal karena fungsionalitas remah roti yang sudah ada merupakan salah satu metode yang disukai di luar sana.

Catatan: Struktur HTML setiap blog bisa berbeda-beda tergantung keinginan pembuat template. Jadi Anda tinggal menyesuaikan sendiri, menggunakan kode Anda sendiri dari Template Maker. Lihatlah lebih dekat pada struktur konstruksi HTML blog Anda.