Style CSS Label Yang Terindex Google

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

9 comments:

  1. Replies
    1. yoi sob.. pada dasarnya hampir sama dengan breadcrumbs label yang lain hanya mengganti elemen span jadi ul dan li... :D

      Delete
  2. Mas, tapi kenapa punya saya yang muncul ada 2 ya, mohon bantuanya mas.
    coba deh liat gambar berikut ...!!
    :p :p :p :p
    http://ximg.us/upload/1341300455.png

    ReplyDelete
    Replies
    1. coba perhatikan kembali tutorialnya.. hapus code yang sama terutama code dengan nama breadcrumb .. dan tempatkan code pada tempat yang benar.. jika masih ada kesalahan tinggalkan kembali komentar..

      Delete
  3. mantab sob ane coba yak :D :D :D
    ngomong" biar labelnya gak terindex google gimana ya sob ....
    setelah saya baca tentang artikel agan yang breadcrumb itu masuk akal juga sih hehehe menurut saya loh :D

    ReplyDelete
    Replies
    1. biar tidak terindex tinggal hapus saja code ling seperti ini
      itemtype='http://data-vocabulary.org/Breadcrumb'

      Delete
    2. sip mkasih sob :-d

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. punyaku malah kyak gni

    http://i.imgur.com/CXHg8Fj.png

    T_T

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top