Breadcrumb adalah salah satu cara navigasi dan teknik untuk mempermudah pengunjung blog kita mencari informasi ataupun kembali ke halaman sebelumnya yang berhubungan dengan topik yang kita baca.
Contohnya seperti berikut
Untuk membuat dan menambah supaya muncul navigasi breadcrumb silahkan masuk dulu ke Draft Blogger
Sign In di Blogger
Dalam Dasbor --> Masuk Ke Rancangan --> Edit HTML
Kemudian Centang Expand Template Widget
Cari kode berikut
<b:include data='top' name='status-message'/>Kemudian ganti dengan kode di bawah
<div id='breadcrumb'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<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>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<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>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
Kemudian Simpan dulu hasilnya.
Sekarang kita tinggal membuat kode untuk CSS nya, untuk itu copy kode CSS berikut :
#breadcrumb {
border: 1px solid $bordercolor;
padding: 5px 15px;
margin: 10px 0;
line-height: 1.4em;
}Kemudian cari kode ini dan tempatkan kode CSS diatas kode ini </b:skin> . Jangan lupa hasilnya di simpan.
Keterangan :- Tulisan " Welcome To " bisa kita ganti dengan tulisan apa saja, karena tulisan ini tampil di halaman muka ( HOME ) bagian atas postingan kita, misalkan dengan title blog kita.
- Bila ingin ada background, tinggal menambahkan kode CSS di elemen #breadcrumb.
Belajar Bersama
***** Semoga Bermanfaat *****
4 komentar:
Embah google <=- ini mah blog dummies
ini blog aslinya mah
Prodigy of Head ama
Ben Tools
:-* :D
I'm impressed, I must say. Rarely do I come across a blog that's both educative and entertaining, and without a doubt,
you've hit the nail on the head. The problem is an issue
that too few people are speaking intelligently about.
Now i'm very happy I stumbled across this in my hunt for something regarding this.
my page - webpage ()
ıldır transfer
güzelbahçe transfer
foça transfer
mordoğan transfer
aliağa transfer
8KPWQ
kyrie irving shoes
kyrie irving
cheap birkin bag
goyard handbags
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.