Cara Memasang Breadcrumb pada Blogger Terbaru Versi 3

Salah satu fitur yang hilang dari update HTML Blogger ialah breadcrumb. Lalu bagaimana cara memasang kembali fitur breadcrumbs tersebut?

Lebih baik menggunakan breadcrumb atau tidak perlu lagi? Sejauh ini, itu pertanyaan yang masih menghantui saya. Mengapa Blogger Developers kok tega menghilangkannya? Apa memang breadcrumb udah gak guna lagi? Yang pakar SEO mudah-mudahan bisa jawab pertanyaan ini di kolom komentar.
Cara Memasang Breadcrumb pada Blogger Terbaru

Nah, bagi yang terpaksa mengabaikan pertanyaan-pertanyaan tersebut, penuh keyakinan untuk nekat pasang breadcrumb di sintaks Blogger versi terbaru, berikut caranya!

Tips:
Dalam hal ini, kita tetap menggunakan parameter dan kode pemanggil parameternya. Sehingga output breadcrumb bisa diletakkan dan ditampilkan dimana saja. Alias bisa diletakkan di dalam dan d luar post page.

Langkah 1: cari kode ini
<b:defaultmarkup type='Common'>

Langkah 2: letakkan kode parameter berikut di bawah kode tadi:
        <b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>

Langkah 3: untuk mengaktifkan parameternya, silahkan panggil dengan kode berikut:
<b:include data='post' name='breadcrumb'/>

kalau hanya ingin menampilkan pada tampilan postingan penuh (post page dan static page), maka gunakanlah tag conditional <b:if cond='data:view.isSingleItem'>, sehingga jadinya akan seperti ini:
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>

Catatan:
  • Untuk langkah 3, kodenya bisa diletakkan dimana saja. Entah itu di bawah <div class='post-title-container'> atau di bawah <article class='post-outer-container'> atau pada markup lainnya.

Sampai disitu pemasangan breadcrumb pada html baru Blogger sudah selesai. Tinggal atur stylenya dengan CSS seperti berikut ini di atas kode </style>:
.breadcrumbs {font-size:90%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}

Kalau pada template Blogger belum ada kode seperti pada langkah 1, maka tinggal menambahkan kode berikut di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
    <b:defaultmarkups>
      <b:defaultmarkup type='Common'>
// parameter breadcrumbs letakkan disini (langkah 2), pokoknya disini isinya sintaks parameter yang akan dimunculkan pada halaman post dan di luar post.
      </b:defaultmarkup>
    </b:defaultmarkups>

Serunya di update HTML Blogger versi 3 itu begitu, bisa meletakkan apa saja di luar dan di dalam postingan. Bahkan bisa menampilkan tanggal posting, widget share, widget comments count pada widget Popular Post dan Featured Post (default).

Anda juga bisa menerapkan Breadcrumb dengan Microdata Schema.org untuk tutorial ini. Bahkan lebih dianjurkan!
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.