Membuat breadcrumb google gaya fixed

Hello Brother N Sister, Setelah sebelumnya saya posting tentang Breadcrumb yang terindeks google gaya Css3 sekarang saya akan posting tentang breadcrumb yang terindeks google gaya fixed, kalau bingung fixed itu apa, silahkan lihat postingan saya Menu gaya fixed nah itulah maksud dari Fixed. jadi breadcrumb pun begitu akan mengikuti kemanapun anda scrool, ini screenshotnya.

Seperti itulah bentuk dari breadcrumbs nya, dan Breadcrumbs yang terindeks oleh google inilah yang belakangan ini hangat di bicarakan oleh para blogger mania, nah bagi anda yang ingin menggunakan silahkan simak caranya.

1. Masuk di dasbor blog anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Proceed / Lanjutkan ( jika editor baru )
5. Centang Expand template widget
6. Cari kode ]]></b:skin>
7. Simpan kode di bawah ini di atas kode tersebut

.breadcrumbs {
padding: 5px 0 5px 15px;
margin: 0px 0px 15px 0px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #000;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #cfcb9d;
z-index: 999;
}

8. Cari kode <b:includable id='main' var='top'>
9. Setelah ketemu simpan kode di bawah ini di atas kode tersebut

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Anda sedang melihat - lihat semua postingan</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Postingan Berlabel <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

10. Cari lagi kode <b:include data='top' name='status-message'/> kode tersebut biasanya ada 2 simpan saja kode di bawah ini di atas kedua kode tersebut.

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

11. Klik Pratinjau jika tidak ada error klik SIMPAN TEMPLATE, Nah Itulah cara membuat breadcrumb terindeks google gaya fixed semoga bermanfaat.