Membuat breadcrumb diatas postingan blog

Juli 20, 2026 Oleh Achmad Jauhari
Membuat breadcrumb diatas postingan blog


Navigasi diatas postingan atau yang lebih akrab disebut breadcrumb, mempunyai posisi yang lumayan penting karena membantu memberikan informasi kepada si pengunjung blog di halaman manakah mereka berada.Untuk format breadcrumb di blogger itu sendiri yaitu

home » label » postingan

Selain untuk memberikan informasi kepada pengunjung blog, breadcrumb ini juga bermanfaat dalam hal SEO blog.


Cara menambahkan navigasi diatas posting blog

1. Login ke blogger.com dengan akun gmail masing-masing.
2. Berikutnya anda klik Tema, Edit HTML.
3. Berikutnya anda copy kode CSS berikut ini.
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 85%;
color:#333333;
line-height:1.4em;
}
4. Letakkan kode tersebut diatas kode ]]></b:skin>
5. Berikutnya anda cari kode
<b:includable id='post' var='post'>
6. Copy dan paste kode berikut ini dibawah kode tersebut.
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if>&#187; <data:post.title/>
</div>
</b:if>
</b:if>
4. Terakhir, anda klik Simpan.
Semoga bermanfaat.
Bagikan:

Artikel Terkait