Cara Mudah Memasang Breadcrumb Pada Blogspot

Assalamualaikum Sobat,,

Pada kesempatan hari ini insya alloh saya akan membahas mengenai cara mudah memasang breadcrumb pada blogspot.

Namun, sebelum berlanjut pada pembahasan cara mudah memasang breadcrumb pada blogspot, terlebih dahulu saya akan sedikit membahas mengenai apa yang dimaksud dengan breadcrumb dan fungsi breadcrumb itu sendiri.

Sebenarnya sudah banyak artikel yang membahas mengenai breadcrumb, tapi pada kesempatan kali ini saya akan membahas lagi secara singkat mengenai breadcrumb dari apa yang sudah saya pelajari.

Breadcrumb bisa diartikan sebuah navigasi pada blog. dimana dengan adanya breadcrumb, pengunjung bisa mengetahui posisi artikel yang sedang dibacanya. bradcrumb juga berfungsi untuk mempermudah google atau mesin pencari lainnya untuk mengindex halaman atau artikel yang ada pada blog kita. sehingga dapat berpengaruh pada bertambahnya peluang ditemukannya artikel yang sudah kita buat oleh mesin pencari. Intinya dengan ada breadcrumb akan membuat blog kita lebih SEO friendly.

Oke,, langsung saja bagi sobat yang ingin tahu cara mudah memasang breadcrumb pada blogspot, sobat bisa ikuti langkah-langkah di bawah ini.

1. Login kedalam blog yang sobat miliki.

2. Kemudian klik "tema" lalu sobat klik "edit HTML", kurang lebih seperti pada gambar di bawah ini.

3. Setelah itu cari kode ]]></b:skin dengan cara menekan "Ctrl F", lalu setelah muncul kotak search pada sisi kanan atas, masukan "]]></b:skin" pada kolom tersebut tanpa penggunaan tanda petik, kemudian enter. kurang lebih seperti pada gambar di bawah ini.

4. Kemudian letakan kode di bawah ini, tepat diatas kode ]]></b:skin 

 

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

5. Selanjutnya cari kode ini " <b : includable id='main' var='top'>  dengan cara seperti pada tahap ketiga.

6. Setelah sobat temukan kode tersebut, sobat ganti kodenya dengan kode di bawah ini.

 <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

7. Selanjutnya sobat tinggal simpan saja perubahan pada tema sobat dengan cara kilik "simpan tema", kurang lebih seperti pada gambar di bawah ini.

8. Jika sudah disimpan, untuk mengetahui breadcrumb sudah terpasang atau belum, sobat bisa melakukan pengecekan dengan cara membuka salah satu artikel yang sudah sobat buat sebelumnya, jika navigasinya sudah muncul, berarti breadcrumbs sudah sukses terpasang pada blog sobat. untuk contoh dari navigasi atau breadcrumb yang sudah terpasang itu sendiri, sobat bisa lihat gambar di bawah ini. 

contoh breadcrumb yang sudah terpasang

Sekian dari saya mengenai cara mudah memasang breadcrumb pada blogspot.

Semoga bermanfaat.

Aamiin