Membuat breadcrumb css3 part 2

Membuat breadcrumb css3 part 2 adalah lanjutan dari Membuat breadcrumb dengan css3 emmm beberapa temen katanya breadcrumb yang pertama gak ke index sama GOOGLE jadi yang part 2 ini breadcrumb nya sudah terindex oleh GOOGLE postingan breadcrumb terindex oleh GOOGLE pertama kali di post oleh bloggerplugins dan sekarang breadcrumb nya sudah aku modifikasi lagi dengan tambahan css semoga aja bermanfaat ok mari kita langsung membahas nya :

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 cepet nyari-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

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

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;
}

Lalu klik PRATINJAU jika sudah OK silahkan klik SIMPAN TEMPLATE.