Cara Membuat Breadcrumbs Blog

 

Share CHOLENK kali ini tentang bagaimana Cara Mudah Membuat Breadcrumbs Blog , Sebelum perlu di ketahui apa itu breadcrumbs ?
Bredcrumbs 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 breadcrumbs ini membuat postingan blog kan cepat terindeks karena mempermudah Search Engine mengidentifikasi halaman blog. Manfaat lain breadcrumbs menu ini juga untuk mempermudah pengunjung mengetahui lokasi dia dalam sebuah halaman blog untuk kembali ke lokasi urutan dari halaman tersebut.

Untuk tampilan breadcrumbs share kali ini seperti dibawah ini:

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: 0;
padding: 0;
list-style: none;
}
#breadcrumbs{
background: #eee;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: #444;
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(#f5f5f5), to(#ddd));
background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

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

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

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

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

#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...! 

Demikian artikel CHOLENK bagaimana  Cara Mudah Membuat Breadcrumbs Blog  .
Selamat mencoba dan semoga bermanfaat...