Bawa

Membuat Breadcrumbs dengan CSS3

Membuat menu breadcrumbs dengan CSS3, menu bredcrumb 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.



Saya juga pernah memposting menu hampir seperti ini namun yang dulu berbeda dengan yang ini yang dulu hanya sebuah menu Breadcrhumbs Navigasi kalau mau lihat silahkan lihat dihalaman :

- Bikin breadcrumb navigasi menu

- Bikin breadcrumb navigasi plus dropdown submenu



Contoh navigasi breadcrumb seperti dibawah ini :

Contoh tampilan breadcrhumbs yang akan kita buat seperti dibawah ini, dan akan nampak di atas judul posting.



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



Kode CSS Breadcrumb :

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;

}

5. Simpan template



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