Cara Memasang Breadcrumb Pada Blogger Terbaru Versi 3

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

Lebih baik memakai 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 dapat jawab pertanyaan ini di kolom komentar.

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 memakai parameter dan instruksi pemanggil parameternya. Sehingga output breadcrumb dapat diletakkan dan ditampilkan dimana saja. Alias dapat diletakkan di dalam dan d luar post page.

Langkah 1: cari instruksi ini

<b:defaultmarkup type='Common'>

Langkah 2: letakkan instruksi parameter berikut di bawah instruksi 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 instruksi berikut:

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

jikalau hanya ingin menampilkan pada tampilan postingan penuh (post page dan static page), maka gunakanlah tag conditional <b:if cond='data:view.isSingleItem'>, sehingga karenanya akan menyerupai ini:

<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>

Catatan:

• Untuk langkah 3, kodenya dapat 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 gres Blogger sudah selesai. Tinggal atur stylenya dengan CSS menyerupai berikut ini di atas instruksi </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 instruksi menyerupai pada langkah 1, maka tinggal menambahkan instruksi berikut di atas instruksi </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, dapat meletakkan apa saja di luar dan di dalam postingan. Bahkan dapat menampilkan tanggal posting, widget share, widget comments count pada widget Popular Post dan Featured Post (default).

Anda juga dapat menerapkan Breadcrumb dengan Microdata Schema.org untuk tutorial ini. Bahkan lebih dianjurkan!

Advertisement