Sama sekali tidak ribet begini cara memasang breadcrumb valid HTML ke template terbaru blogger

Essential adalah varian tunggal dari salah satu template terbaru blogger  yang strukturnya identik atau mirip dengan contempo, akan tetapi jika di teliti terdapat beberapa perbedaan pada sedikit pengaturan, pendeklarasian dan markupnya. Kita akan membahasnya pada kesempatan berbeda pada kesempatan memposting artikel yang berbeda.

Kali ini kita hanya membahas cara memasang breadcrumb ke dalam templatenya. Dan jika ia berhasil pada template essentials, maka ia juga berlaku untuk template contempo. Percayalah, kami telah mengujinya. 

template essential

Kita tahu template template default ini di buat berbasis layout versi ke 3 yang sangat baik strukturnya dan di buat seolah untuk di modifikasi oleh penggunanya. 

Aku menyukai tampilan halaman untuk memuat konten yang 'full' tanpa sidebar - karena sidebarnya tersembunyi - seperti umumnya template template website modern masa kini.

Aku tergoda untuk memasang breadcrumb ke template berbasis layout ke 3 karena membaca artikel dari Bung Frenky, aku mencobakan matode tersebut akan tetapi gagal karena beberapa tag seperti yang disebutkan pada konten Bung Frenky tidak aku temukan di dalam template essential, (mungkin pendeklarasiannya di setiap template yang ada memang beda).

Dan lagipula cara yang disampaikan Bung Frenky itu jelas tidak valid lagi karena masih menggunakan standar data.vocalubary yang telah ditinggalkan oleh Google, sekarang sudah zamannya standar schema.org.

Silahkan kunjungi blog beliau: https://www.bungfrangki.com/2018/04/memasang-breadcrumb-pada-blogger-terbaru.html

Bagaimana cara memasang breadcrumb yang benar pada template blogspot Essential, Contempo dan Soho?

Ke 3 varian Template blogger plus Essential ini di desain dengan layout versi ke 3. Tentu saja strukturnya beda dengan template layout versi ke 2. Lalu bagaimana cara memasang breadcrumb HTML ke dalam template template ini? Mudah saja.

Caranya melalui halaman editor HTML blogger. Dengan asumsi Anda telah memahami cara mengedit halaman HTML:
  • Masuk ke pengaturan (dasbor) blogger blogspot
  • Pilih Tema
  • Lalu pilih Edit HTML

1. Di dalam halaman editor HTML blogger template essential cari kode </head> dan letakan kode berikut di atasnya:
<style>.Blog .breadcrumbs{font-size:13px;color:$(posts.icons.color);margin-bottom:10px;margin-top:-60px;} .Blog .breadcrumbs a{color:$(posts.icons.color)} .Blog .breadcrumbs a:hover{color:red;} .Blog .info,.Blog .breadcrumbs{font-size:13px} .Blog .breadcrumbs{font-size:10px;margin-bottom:10px} .breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;font-size:80%;color:#777;font-weight:500;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:#555;font-weight:500} .breadcrumbs a:hover{color:red} .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#777} </style>
2. Masih di dalam halaman editor HTML blogger template essential cari kode:
<data:post.body/> Lalu letakan kode berikut tepat di atasnya:
<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' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>

<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>
Save template. Dan Selesai!

Akan tetapi pemasangan di atas kode tag <data:post.body/> bisa menghasilkan hasil salah prespektif jika misalnya Anda menghilangkan tampilan tanggal dan share bawaan template di bagian bawah judul postingan. Untuk menghindarkan hal itu Anda bisa mengambil opsi dengan memasang kode breadcrumb di atas di bagian bawah kode:
<b:include name='noContentPlaceholder'/>
Atau bisa juga di bagian bawah kode:

<b:includable id='post' var='post'> 

Pokoknya ia bekerja jika di letakan pada bagian bagian kode kode berikut:
  1. Di bawah kode <b:include name='noContentPlaceholder'/>
  2. Di bawah kode <b:includable id='post' var='post'> 
  3. Di atas kode <data:post.body/>
Hasil pengujian:

breadcrumb valid HTML

Uniknya cara ini tidak memerlukan kode pemanggil dengan cara menyisipkan kode berikut ke dalam template: 

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

Tidak perlu. Dan ternyata mudah sekali memasang breadcrumb pada salah satu template dengan desain layout versi ke 3. 

Oh ya, untuk breadcrumb Aku sering mengunjungi situs milik para developer Google berikut, Anda juga bisa mendapatkan model model breadcrumb dari:
Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Often, as illustrated in following use cases, users can arrive at a page from very different  ...
Sameton nympangin laman puniki ring 2/23/21.
Anda tinggal memodifikasinya sesuai dengan kebutuhan blogging. Dan Lihat hasilnya:

Kesimpulan cara ini bekerja dengan baik pada template template terbaru:
  1. Essentials
  2. Soho
  3. Contempo
Dan hanya bekerja setelah templatenya dimodifikasi pada template template:
  1. Emporio
  2. Notable
Yakni jika variabel framework.skin-nya telah di modifikasi.

Catatan!!! 

Kode CSS ini berlaku untuk template essentials dan Contempo karena mereka ini identik. Jika ingin menerapkannya pada template SOHO, ganti setiap deklarasi kode $(posts.icons.color) dengan kode warna biasa karena sintaksis pengaturannya beda. Misal ganti saja dengan tulisan 'red' dan 'blue' contohnya:
.Blog .breadcrumbs{font-size:11px;color:blue;margin-bottom:15px;margin-top:0px;}
.Blog .breadcrumbs a{color:red}
.Blog .breadcrumbs a:hover{color:$(body.text.color)}
.Blog .info,.Blog .breadcrumbs{font-size:11px}
.Blog .breadcrumbs{font-size:10px;margin-bottom:10px}
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;font-size:80%;color:#FFCCFF;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:#FFCCFF;font-weight:400}
.breadcrumbs a:hover{color:#FFCCFF}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#FFCCFF}

Ikuti trik dan seni blogging kami, kami membagikan segalanya dengan ikhlas!

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...


  1. Kalau pakai model tersembunyi bagus gak del, aku pakai yg tersembunyi ambil dari kode yg dishare di blog ini juga, dari hasil tes di search konsol atau hasil kaya kayaknya diterima alias diperbolehkan.

    BalasHapus
    Balasan
    1. Justeru kode terswmbunyi itu yang dianjurkan oleh Google sebuah skema yang benar dan kode itu asli dari pengembang saat pertama skema vocalubary di tendang dari standar

      Hapus
  2. Wuih jadi cakep tampilannya setelah tadi kuintip contoh demo-nya ....
    Jadi pengin gunain cara ini juga.

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak