√ Cara Memasang Breadcrumb Pada Blogger Terbaru

Memasang Breadcrumb Pada Blogger » Secara mengejutkan blogger telah menghilangkan Breadcrumb pada update versi 3 ini, Lalu pertanyaa muncul dibenak saya, apakah benar kini breadcrumb sudah tidak mempunyai kegunaan lagi, sampai-sampai google menghapus fitur tersebut? bagi yang tahu apa alasan google menghapus breadcrumb, silahkan berkomentar dibawah.

Buat yang masa kurang terpelajar dengan hal ini dan hanya ingin memasang breadcrumb lagi di blog kamu, silahkan ikuti panduan Memasang Breadcrumb Pada Blogger Terbaru Versi 3.

Pada metode ini kita akan memakai parameter dan isyarat pemanggil parameter tersebut, sehingga output breadcrumb dapat kita letakan / kita tampilkan dimana saja.

Panduan Memasang Breadcrumb Pada Blogger Terbaru

Masuk kedalam dasboard blogger kamu, kemudian pilih sajian Template/Tema » edit HTML. Gunakan kombinasi tombol CTRL+F untuk mempermudah menemukan kode-kode yang nantinya ingin kita cari.

#Langkah 1: Silahkan kau cari kode <b:defaultmarkup type='Common'>

#Langkah 2: Kemudian letakan isyarat para meter berikut dibawah isyarat 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&nbsp;</span></a></span>&nbsp;›
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'> › </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>

#Langkah 3: Supaya parameter diatas dapat aktif, kau harus memanggilnya dengan memakai isyarat ini.

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

Kode diatas dapat kau letakan dimana saja. entah dibawah <div class='post-title-container'> atau dibawah <article class='post-outer-container'>

Jika kau hanya ingin menampilkan pada sajian postingan penuh (Post Page dan Static Page) maka silahkan gunakan tag conditional <b:if cond='data:view.isSingleItem'> sehingga kesudahannya akan menyerupai ini.

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

Sebenarnya hingga tahap ini saja kau sudah final memasang breadcrumb pada blogger kamu, tinggal atur stylenya dengan memakai CSS berikut diatas 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 >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;}

Catatan: Jika pada template blogger yang kau gunakan belum ada isyarat menyerupai pada langkah pertama tadi. Maka silahkan kau tambahkan isyarat berikut ini diatas kode </head> atau </head>

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

Selesai. Itulah panduan Memasang Breadcrumb Pada Blogger Terbaru Versi 3 ini, Selain memakai panduan ini bahwasanya kau dapat juga menerapkan Breadcrumb Dengan Microdata Schema.org, untuk tutorialnya akan aku bahas dilain hari, Makara biar tidak ketinggalan update-update tutorial dan informasi menarik seputar blogger, silahkan berlangganan artikel secara gratis melalui email.

Sumber aciknadzirah.blogspot.com