Berita Terbaru :
<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div>

Cara Membuat Breadcrumbs Blog

Sabtu, 01 September 20121komentar

cholenk.blogspot.com-breadcrumbs
breadcrumbs menu blogger  
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:
breadcrumb navigasi


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...
avatar Judul: Cara Membuat Breadcrumbs Blog
100% based on 99998 user reviews
Ratings : 3 Stars

Ditulis Oleh : Unknown
Komentar Facebook
1 Komentar Blogger

+ komentar + 1 komentar

Anonim
Rabu, 26 September, 2012

http://backlinks.auto-im.com/fullpack/

Posting Komentar


1. Berikan Komentar Anda Yang Sesuai Dengan Isi Artikel
2. Berkomentarlah Dengan Bijak
3. Mohon Untuk Tidak Melakukan SPAM

Semoga Tali Silaturrahim Kita Terus Terjalin Dengan Saling Berbagi Informasi

Regards,
CHOLENK

 
Template By : Creating Website | Modify By : CHOLENK
Copyright © 2011. CHOLENK - All Rights Reserved
CHOLENK
About Me | Contact Me | Arsip | Sitemap | Tukar Link
Back to Top