Style CSS Label Yang Terindex Google

Cara membuat breadcrumbs label yang terindex google sudah banyak yang membahas, namun kesempatan kali ini kita akan menggunakan style google dengan gambar sprite. cara ini biasa kita gunakan dengan membuat menu navigation standar yang menggunakan elemen ul dan li. maka pada edit HTML akan kita modifikasi sedikit dengan merubah elemen <span> dengan list style. cara kerja ul dan li silahkan anda masuk pada tutorial penggunaan image sprite dan menu navigation. pelajari apa yang ingin anda ketahui di sana.

nah bagaimana jika kita ingin memodifikasi style bredcrumbs dengan gambar sprite... langsung saja kecara pemasangan. maaf jika penjelasannya kurang karena akan membutuhkan halaman yang panjang.
Sebelumnya lihat demonya di bawah ini itulah bredcrumbs label dengan style google yang bisa terindex google:

View Demo
contoh gambar yang terindex di Search Engine Google .

Pada gambar lihat yang di garis bawah merah.. itulah contoh label yang terindex google.

Cara Membuat dan Memasang Breadcrumbs

1. Masuk ke dashbord >> rancangan/template >> edit HTML/edit template >> Lanjutkan >> centang expand yang di pojok kanan.
2. jika blog Anda sudah ada breadcrumb-nya hapus saja, caranya cari kode : breadcrumb pada template kemudian hapus semuanya hingga tak ada kode breadcrumb lagi (gunakan 'ctrl+f' untuk mempermudah pencarian).
3. CSS yang di gunakan untuk Style Google.
cari code ]]></skin> lalu simpan css diatas code tersebut.

.breadcrumbs {
    display: block;
    float: left;
}

.breadcrumbs li {
    display: inline
}

.breadcrumbs li.first {
    padding-left: 8px
}

.breadcrumbs li a,.breadcrumbs li a:link,.breadcrumbs li a:visited {
    color: #666;
    display: block;
    float: left;
    font-size: 12px;
    margin-left: -13px;
    padding: 7px 17px 11px 25px;
    position: relative;
    text-decoration: none
}

.breadcrumbs li a {
    background-image: url('https://css3-tutsplus.googlecode.com/svn/trunk/breadcrumbs/img/bg-crumbs.png');
    background-repeat: no-repeat;
    background-position: 100% 0;
    position: relative
}

.breadcrumbs li a:hover {
    color: #333;
    background-position: 100% -48px;
    cursor: pointer
}

.breadcrumbs li a:active {
    color: #333;
    background-position: 100% -96px
}

.breadcrumbs li.first a span {
    height: 29px;
    width: 3px;
    border-left: 1px solid #d9d9d9;
    position: absolute;
    top: 0px;
    left: 0px
}

4. Pasang HTML.
Cari kode seperti ini :

<b:include data='top' name='status-message'/>

Setiap template berbeda,terkadang kode <b:include data='top' name='status-message'/> ini ada dua.
maka cari kode tersebut yang dekat dengan kode <data:defaultAdStart/>.

Jika ketemu maka copy code berikut ini dan letakan di bawahnya .

<b:include data='posts' name='breadcrumb'/>

Hasilnya akan seperti ini.

<b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>

    <data:defaultAdStart/>

Jika di template anda kode <b:include data='top' name='status-message'/> ini hanya terdapat satu.
maka cari langsung kode <b:includable id='post' var='post'> .

Setelah ketemu letakan kode berikut tepat di bawahnya.

<b:include data='posts' name='breadcrumb'/>

Hasilnya akan Seperti ini .

<b:includable id='post' var='post'>
    <b:include data='posts' name='breadcrumb'/>

Terakhir copy code di bawah ini dan letakan di atas code <b:includable id='main' var='top'> :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul class='breadcrumbs'>
<li class='first' itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag' style='z-index:2;'><span itemprop='title'/>Home</a></li>
<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 == &quot;true&quot;'>
<li itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' itemprop='url' rel='tag' style='z-index:1;'><span itemprop='title'><data:label.name/></span></a></li>
</b:if>
</b:loop>
<b:else/>
<li class='last'><a expr:href='data:blog.homepageUrl' style='z-index:1;'>Unlabelled</a></li>
</b:if>
<li class='last'><a expr:href='data:post.url' style='z-index:0;'><data:post.title/></a></li>
</b:loop>
</ul>
</b:if>
</b:if>
</b:includable>

simpan template anda...
Untuk menge-check apakah tutorial di atas bekerja maka anda harus masuk ke google reachsnippet . dan masukan artikel terbaru anda di SINI.
Hanya itu saja tutorial yang saya berikan jika ada kesalahan silahkan tinggalkan komentar dan saya akan menunggu diskusi anda dan tidak sabar untuk menjawabnya.

post by: denddy

Baca selengkapnya tentang breadcrumb yang terindex google >> klik Tutorial...