Cara Membuat Navigasi Breadcrumb Pada Blogspot Seri 3

Cara Membuat Navigasi Breadcrumb Pada Blogspot Seri 3 - Pada sebelumnya saya telah membuat dua tutorial tentang cara membuat navigasi breadcrumb pada blogspot ,Sebelumnya saya membuat posting cara membuat navigasi breadcrumb
- cara membuat navigasi breadcrumb
- cara membuat navigasi breadcrumb seri 2
Dan apabila cara buat navigasi breadcrumb di atas masih tidak cocok dengan template pada blog kamu, silahkan gunakan cara membuat navigasi breadcrumb pada blogspot seri 3 yang terakhir ini.

Buat Navigasi Breadcrumb Blog Seri 3

Tutorial cara buat navigasi breadcrumb blog yang terakhir ini sangat mudah silahkan simak cara membuat navigasi breadcrumb blog seri 3 ini : :

navigasi breadcrumb Seri 3

1.Log ke blogger dengan id kamu:
2.Click layout
3.Click Tab Edit HTML
4.Klik Download Full Template, untuk berjaga-jaga jika ada kesalahan
5.Mark kotak Expand Template Widget
6.temukan  kode dibawah dalam template kamu (untuk memudahkan pencarian tekan Ctrl + F)

Simak

Baca secara fonetik

copy paste kode ini:

<b:includable id='main' var='top'>

7.jika Anda telah menemukan, sekarang tempatkan script berikut , langsung di atas

copy paste kode ini:

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
</b:includable>

8.temukan kode berikut ini pada template kamu:

copy paste kode ini:

<b:if cond='data:post.dateHeader'>

Jika Anda telah menemukan, tempatkan kode di bawah ini, tepat di atas

copy paste kode ini:

<b:include data='post' name='breadcrumbs'/>

9.temukan kode

copy paste kode ini:

]]></b:skin>

jika Anda telah menemukan kode tadi , tempatkan kode css breadcrumb di bawah ini, tepat di atas kode tadi :

copy paste kode ini:

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

10.Click tombol Simpan Template

selesai

Silahkan menikmati cara membuat navigasi breadcrumb pada Blogspot Seri 3