Skip to main content

Cara Membuat Breadcrumbs

Cara Membuat Breadcrumbs Breadcrumbs berfungsi sebagai petunjuk lokasi label sebuah artikel kepada pembaca halaman website atau blog. Pada bagian breadcrumbs kita bisa melihat kata kunci / label yang mengarahkan ke sebuah artikel yang sedang kita baca, informasi lokasi label seperti ini secara tidak langsung dapat membantu pembaca untuk mengetahui kata kunci dari sebuah artikel tersebut. Tentunya apabila sebuah halaman web atau blog memiliki tampilan informatif maka para pembaca juga akan memberikan respon positif bagi website kita. Langsung saja pembahasan mengenai "Cara Membuat Breadcrumbs" ada dibawah ini, JANGAN LUPA DAN INGAT SELALU UNTUK BACKUP TEMPLATE ANDA SEBELUM MEMBUAT PERUBAHAN PADA TEMPLATE.

Berikut langkah - langkah memasang breadcrumbs :
  1. Login pada halaman blogger 
  2. Pilih bagian Template
  3. Pilih Edit HTML
  4. Copy code dibagian bawah ini
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah 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'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives 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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah selesai copy paste code diatas, pilih save template dan coba refresh halaman website untuk melihat breadcrumbs pada halaman artikel. Sekian artikel tentang "Cara Membuat Breadcrumbs", semoga artikel ini dapat menambah wawasan pengetahuan kita seputar dunia website atau blog.
Terima Kasih.

Comments

Popular posts from this blog

Cara Ganti DNS di Windows 11 untuk Membuka Situs Terblokir

Cara Menghilangkan Login di CorelDraw X8

Memahami Nomor Kode Penamaan Prosesor Intel

Cara Mengetahui Lokasi Foto

Situs Cek Nama Domain dan Akun Sosial Media

Cara Memunculkan My Computer di Windows 10

Cara Memunculkan Shortcut Icon This PC dan Control Panel di Windows 11

Facebook Memiliki Tampilan Tatap Muka User Interface Terbaru di Tahun 2020

Biaya Transaksi di Beberapa Dompet Digital OVO, DANA, dan DOKU