Membuat Breadcrumb Unik Dengan CSS3

Membuat Breadcrumb Unik Dengan CSS3 ini akan membuat tampilan lebih elegant, seperti breadcrumb yang saya pakai ini, gambar diatas merupakan tampilan pada blog. Breadcrumb ini dapat terindeks dalam mesin pencari dan semoga bisa membuat masuk Top SERP dalam mesin pencari.

Gambar dibawah ini adalah tampilan dalam mesin pencari

1. Masuk di blog anda 
2. Klik Rancangan + Edit HTML
3. Jika Editor baru langsung saja klik Template
4. Jangan Lupa Centang Expand Template WIdget  
5. Cari kode di bawah ini
6. Gunakan CTRL + F biar cepat mencari nya

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

Jika kode tersebut ada dua silahkan simpan saja kode di bawah ini di atas kedua kode tersebut

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

Nah setelah itu silahkan silahkan cari lagi kode seperti di bawah ini

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

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;'>
<ul id='breadcrumbs-system'>
<li><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span></li>
<li><span><data:blog.pageName/></span></li>
</ul>
<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'>
<ul id='breadcrumbs-system' xmlns:v='http://rdf.data-vocabulary.org/#'>
<li><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span></li>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></li>
</b:if>
</b:loop>
<li><span><data:post.title/></span></li>
</ul>
<b:else/>
<ul id='breadcrumbs-system'>
<li><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span></li>
<li><span>Unlabelled</span></li>
<li><span><data:post.title/></span></li>
</ul>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<ul id='breadcrumbs-system'>
<li><span><a expr:href='data:blog.homepageUrl'>Home</a></span></li>
<li><span>Archives for <data:blog.pageName/></span></li>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<ul id='breadcrumbs-system'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li><span><a expr:href='data:blog.homepageUrl'>Home</a></span></li>
<li><span>All posts</span></li>
<b:else/>
<li><span><a expr:href='data:blog.homepageUrl'>Home</a></span></li>
<li><span>Posts filed under <data:blog.pageName/></span></li>
</b:if>
</ul>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Nah setelah itu cari kode ]]></b:skin> setelah ketemu simpan kode di bawah ini di atas kode
]]></b:skin>

#breadcrumbs-system{
overflow: hidden;
width: 100%;
}
#breadcrumbs-system li{
float: left;
margin: 0 .5em 0 1em;
list-style-type: none;
font-size: 13px;
}
#breadcrumbs-system a{
background: #1478ff;
padding: 2px 5px;
float: left;
text-decoration: none;
color: #DDD;
position: relative;
}
#breadcrumbs-system a:hover{
background: #0f53b0;
}
#breadcrumbs-system a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #1478ff #1478ff #1478ff transparent;
left: -1em;
}
#breadcrumbs-system a:hover::before{
border-color: #0f53b0 #0f53b0 #0f53b0 transparent;
}
#breadcrumbs-system a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #1478ff;
right: -1em;
}
#breadcrumbs-system a:hover::after{
border-left-color: #0f53b0;
}

Simpan Template

Source kode : sin1aja.blogspot.com