Membuat Page Navigation (Breadcrumb)

Setelah blogging kesana-kemari akhirnya saya memutuskan untuk membuat postingan yang berjudul "Membuat Page Navigation (Breadcrumb)". Mungkin anda belum mengerti maksud dari judul tersebut? Silahkan perhatikan gambar yang ada disebelah kiri postingan ini, sekaligus tulisan yang ada diatas judul postingan, seperti:

[Home > Cara Membuat Readmore (Versi 1) > Cara Membuat Readmore]

Taukan? Nah itulah yang akan kita ganti nanti. Sedangkan caranya adalah sebagai berikut:

1. Anda login ke account blogger anda
2. Lalu pada halaman dashboard, klik link tata letak/ layout
3. Klik edit html dan Centang tulisan Expand Widget Template (jangan lupa, terlebih dulu di backup template anda)
4. Cari kode ini ]]></b:skin>
5. Copy paste kode dibawah ini persis diatas kode tadi

.breadcrumb {
float: left;
width: 590px;
font-size: 11px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

Sesuaikan kode CSS diatas sesuai dengan Template mu

6. Selanjutnya cari kode ini <div class='post hentry uncustomized-post-template'>
7. Copy paste kode dibawah ini persis dibawah kode tadi

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="breadcrumb">
<a href="data:blog.homepageUrl">Home</a>
<b:if cond="data:post.labels">
&gt;
<b:loop values="data:post.labels" var="label">
<a href="data:label.url" rel="tag"><data:label.name></data:label.name></a><b:if cond="data:label.isLast != &quot;true&quot;">,</b:if>
</b:loop>
</b:if>
&gt; <data:post.title>
</data:post.title></div>
</b:if>
<b:if cond="data:navMessage">
<div class="breadcrumb">
<a href="data:blog.homepageUrl">Home</a> &gt; <data:navmessage>
</data:navmessage></div>
</b:if>

8. Save Template dan Selesai
9. Selamat mencoba dan sukses selalu

Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

Bagikan