Cara Membuat Tampilan Breadcrumb Responsive ala Arlina Design - Aceh Media

    Social Items

Aceh Media - Beberapa hari yang lalu muncul pemberitahuan pada Search Console web Aceh Media bahwa ada masalah breadcrumb baru terdeteksi. Bukan hanya web Aceh Media yang menerima pemberitahuan tersebut melainkan beberapa teman blogger lain juga mendapatkan pemberitahuan yang sama.

Peringatan tersebut berupa breadcrumb data-vocabulary.org schema deprecated dengan isi pesan seperti pada gambar berikut ini:
Pesan masalah breadcrumb

Breadcrumb versi terbaru sudah menggunakan struktur data schema.org, yang sangat direkomendasikan oleh Webmaster dan Bing master. Jika blog anda masih menggunakan data-vocabulary.org maka segeralah untuk beralih ke schema.org sesuai pengumuman Google:

"As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features."
~ Translate ~
"Pada tanggal 6 April 2020, markup data-vocabulary.org tidak lagi memenuhi syarat untuk fitur hasil yang kaya Google."

Telah banyak beredar artikel tentang tutorial cara mengatasi error breadcrumb pada Search Console, salah satunya artikel yang dibuat oleh Arlina Design, anda bisa membaca tutorialnya dengan cara klik disini. Saya sendiri juga telah menerapkan tutorial tersebut karena berhubung template blog yang saya gunakan adalah buatan Arlina Design.

Namun masalah yang terjadi ketika saya mereplace Javascript dan CSS pada template ini adalah tampilan breadcrumb pada versi mobile tidak lagi responsive seperti yang ditampilkan pada gambar di bawah ini:
Terlihat breadcrumb judul postingannya tidak responsive
Cara memperbaikinya ternyata cukup mudah, anda hanya perlu menggantikan CSS pada tutorial tersebut dengan CSS berikut:

letaknya sebelum kode </head>
/* Breadcrumbs */
.breadcrumbs{padding:0;margin-bottom:20px;border:0;display:inline-block;font-size:12px;color:#888}.breadcrumbs a,.post-info a{color:#888}.breadcrumbs a:hover{color:#f24a4a}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#888}.homebread{margin:0 2px 0 0}
Jangan lupa preview blog anda!

Artikel ini sekaligus menjawab pertanyaan dari saudara Sayful Materindo yang mengalami permasalahan yang sama.
Komentar saudara Sayful Materindo pada blog Arlina Design

Cara Membuat Tampilan Breadcrumb Responsive ala Arlina Design

Aceh Media - Beberapa hari yang lalu muncul pemberitahuan pada Search Console web Aceh Media bahwa ada masalah breadcrumb baru terdeteksi. Bukan hanya web Aceh Media yang menerima pemberitahuan tersebut melainkan beberapa teman blogger lain juga mendapatkan pemberitahuan yang sama.

Peringatan tersebut berupa breadcrumb data-vocabulary.org schema deprecated dengan isi pesan seperti pada gambar berikut ini:
Pesan masalah breadcrumb

Breadcrumb versi terbaru sudah menggunakan struktur data schema.org, yang sangat direkomendasikan oleh Webmaster dan Bing master. Jika blog anda masih menggunakan data-vocabulary.org maka segeralah untuk beralih ke schema.org sesuai pengumuman Google:

"As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features."
~ Translate ~
"Pada tanggal 6 April 2020, markup data-vocabulary.org tidak lagi memenuhi syarat untuk fitur hasil yang kaya Google."

Telah banyak beredar artikel tentang tutorial cara mengatasi error breadcrumb pada Search Console, salah satunya artikel yang dibuat oleh Arlina Design, anda bisa membaca tutorialnya dengan cara klik disini. Saya sendiri juga telah menerapkan tutorial tersebut karena berhubung template blog yang saya gunakan adalah buatan Arlina Design.

Namun masalah yang terjadi ketika saya mereplace Javascript dan CSS pada template ini adalah tampilan breadcrumb pada versi mobile tidak lagi responsive seperti yang ditampilkan pada gambar di bawah ini:
Terlihat breadcrumb judul postingannya tidak responsive
Cara memperbaikinya ternyata cukup mudah, anda hanya perlu menggantikan CSS pada tutorial tersebut dengan CSS berikut:

letaknya sebelum kode </head>
/* Breadcrumbs */
.breadcrumbs{padding:0;margin-bottom:20px;border:0;display:inline-block;font-size:12px;color:#888}.breadcrumbs a,.post-info a{color:#888}.breadcrumbs a:hover{color:#f24a4a}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#888}.homebread{margin:0 2px 0 0}
Jangan lupa preview blog anda!

Artikel ini sekaligus menjawab pertanyaan dari saudara Sayful Materindo yang mengalami permasalahan yang sama.
Komentar saudara Sayful Materindo pada blog Arlina Design

Show comments
Hide comments

No comments