Cara Membuat Breadcrumb CSS3 Untuk Blogger

Dulu saya pernah memposting bagaimana cara menambahkan breadcrumb untuk blog Anda. Kali ini saya akan berbagi tutorial bagaimana cara membuat breadcrumb keren untuk blog Anda dengan sentuhan CSS3 breadcrumb kali ini dijamin berbeda dengan yang pernah saya posting sebelumnya.

Baiklah untuk membuat breadcrumb ada 2 kode yang pertama adalah kode breadcrumb dan yang kedua adalah kode untuk menghias breadcrumb (kode CSS) yang harus disisipkan dalam template blog Anda.

Baiklah berikut ini adalah tutorial bagaimana cara membuat breadcrumb dengan CSS3 untuk blogger.

1. Login ke akun Blogger Anda

2. Kemudian klik Template >> Edit HTML >> Lanjutkan

3. Beri tanda cek pada "Expand Widget Template "

4. Find kode berikut ini :

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

NB : Mungkin Anda akan menemukan 2 kode yang sama dalam template blog Anda.

5. Isikan kode dibawah ini dibawah kode diatas (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>

 6. Kemudian carilah kode  ]]></b:skin> jika sudah ketemu masukkan kode dibawah ini diatas kode  ]]></b:skin> tersebut

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

7. Simpan template Anda kemudian silahkan dilihat hasil breadcrumb buatan Anda :) jika sudah nampang diatas judul posting artikel maka Anda sudah berhasil memasang breadcrumb CSS3 di blog Anda.

Thanks For : U-sup Blog