Cara membuat breadcrumb sebelum membuat breadcrumb disini saya akan sedikit menguraikan apa itu breadcrumb dan apa fungsinya
breadcrumb adalah suatu tulisan yang muncul di atas judul postingan jika postingan tersebut di buka sebagi contohnya seperti gambar di bawah ini
fungsi dari breadcrumb tersebut adalah untuk memberitahukan kepada pengunjung atau kita sendiri bahwa kita lagi berada di halaman mana dan di postingan mana yang sedang di buka, nama breadcrumb tersebut nanti nya muncul sesuai judul postingan yang sedang di buka dan di situ juga di sediakan link menuju home, untuk lebih jelasnya contoh tulisan dari breadcrumb seperti di bawah ini
contoh breadcrumb :
" Anda disini » Home » Agen pulsa dan ppob arkaan reload » agen pulsa dan ppob pembayaran listrik dll arkaan reload "
sekarang sudah jelas kan..., jika kalian suka dan minat untuk membuat breadcrumb silahkan simak terus artikel ini
di sini perlu anda ketahui jika template blog anda masih memakai template bawaan blogger maka breadcrumb tersebut belum ada tapi jika template kalian dapat dari download terkadang breadcrumb ini sudah di pasang, untuk mengecek breadcrumb anda sudah ada atau belum nya silahkan buka salah satu postingan anda dan lihat di atas judul posting sudah ada tulisan seperti contoh breadcrumb di atas atau belum jika belum ada dan kalian suka mau membuatnya simak panduan di bawah ini cara membuat breadcrumb
langkah pembuatan breadcrumb ada dua langkah
langkah pertama
1. buka blog kalianlalu login
2. dalam dashboard pilih template
3. klik edit HTML
4. cari di dalam kode HTML kalian kode berikut ]]></b:skin>
5. copy kode di bawah ini
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda disini » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
breadcrumb adalah suatu tulisan yang muncul di atas judul postingan jika postingan tersebut di buka sebagi contohnya seperti gambar di bawah ini
fungsi dari breadcrumb tersebut adalah untuk memberitahukan kepada pengunjung atau kita sendiri bahwa kita lagi berada di halaman mana dan di postingan mana yang sedang di buka, nama breadcrumb tersebut nanti nya muncul sesuai judul postingan yang sedang di buka dan di situ juga di sediakan link menuju home, untuk lebih jelasnya contoh tulisan dari breadcrumb seperti di bawah ini
contoh breadcrumb :
" Anda disini » Home » Agen pulsa dan ppob arkaan reload » agen pulsa dan ppob pembayaran listrik dll arkaan reload "
sekarang sudah jelas kan..., jika kalian suka dan minat untuk membuat breadcrumb silahkan simak terus artikel ini
di sini perlu anda ketahui jika template blog anda masih memakai template bawaan blogger maka breadcrumb tersebut belum ada tapi jika template kalian dapat dari download terkadang breadcrumb ini sudah di pasang, untuk mengecek breadcrumb anda sudah ada atau belum nya silahkan buka salah satu postingan anda dan lihat di atas judul posting sudah ada tulisan seperti contoh breadcrumb di atas atau belum jika belum ada dan kalian suka mau membuatnya simak panduan di bawah ini cara membuat breadcrumb
langkah pembuatan breadcrumb ada dua langkah
langkah pertama
1. buka blog kalianlalu login
2. dalam dashboard pilih template
3. klik edit HTML
4. cari di dalam kode HTML kalian kode berikut ]]></b:skin>
5. copy kode di bawah ini
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
6. copy kode di atas dan pastekan atau tempelkan tepat di atas kode ]]></b:skin>
7. jangan di simpan dulu
keterangan :
jangan di simpan dulu tapi kalau mau di cek dengan cara klik pratinjau tidak apa apa , jika di klik partinjau dan tidak ada masalah silahkan klik lagi pada edit template
8. cari lagi kode di dalam HTML template anda kode ini <div class='post hentry'> atau kode ini <b:includable id='post' var='post'>
9. copy kode di bawah ini
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda disini » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
10. copy kode di atas dan masukan / tempelkan ke dalam template anda tepat di bawah kode <div class='post hentry'> atau bisa juga tempelkan di bawah kode ini <b:includable id='post' var='post'>
Keterangan :
cara memasukan kode yang ke dua kalian bebas mau di masukan di bawah ini bisa <div class='post hentry'> atau di bawah kode ini juga bisa <b:includable id='post' var='post'> ( tapi pilih salah satu aja )
11. jangan di simpan dulu, silahkan klik pratinjau dulu jika sudah tidak ada masalah baru di simpan.
12. selesai
untuk melihat hasilnya silahkan buka salah satu posting blog anda
sampai disini tutorial tentang cara membuat breadcrumb ,semoga bermanfaat, jika ada kesulitan silahkan berkomentar saja, Terimakasih
No comments:
Post a Comment