cool & cold

Cara Membuat Navigasi Breadcrumbs With CSS3 Bag 2

Membuat breadcrumbs with CSS3 Bag.2 - ini adalah lanjutan dari Cara Pasang Navigasi Breadcrumb Karena belum lengkap rasanya jika saya tidak merubah tampilan "Navigasi Breadcrumbs" yang sebelumnya.Baiklah Seperti yang sudah saya jelaskan di postingan sebelumnya tentang pentingnya navigasi breadcrumbs, selain bisa membantu pegunjung blog untuk mengetahui lokasi artikel, memasang navigasi breadcrumbs memang disarankan oleh mbah google.

Tulisan ini menjelaskan bagaimana membuat navigasi breadcrumbs yang bisa terindeks oleh google ketika tampil di mesin pencari.

Nah Bagaimana Apakah Anda Tertarik bila ia silahkan ikuti langkah - langkah di bawah ini.

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

4. Kemudian cari kode <b:include data=top name=status-message/> kalau ada 2 maka copas kode berikut ini di atas semua kode <b:include data=top name=status-message/>

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

5. Nah Sekarang cari kode <b:includable id=main var=top> kalau sudah ketemu paste kode berikut ini di atasnya.

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

6. Lalu klik PRATINJAU jika sudah OK silahkan klik SIMPAN TEMPLATE.

::: Tulisan berwarna merah itulah yang membedakan dengan membuat breadcrumbs sebelumnya.
Untuk melihat keberhasilan dari membuat menu navigasi breadcrumbs ini sobat bisa cek langsung di Google Rich Snippet Tool.:::

Selesai deh tutorial ini, selamat mencoba..^^