Cara Memperbaiki Error Breadcrumb Pada Template Blogspot

Pengertian Breadcrumb dan Cara Memperbaiki Error Breadcrumb Pada Template Blogspot

BagaimanaCara Memperbaiki Error Breadcrumb Pada Template Blogspot. Sebelumnya mari kita ketahui pengertian Breadcrumb itu. Sebagaimana diketahui, template blogspot sekarang memiliki sejumlah bahasa yang tersedia untuk mendesain situs web, seperti HTML5 dan alat pengembangan web, seperti JavaScript dan CSS, juga digunakan. Library, seperti React, dan toolkit open source, seperti Bootstrap, memungkinkan pengembang untuk memulai dengan cepat saat membuat prototipe ide mereka untuk sebuah situs web. WordPress juga memberi pengguna antarmuka yang mudah digunakan dan ratusan templat gratis untuk digunakan sebagai dasar saat membuat situs web mereka sendiri. Selain itu, tersedia pengoptimalan bawaan dan responsif, tema siap seluler. Halaman web yang disesuaikan tersedia untuk browser ponsel cerdas yang menyediakan daftar gulir artikel, game, lagu, dan sebagainya, bukan halaman yang memiliki hyperlink.

 

Elemen antarmuka lain yang telah menjadi bagian integral dari situs web apa pun adalah navigasi runut tautan. Breadcrumb adalah label kategori yang muncul pada halaman web yang memungkinkan pengguna untuk membaca halaman lain tanpa kehilangan jejak dari mana asalnya. Istilah ini berasal dari teknik mencari jalan yang digunakan Hansel dalam dongeng Brothers Grimm, Hansel and Gretel. Metafora memunculkan gagasan meninggalkan jalan untuk mengikuti kembali.

 

Breadcrumb juga digunakan oleh alat pengoptimalan mesin telusur yang mencocokkan istilah penelusuran pengguna dengan halaman web yang relevan menggunakan breadcrumb. Breadcrumbs juga memuji kegunaan dalam berbagai cara, termasuk membantu pengguna mengetahui di mana mereka relatif terhadap situs web lainnya, memungkinkan akses satu klik ke tingkat situs yang lebih tinggi, menarik pengunjung pertama kali untuk terus menjelajahi situs web setelah melihat halaman arahan. Oleh karena itu, menggunakannya adalah praktik yang baik untuk aplikasi web lain selain situs web

 

Apakah blog Anda pernah mendapat peringatan bahwa  Breadcrumb yang digunakan mengalami error atau kesalahan. Bagaimana Cara Memperbaiki Error Breadcrumb Pada Template Blogspot ? Berikut ini langkah sederhana Cara Memperbaiki Breadcrumb blogspot yang Error untuk beberapa jenis template blogspot.

 

Pertama, silahkan Anda login Dashboard Blogger > Tema > Edit HTML. Kedua  Cari kode berikut ini dengan cara menekan CTRL+F lalu ketik <b:includable id='comment-form' var='post'>. Ketiga paste tepat di atasnya

 

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>

<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>

<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>

<span itemprop='name'>Home</span></a>

<meta content='1' itemprop='position'/>

</span>

<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>

<b:loop index='num' values='data:post.labels' var='label'>

<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>

<span itemprop='name'><data:label.name/></span>

</a>

<meta expr:content='data:num+2' itemprop='position'/>

</span>

<b:if cond='data:label.isLast != &quot;true&quot;'>

<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>

</b:if>

</b:loop>

<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>

<span><data:post.title/></span>

</div>

</b:if>

</b:loop>

</b:if>

</b:includable>

 

Namun jika sebelumnya di template blog sudah memasang kode Breadcrumb, silahkan ganti dengan kode baru seperti diatas. . Selanjutnya tambahkan CSS Style berikut ini tepat di atas kode </head>

 

<style type='text/css'>

/* Breadcrumb */

.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}

.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}

.breadcrumbs a:hover{color:#11589D}

.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}

.breadcrumbs svg path{fill:#666}

</style>

 

Bagi yang sebelumnya belum menggunakan Breadcrumb, cari atau temukan kode <b:includable id='main' var='top'>. Selanjutnya letakkan kode berikut tepat ini dibawahnya

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

 

Terakhir silahan klik Simpan Template. Demikian uraian singkat Pengertian Breadcrumb dan Cara Memperbaiki Error Breadcrumb Pada Template Blogspot. Semoga article singkat ini bisa membantu menyelesaikan masalah yang dihadapi.

= Baca Juga =