Penulis: Moch Adnan dipublikasikan: 18 September 2023
Cara Memasang Menu Breadcrumb di Blogger
Melanjutkan artikel sebelumnya di Moch Adnan Blog tentang cara membuat blog di Blogspot serta Cara membuat Navigasi halaman web yang baik. Maka kali ini saya akan coba tutorial blogging cara memasang navigasi Breadcrumb di Blogger.
Untuk mengoptimalkan page ranking halaman web/blog di mesin pencari, para pakar IT serta para Insinyur web/blog memikirkan untuk membuat suatu script yang dapat mengoptimalkan halaman web/blog di mesin pencari yang mereka sebut dengan Breadcrumb atau dapat juga disebutkan dengan Navigasi. 

Demo

Pengujian hasil kaya menunjukkan bahwa data terstruktur menghasilkan test Valid untuk menu breadcrumb yang telah terpasang. Contoh breadcrumb seperti gambar di bawah ini :

Breadcrumbs0
Foto : https://rocketblogdemo.blogspot.com/

Cara Memasang Menu Breadcrumb di Blogger
Foto : Developers Google.com


Baca juga : Cara membuat Navigasi halaman web yang baik

Menambahkan Menu Breadcrumb 

Untuk menambahkan menu breadcrumb ke dalam halaman artikel, caranya adalah seperti biasa.
Login ke dalam dasbord blogger pilih Tema kemudian pilih Edit HTML

Cari kode ]]></b:skin>, kemudian tambahkan kode CSS di bawah ini diatas kode ]]></b:skin>.

<!-- CSS Breadcrumb -->
.breadcrumbs{color:#999;font-size:13px;font-style:italic;line-height:1em;margin:60px 0 -50px;padding:0 80px;}
.post .breadcrumbX{display: flex;align-items: center;margin-bottom: 5px;line-height: 1.8em;font-size: 90%;}

<!-- End CSS Breadcrumb -->

 
Kemudian cari kode <div class='post hentry'>, dalam template blog sobat, 
atau kode seperti berikut:
<h1 class='post-title'><a expr:href='data:post.url'>
atau :
<div class='post-body'>
atau :
<h3 class='post-title entry-title'>

kemudian di atas salah satu kode itu ketikan pastekan kode berikut ini:

<!-- Breadcrumb -->
<div class='breadcrumbX'>
	<div class='homeLink'>
       <div class='breadcrumb' 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.canonical' itemprop='item' title='Home'>
          <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;&#8250;&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>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
      </b:if>
    </div>
 <hr/>
 </div>
</div>     

<!-- End Breadcrumb -->

Untuk menguji apakah menu breadcrumb ini sudah valid atau belum, gunakan tautan berikut : https://search.google.com/structured-data/testing-tool

Demikianlah postingan sementara dari saya, tentang Cara Memasang Menu Breadcrumb di Blogger 

semoga bermanfaat