Cara Membuat Navigasi Breadcrumbs Keren

Cara Membuat Navigasi Breadcrumbs Keren

Artikel kali ini CHOLENK akan berbagi Informasi tentang bagaimana Cara Membuat Navigasi Breadcrumbs Keren . Mungkin artikel ini sudah banyak yang memposting tapi apa salahnya apabila CHOLENK coba posting kembali, barangkali sobat Blogger ada yang masih belum tahu atau beranggapan Informasi ini bermanfaat...

Sebelum perlu di ketahui apa itu breadcrumbs ?
Breadcrumb bisa dikatakan sebagai menu petunjuk arah atau lokasi pada sebuah postingan blog atau website, manfaat navigasi breadcrumbs ini juga dapat memperbaiki SEO suatu situs yang memasang navigasi breadcrumbs ini.Menurut pakar SEO navigasi breadcrumb ini membuat postingan blog kan cepat terindeks karena mempermudah Search Engine mengidentifikasi halaman blog. Manfaat lain breadcrumb menu ini juga untuk mempermudah pengunjung mengetahui lokasi dia dalam sebuah halaman blog untuk kembali ke lokasi urutan dari halaman tersebut.

Contoh Gambar Navigasi Breadcrumbs Keren

Tutorial Cara Membuat Navigasi Breadcrumbs Keren

Jika blog kamu belum memiliki breadcrumb segeralah pasang menu navigasi breadcrumb tersebut, caranya dibawah ini :

1. Masuk ke Template >> Edit HTML dan klik Expand Widget Template
2. Cari kode dibawah ini :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

3. Letakkan kode berikut ini tepat di bawah kode no.2 (kode no.2 ada 2 letakkan setelah kode yang pertama)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='breadcrumbs'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> </b:if>
<li><a class='current' expr:href='data:post.url'><data:post.title/></a></li>
</ul>
</b:if>

4. Cari kode ]]></b:skin>
dan letakkan kode berikut tepat diatas ]]></b:skin>

#breadcrumbs {
margin: -16px 0px 10px -15px;
padding: 6px 12px 6px;
list-style: none;
}
#breadcrumbs{
background: #333;font-size:11px;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}

#breadcrumbs li{
float: left;
}

#breadcrumbs a{
padding: 3px 12px 3px 17px;
float: left;
text-decoration: none;
color: #fff;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, right bottom, from(#666), to(#333));
background-image: -webkit-linear-gradient(left, #666, #333);
background-image: -moz-linear-gradient(left, #666, #333);
background-image: -ms-linear-gradient(left, #666, #333);
background-image: -o-linear-gradient(left, #666, #333);
background-image: linear-gradient(to right, #666, #333);
}

#breadcrumbs li:first-child a{
padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

#breadcrumbs a:hover{
background: #ea5405;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
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;
right: -1em;
}

#breadcrumbs a::after{
z-index: 2;
border-left-color: #333;
}

#breadcrumbs a::before{
border-left-color: #222;
right: -1.1em;
z-index: 1;
}

#breadcrumbs a:hover::after{
border-left-color: #ea5405;
}

#breadcrumbs .current,
#breadcrumbs .current:hover{
font-weight: normal;
background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before{
content: normal;
}

5. Simpan template

Sekarang lihat hasilnya pada posting kamu, jika berhasil breadcrumb ini akan tampil diatas judul postingan blog kamu...!


Semoga apa yang CHOLENK share pada kesempatan kali ini tentang Informasi Cara Membuat Navigasi Breadcrumbs Keren bermanfaat dan sedikit membantu permasalahan sobat Blogger.
Selamat Mencoba Dan Happy Blogging...