Cara Membuat Blog Bagian Lima - Membuat Menu Breadcrumb Navigation

Sobat berhatikan gambar disamping terdapat result found at ....... yup itulah yang disebut breadcrumb navigation, kali ini materi cara membuat blog bagian lima adalah cara membuat menu breadcrumb navigation pada blogger.

cara membuat menu breadcrumb navigation sangatlah mudah asalkan sobat manut, nurut, dan mengikuti sesuai instruksi, untuk membuat menu breadcrumb sobat footnote harus lah login terlebih dahulu ke blogger.

kemudian untuk memauskan menu breadcrumb pada blog sobat sobat klik Rancangan kemudian pilih Edit HTML kemudian klik Expand Template Widget.

agar lebih mudah dan cepat klik ctrl + f  untuk memunculkan find dibawah windows mozila anda kemudian masukan kode berikut pada kolom find 

]]></b:skin>

setelah kode tersebut sobat temukan letakan kode CSS berikut sebelum kode diatas

.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;

kemudian sobat cari lagi kode berikut :

<b:include data='top' name='status-message'/>

jika sobat sudah menemukan kode tersebut, yah mestinya cepet dengan menggunakan find. masukan kode berikut tepat di bawahnya

<b:include data='posts' name='breadcrumb'/>

cari lagi kode yang ini yah

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

kemudian ganti kode itu dengan kode di bawah ini :

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page--> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <p class='breadcrumbs'> <span class='post-labels'>Results found at &gt; <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'>&gt; <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast == &quot;true&quot;'>&gt; </b:if> </b:loop> <b:else/> &gt; </b:if> <b:if cond='data:post.url'> <a expr:href='data:post.url'><span><data:post.title/></span></a></b:if> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive and search pages - blogspot seo friendly breadcrumbs by http://diarykudiblog.blogspot.com--> --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> Posts filed under &gt;<data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>

yang terakhir simpan template dan selesai jadi deh Breadcrumb Navigationnya

Posted in: Tutorial