Membuat Breadcrumbs di Blog
Motivation - Kali ini saya akan membagikan Tutorial "Membuat Breadcrumbs di Blog". Apakah anda Tahu, apa itu Breadcrumbs? Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen. Dengan kata lain breadcrumb adalah tipe struktur navigasi yang menginformasikan pengunjung tentang halaman utama dan sub-kategori yang sedang dibuka atau dibrowsing. Breadcrumb trail biasanya diletakkan di bawah judul utama sebuah halaman web yang mengandung link pada masing-masing kategori dan sub-kategori.
Bagaimana Cara Memasangnya di Blog? Silahkan ikuti tutorialnya dibawah ini:
- Login ke Blogger >> Dashboard >> Template >> EDIT HTML
- Temukan Kode dibawah ini dengan menggunakan CTRL+F Untuk memudahkan pencarian.
<b:include data='top' name='status-message'/>
- Tambahkan Kode Berikut Tepat dibawah Kode diatas:
<b:include data='posts' name='breadcrumb'/>
- Setelah Itu, Temukanlah Kode dibawah ini:
<b:includable id='main' var='top'>
- Tambahkan/Pastekan Kode berikut ini, tepat diatas Kode diatas
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
- Terakhir, Carilah Kode:
]]></b:skin>
- Dan letakkan kode berikut tepat diatasnya
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
- Save Template
Nah itulah Tutorial "Membuat Breadcrumbs di Blog" Semoga Bermanfaat. Terima Kasih.
COMMENTS