Breadcrumbs SEO 3 Style

Assalamu'alaikum Wr.Wb.

SEO (Search Engine Optimize) kata itulah yang begitu masih menggema sampai saat ini, banyak cara dilakukan agar WebBlog yang dimiliki menjadi SEO dalam artian mudah dikenali oleh Mesin Pencari, salah satu-nya SEO Breadcrumbs 3 StyleSEO Breadcrumbs ini yang disinyalir oleh sebagian saehu Blogger bisa meningkatkan kualitas WebBlog. Saya tidak akan membahas seperti apa, karena para Blogger sudah banyak yang mengetahui-nya. Saya hanya akan share posting untuk mempercantik-nya saja, seperti punya Saya ini. Sebelum-nya akan saya uraikan dulu cara pemasangan-nya di WebBlog bagi yang belum mengetahui cara-nya. Apabila Mojang dan Bujang ingin merubah dan mempercantik Breadcrumbs SEO 3 Style ini hanya tinggal merubah CSS Code-nya saja.

1. Cari kode dibawah ini :
]]></b:skin>
2. Kemudian Tambahkan Kode CSS dibawah ini diatas kode ]]></b:skin>

/* CSS Code Breadcrumbs Style-1 */
.breadcrumbs {zoom:1;font-size: 13px Verdana, San-serif;text-shadow: 0 1px 0 #fff;line-height:25px;height:25px;background-color:#edede4;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:0;margin:0;padding:0;}
.breadcrumbs:before,.breadcrumbs:after {display:table;content:"";zoom:1;}
.breadcrumbs:after {clear:both;}
.breadcrumbs a {color:##424242;}
.breadcrumbs > a {position:relative;height:25px;overflow:hidden;float:left;padding:0 30px 0 15px;}
.breadcrumbs > a:after {content:'';position:absolute;right:8px;top:-1px;height:25px;width:25px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.breadcrumbs > a:before {content:'';position:absolute;right:11px;top:0;height:25px;width:25px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.breadcrumbs a:last-child {color:#424242;}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none;}
.breadcrumbs a:hover{text-decoration:none!important; color:#222;}
.breadcrumbs span:hover{color:#868A08;}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:#01DF01;}
.breadcrumbs span{margin-top:1px;color:#999;}

3. Cari kode dibawah ini:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
4. Nonaktifkan status pesan atau kita hapus baris kode status pesan ini:
<!-- <b:include data='top' name='status-message'/> -->
5. Tambahkan Kode untuk menggantikan status pesan standar dibawah-nya:
<!-- <b:include data='top' name='status-message'/> -->
<b:include data='posts' name='breadcrumb'/>
6. Kemudian cari kode dibawah ini:
<b:includable id='main' var='top'>
7. Terakhir Masukan Kode HTML breadcrumb dibawah ini tepat diatas kode
<b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if></b:loop> <span><data:post.title/></span>
</b:if></b:loop></div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Pencarian : <a expr:href='data:blog.homepageUrl'>Home</a> <data:blog.pageName/>
</div><b:else/><b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Pencarian : <a expr:href='data:blog.homepageUrl'>Home</a> <b:else/>
Pencarian : <a expr:href='data:blog.homepageUrl'>Home</a> <data:blog.pageName/>
</b:if></div></b:if></b:if></b:if></b:if>
</b:includable>

8. Simpan template blogger dan preview Kalau sudah mengerti nah kini Saya akan share CSS Code-nya 2 Style lagi:

/* CSS Code Breadcrumbs Style-2 */
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}

/* CSS Code Breadcrumbs Style-3 */
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
.breadcrumbs a{list-style:none}
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:31!important}
.breadcrumbs a:nth-child(3){z-index:32!important}

Silahkan download Script CSS SEO Breadcrumbs-nya :

DOWNLOAD
Terakhir untuk warna to pengen merubah style CSS SEO Breadcrumbs ini silahkan Mojang dan Bujang, bebas untuk berkreasi. Go Blog Go ...!!! Amiin

Wassalam,