Cara Membuat Breadcrumb

Cara Membuat Navigasi Breadcrumb di Blog Cara memasang/memberi navigasi breadcrumb atau cara menambah navigasi breadcrumb atau cara membuat menu berjajar di atas posting di blog.
Navigasi Breadcrumb
Apa itu navigasi breadcumbNavigasi breadcrumb adalah suatu bentuk navigasi konten blog kita sedemikian rupa sehingga bisa membantu pengunjung lebih mudah untuk menjelajah konten blog. Lalu bagaimana cara membuat navigasi breadcrumb itu? Gampang! Berikut ini saya akan menulas bagaimana cara membuat menu navigasi breadcrumb di blog:

1. Login ke Blog sobat >> Klik Template >> Edit HTML.

2. Lalu cari kode <b:if cond='data:post.title'> (bisa menggunakan CTRL+F atau F3). Jika ada dua kodenya pilih yang pertama. 

3. Kemudian copy kode dibawah letakkan dibawah <b:if cond='data:post.title'> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if
>


4. Lalu cari kode berikut  ]]></b:skin>

5. Letakkan kode berikut di atas kode nomor 4

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

6. Simpan Template dan lihat hasilnya. Cara Membuat Breadcrumb
Terima kasih telah membaca artikel Cara Membuat Breadcrumb
Artikel ini memiliki rating: 97% Top Artikel dari 93058 ratings. 93058 pembaca merekomendasikan ini.
Ditulis Oleh Zai Azura
Description: Cara Membuat Breadcrumb
Terimakasih atas kunjungan Sobat beserta kesediaan Sobat membaca artikel ini. Kritik dan Saran dapat Sobat sampaikan melalui Kotak komentar dibawah.

0 comments

Post a Comment

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel='image'>URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.


Konversi Kode di Sini! Emoticon OOT
Back to Top