CARA TERKINI MEMASANG BREADCRUMB PADA VARIAN TEMPLATE TERBARU BLOGGER

breadcrumb edditblogtema

Jangan salah ya...Template blogger itu terdiri dari dua jenis:
  1. Template terbaru: Contempo, Soho, Emporio dan Notable (sudah mengusung desain layout versi ke 3) Jenis template bawaan Blogger yang sangat disarankan karena memiliki fitur responsif dan Mobile friendly.
  2. Template lama: Simple, PT. keren sekali, Jendela, Kelembutan, dinamis, Perjalanan, watermark. (Mengusung desain layout versi ke 2). Jenis template bawaan lama yang lebih di prioritaskan untuk tampilan layar PC dekstop dan laptop, kurang responsif dan mobile sehingga untuk membuatnya responsif harus dimodifikasi terlebih dahulu.
  3. Template Klasik (layout desain pertama)  - sudah tidak disarankan lagi untuk dipergunakan. Template ini jauh dari kata responsif dan mobile. Benar benar di rancang pada zaman sebelum kelahiran web mobile. Template dari tahun berapa ya..
Baca :

Jadi tinggal dua jenis template default (bawaan) Blogger yang benar benar masih dipergunakan hingga saat ini. Namun google pernah menyarankan agar para Blogger segera mengganti template lama mereka dengan template terbaru (desain layout versi ke 3) diatas termasuk template premium berbeli yang masih belum up to date ke zaman serba mobile.

APA HUBUNGAN JENIS TEMPLATE TERSEBUT DENGAN PEMASANGAN BREADCRUMB?

Cara penerapannya! Memasang breadcrumb pada template lama dengan template baru itu beda, jika kalian mengikuti tutorial di penelusuran Google saat ini tutorial itu berlaku untuk template lama jenis kedua. Tutorial itu dapat di terapkan ke template template tersebut termasuk template premium viomagz buatan mas Sugeng karena viomagz itu masih menganut desain dan layout versi ke 2.

Beberapa elemen di tulis berbeda baik sintaks hingga posisi peletakannya diantara kedua jenis template, namun jangan kuatir semua jenis template kedua mirip saja, dan template jenis layout versi ketiga juga hampir memiliki ciri ciri yang sama.

Namun tidak akan dapat diterapkan kepada empat varian utama template terbaru Jenis kesatu yang saya urutkan di atas. Mengakomodasi hal tersebutlah tutorial ini saya siapkan sebagai cara terbaru memasang breadcrumb pada template template terbaru Blogger.

Breadcrumb itu sangat penting untuk menjadikan halaman Blog menjadi SEO terstruktur dan memiliki sitelink. Namun memasang breadcrumb ke dalam template blogger lama dengan layout versi 2 dengan template blogger varian terbaru dengan layout versi 3 sangatlah jauh berbeda. Kalau kalian terapkan tutorial pemasangan breadcrumb yang ada sekarang ke dalam empat varian utama template blogger terbaru ya pasti error atau tidak akan tampil breadcrumbnya. Tidak percaya? Kami telah mengujinya dan mendapatkan peringatan sebagai berikut:
peringatan eror pemasangan breadcrumbs
Dan, jenis breadcrumb itu sendiri selama ini yang paling di pergunakan ada 2:
  1. Data.vocalubary
  2. Schema.org
Pemasangan breadcrumb jenis pertama menimbulkan masalah eror pada data terstruktur dan kotak penelusuran sitelink di Webmaster tool. Template viomagz buatan Mas Sugeng juga mengalami hal ini, jika kalian masih mempergunakan versi 3.0 ke bawah. Data.vocalubary sudah tidak dijadikan standard breadcrumb lagi oleh Google. Ia sudah di campakan.

Google telah mengumumkan perubahannya dan meminta para websider di muka bumi agar mengganti data.vocalubari dengan Schema.org. Secara sederhana kita dapat memasang script Jason-LD ke dalam template. Itu valid. Namun tanpa tampilan visual breadcrumb di atas Judul setiap postingan halaman blog.

Peringatan pada gambar di atas menjelaskan bahwasanya tidak setiap intruksi pemasangan widget dan elemen masa lalu yang masih beredar di internet sekarang dapat di terapkan begitu saja. Zaman terus berkembang dan apalagi template template default bawaan blogger terbaru telah hadir, demikian juga para desainer telah membuat template template berdasarkan layout versi ke 3, alih alih desain dengan layout versi ke 2 seperti template viomagz misalnya. Banyak instruksi pemasangan yang di tulis berpatok pada kasus breadcrumb error di template viomagz. 

Padahal template buatan Mas Sugeng tersebut masih dengan desain layout versi ke 2. Pada dasarnya mirip dengan template simple (sederhana) bawaan Blogger.

Berikut adalah cara terbaru pemasangan breadcrumb struktur data schema.org pada template blogger varian terbaru (layout versi ke 3), cara ini saya temukan di sela sela waktu membuat template template sederhana berdasarkan template default (bawaan) Blogspot.

MENGAPA ITU PENTING?

  1. Agar data halaman blog terstruktur dan baik di mata mesin pencari
  2. Meningkatkan kotak penelusuran sitelink
  3. Halaman tampak lebih rapi dan profesional.
  4. Mengurangi Bounce Rate alias efek pentalan
  5. Sebagai navigasi kedua bagi halaman blog
  6. Jelas sekali secara keseluruhan sangat baik untuk mengoptimalkan SEO

CARA MEMASANGNYA PADA TEMPLATE VARIAN TERBARU TEMPLATE BLOGSPOT

1. Langkah Pertama

  1. Masuk ke pengaturan dasbor blogger baru (saya menggunakan template contempo)
  2. Pilih tema
  3. Pilih Edit HMTL
Pada halaman editor HTML template Blogger cari kode:
<b:includable id='main'>↔️</b:includable>

letakanya di bawah kode: <b:defaultmarkup type='Blog'>

Di dalam halaman editor blogger akan tampak sebagai berikut:
editor HTML Blogger
Jika tanda ↔️ kalian klik maka kode merentang jadi panjang, artinya tanda panah itu berfungsi menyembunyikan untaian kode kode di dalam penutup <b:includable id='main'↔️ </b:includable>.

Dan Kalian dapat menghapus seluruh kode dengan hanya menyorot kode ketika ia masih dalam format <b:includable id='main'>↔️</b:includable> dan menghapusnya, maka seluruh kode akan terhapus kode panjangnya akan terlihat sebagai berikut:
<b:includable id='main'>
<b:include name='noContentPlaceholder'/>

<b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
<b:with value='3' var='maxNumAds'>
<b:with value='data:widgets.AdSense.size' var='numDesktopAds'>
<b:with value='data:widgets.AdSense count (w =&gt; w.sectionId != &quot;ads&quot;)' var='numMobileAds'>
<b:comment>Filter out the featured post, but only on the homepage.</b:comment>
<b:with value='data:widgets.FeaturedPost filter (w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post =&gt; post.id not in data:featuredPostIds) : data:posts' var='posts'>
<b:include name='super.main'/>
</b:with>
</b:with>
</b:with>
</b:with>
</b:with>
</b:includable>

Setelah menghapus semua kode tersebut dan ganti dengan kode breadcrumb valid standar schema.org berikut:

<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>

2. Langkah Kedua.

Begitu selesai langkah di atas, cari kode </head> dan letakan kode CSS berikut tepat di atasnya:

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:10;padding:10px 0;border-top:2px solid #00FF66;border-bottom:2px solid #00FF66;font-size:80%;color:#006600;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:#00FF66;font-weight:400}

.breadcrumbs a:hover{color:#006600}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#00FF66}
</style>

3. Langkah terakhir 

Di dalam halaman editor HML blogger cari kode berikut:
<b:include name='noContentPlaceholder'/> 

Jika kesulitan memintas pencariannya dengan tulisan kode penuh diatas, tuliskan saja sebagian seperti berikut:

<b:include name='noContent 

Setiap template blogger terbaru memiliki kode tersebut sedangkan pada template yang lebih lama sintaks dan deklarasinya akan tampak berbeda beda. 

dan letakan kode di bawah ini tepat di atasnya kode tadi:
<b:include data='posts' name='breadcrumb'/>
Save Template. Lihat demonya:
Jika kalian jeli dan memperhatikan tutorial kami diatas akan terlihat perbedaan signifikan penerapan pemasangan breadcrumb ini pada kedua jenis template. Sekarang pengatahuan kita bertambah terkait hal hal menyangkut prosedur halaman website Google.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:
Anissa Auliasari
Born in Riau Island. Love music, Social Media, watching youtube, reading, cooking cake. Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++ Just only an ordinary with simple glitch..

8 komentar

  1. Tks ya mbk :

    1. Breadcrumb saya tiap hari terus bertambah

    2. Kotak penelusuran link tiap hari terus bertambah

    3. Ada tambahan menu navigasi berwarna hijau di atas judul artikel..

    Good..

    BalasHapus
    Balasan
    1. Sama sama, kotak penelusuran sitelink itu penting buat SEO, ujung ujungnya menguntungkan buat bisnis :)

      Hapus
    2. Mbak mau tanya lagi, untuk menampilkan kotak running text (diatas menu navigasi yang berwarna hijau), saya harus baca artikel yang mana di halaman ini ?

      Hapus
    3. itu namanya kode marquee.
      1. Masuk ke pengaturan blogger
      2. Pilih tataletak
      3. Tambahkan gadget/widget
      4. Pilih widget TEXT dan buka.

      Pada blanko kosong widget text, ketik:

      <marquee> kata kata saya...inforrmasi saya...</marquee>

      Geser/drag (atau pidahkan) widget ke ata bagian postingan atau di bawah header.

      Selesai

      Hapus
    4. Tks ya mbak infonya..

      Hapus
  2. Mbak, mau Tanya :

    1. Apakah saya perlu mengaktifkan robot.txt pada blog saya agar halaman bisa di index Dan di crawl semuanya ?

    2. Apakah ada pengaruhnya dengan kita mengaktifkan robot.txt dengan breadcrumb Dan kotak penelusuran link ?

    3. apa aja isi perintah Dari robot.txt tersebut?

    Blog saya menggunakan tema contempo

    BalasHapus
  3. jawaban 1: sebenarnya tidak perlu karena sejak pertama kit daftar blog sudah aktif dengan sendirinya secara default, dan itu lebih aman dari kesalahan.

    jawaban 2: Berpegaruh jika setting salah dan malah meblokir pengindekan mesin pencari.
    jawaban 3: Jika ingin setting lebih baik pasang sebagai berikut,

    User-agent: *
    Allow: /
    Disallow: /search

    Sitemap: https://www.bloganda.com/sitemap.xml

    Dan ingat, template contempo sudah memiliki setting ini sejak awal secara default

    BalasHapus
    Balasan
    1. Oke..saya akan coba update isi perintah robot.txt tsb pada blog.

      Tks atas pencerahannya ya

      Hapus

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE